Como Personalizar os Marcadores do Blogger

Como Personalizar os Marcadores do Blogger

Primeiro adicione ao seu blog o gadget dos marcadores

Depois vá ao html de seu blog, aperte ao mesmo tempo as teclas ctrl f  e procure por  ]]></b:skin>,

Quando encontrar coloque o código que desejar acima desta tag ou procure por: .sidebar .widget {

apague todo o código, desde  .sidebar .widget { e coloque o código de um dos modelos.

Modelo I

.widget ul, .widget #ArchiveList ul.flat {

list-style: none;

padding: 5px;

}

.widget ul li, .widget #ArchiveList ul.flat li {

background-color: #f4f4f4;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

padding: 5px;

margin: 2px;

border-bottom: solid 1px #e3e1e2;

text-align: center;

-webkit-transition-duration: .50s;

}

.widget ul li:hover {

background: #ffcad4;

border-bottom: solid 1px #fcb0be;

-webkit-transition-duration: .50s;

}

Modelo II

.widget ul, .widget #ArchiveList ul.flat {

list-style: none;

padding: 5px;

}

.widget ul li, .widget #ArchiveList ul.flat li {

text-align: center;

border-bottom: dotted 1px #d5d5d5;

-webkit-transition-duration: .50s;

}

.widget ul li:hover {

background: #f4f2f4;

-webkit-transition-duration: .50s;

}

Modelo III

#Label1 ul li{

float: left;

width: 45%;

font-family: 'Dosis', sans-serif; /* fonte, se preferir troque */

text-transform: uppercase; /* letras em maiúsculo, se não quiser apague a linha */

font-size: 16px; /*tam. da fonte*/

background: #fff; /*fundo*/

border-bottom: 2px solid #ccc; /* borda de baixo do marcador */

margin: 5px;

font-weight: normal;

list-style-type:none;

}

#Label1 ul li:hover{

background: #EAEAEA; /*fundo hover*/

border-bottom: 2px solid #FF51A8; /* borda de baixo do marcador hover */

}

Modelo IV

Para este modelo você deve configurar o gadeget de marcadores 

como o modelo abaixo:

.label-size{

margin:0;

padding:0;

position:relative;

}

.label-size a{

float:left;

height:24px;

line-height:24px;

position:relative;

font-size:12px;

margin-bottom: 9px;

margin-left:20px;

padding:0 10px 0 12px;

background:#0089e0;

color:#fff;

text-decoration:none;

-moz-border-radius-bottomright:4px;

-webkit-border-bottom-right-radius:4px;

border-bottom-right-radius:4px;

-moz-border-radius-topright:4px;

-webkit-border-top-right-radius:4px;

border-top-right-radius:4px;

}

.label-size a:before{

content:"";

float:left;

position:absolute;

top:0;

left:-12px;

width:0;

height:0;

border-color:transparent #0089e0 transparent transparent;

border-style:solid;

border-width:12px 12px 12px 0;

}

.label-size a:after{

content:"";

position:absolute;

top:10px;

left:0;

float:left;

width:4px;

height:4px;

-moz-border-radius:2px;

-webkit-border-radius:2px;

border-radius:2px;

background:#fff;

-moz-box-shadow:-1px -1px 2px #004977;

-webkit-box-shadow:-1px -1px 2px #004977;

box-shadow:-1px -1px 2px #004977;

}

.label-size a:hover{background:#555; color:#000; }

.label-size a:hover:before{border-color:transparent #555 transparent transparent;

}

Modelo V

.sidebar ul li {

 list-style: none;

 margin: 0;

 padding: 0;

 border-bottom:1px solid #fee;

    padding: 0 0 4px 12px;

    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPCdAizUpandMT2RoqcbqxRUXHBeBYlKvuJobun1OVJSHl-fzpJNRZch3miSwNodzE-0qWKJzLfteNCAlluWq4IdZGoeTGUUqT5YUBfduM4RwbtPhIuhs_-qUG2x8Y_3Y0nepfgUnb/s1600/mini-153.gif") no-repeat 0 2px;

} 

Pessoal os Códigos são esses, deixem seus comentários e 

curta nossa pagina no Facebook