quarta-feira, 14 de dezembro de 2011

Como colocar linkbar no Blogger

Já vi em vários blogs como colocar linkbar no Blogger, mas todos sem sucesso. Então resolvi fazer o meu próprio tutorial ensinando a colocar uma destas no seu blog.

1º – Aperte no seu teclado os botões Ctrl+F e procure pelo seguinte código:

<div style='clear: both;'/>

ABAIXO dele coloque o seguinte código:

<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'/>
</b:section>
</div>

2º – Agora procure por:

Variable definitions

ABAIXO dele coloque este código:

<Variable name="linkbarbgColor" description="Linkbar Background Color"
type="color" default="#C94093" value="#1B703A">
<Variable name="linkbarmainBorderColor" description="Linkbar Main Border Color"
type="color" default="#C94093" value="#ffffff">
<Variable name="linkbarBorderColor" description="Linkbar Border Color"
type="color" default="#9D1961" value="#11593C">
<Variable name="linkbarTextColor" description="Linkbar Text Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="linkbarHoverBgColor" description="Linkbar Hover Background Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="linkbarHoverTextColor" description="Linkbar Hover Text Color"
type="color" default="#9D1961" value="#2D8930">
<Variable name="middlebarbgColor" description="Middlebar Background Color"
type="color" default="#ffffff" value="#ffffff">

<Variable name="linkbarTextFont" description="Linkbar Text Font"
type="font"
default="normal normal 77% Verdana, sans-serif" value="normal bold 94% Trebuchet, Trebuchet MS, Arial, sans-serif"
>

3º – Agora procure por:

]]></b:skin>

ACIMA dele coloque este código:

#linkbar-wrapper {
width:978px;
position:relative;
background:$linkbarbgColor;
border:0 solid $linkbarmainBorderColor;
margin:0;
padding:0;
}

#linkbar .widget {
text-align:left;
margin:0;
padding:4px 0 7px;
}

#linkbar ul {
list-style-type:none;
margin:0;
padding:0;
}

#linkbar li {
display:inline;
margin:0;
padding:0;
}

#linkbar h2 {
display:none;
visibility:hidden;
margin:0;
padding:0;
}

#linkbar a {
clear:both;
width:100%;
text-decoration:none;
font:$linkbarTextFont;
color:$linkbarTextColor;
text-transform:none;
border-right:0 solid $linkbarBorderColor;
border-left:0 solid $linkbarBorderColor;
margin:0 -4px 0 0;
padding:7px 10px;
}

#linkbar a:hover {
color:$linkbarHoverTextColor;
background:$linkbarHoverBgColor;
}

4º – Agora clique em “Salvar Modelo”

Depois você pode ir em Desinger do modelo e editar as cores da linkbar.

Fique Sabendo!

é pernambucano, e é estudante e blogueiro nas horas vagas. Gosta de estudar, ler livros, assistir a bons filmes e séries. Na internet gosta de ler notícias interessantes, tecnologia e TV. Também escreve no Mundo Geek.
comments powered by Disqus

 

Copyright @ 2011-2015 Fique Sabendo!.