21 de fev de 2017

Marcadores Personalizados - 4 modelos

Oiee, quem está de volta com um tutorial novo? Sim, euzinha! Hoje nós vamos aprender a deixar as marcadores da lateral do blog muito mais bonitinhos, vamos lá?




Eu fiz 4 modelos para você escolher o que melhor combina com o seu blog, para adicionar o código ao seu layout basta ler as instruções á seguir.

Antes de iniciar você tem que deixar o gadget dos marcadores assim:


No painel do Blogger vá em Modelo > Editar HTML > clique em CTRL+F e na caixa de pesquisa que abrir procure por esse trecho: ]]></b:skin>

Acima desse trecho cole o código do modelo escolhido e salve.


Modelo 1

/*--- Marcadores personalizados por Blog da Rocky --- */
.sidebar ul li {
 list-style: none;
float: right;
width: 35%;
 margin: 0;
 padding: 0;
font-family: "Josefin Sans", sans-serif;
text-transform: uppercase;
font-size: 14px;
 border-bottom:1px solid #FF88C4;
    padding: 0 0 4px 12px;
    background: url("http://i.imgur.com/WVriIQO.png") no-repeat 0 2px;

Modelo 2

/*--- Marcadores personalizados por Blog da Rocky --- */
.sidebar ul li {
 list-style: none;
float: right;
width: 35%;
 margin: 0;
 padding: 0;
font-family: "Josefin Sans", sans-serif;
text-transform: uppercase;
font-size: 14px;
 border-bottom:1px solid #FF88C4;
    padding: 0 0 4px 12px;
    background: url("http://i.imgur.com/a1gqZul.png") no-repeat 0 2px;


Modelo 3

/*--- Marcadores personalizados por Blog da Rocky --- */
#Label1 ul li {float:left; padding-left:18px; font-family: 'Arial Narrow', sans-serif;
font-size: 17px;
background:url(http://i.imgur.com/sSCQV8e.png) no-repeat left;
text-indent: 8px;width:220px; -webkit-transition-duration: .40s;
-webkit-transition-duration: .40s;margin-left: 30px;border-bottom: 1px dashed #BDBDBD;list-style: none;
} #Label1 ul li:hover{
background:url(http://i.imgur.com/karGspT.png) no-repeat left;}
#Label1 ul li a {color: #2E2E2E;} 
#Label1 ul li a:hover {color: #FA5882;}



Modelo 4

/*--- Marcadores personalizados por Blog da Rocky --- */
#Label1 ul li {float:left; padding-left:18px; font-family: 'Arial Narrow', sans-serif;
font-size: 17px;
background:url(http://i.imgur.com/jO4rHnh.png) no-repeat left;
text-indent: 8px;width:220px; -webkit-transition-duration: .40s;
-webkit-transition-duration: .40s;margin-left: 30px;border-bottom: 1px dashed #FF6896;list-style: none;
} #Label1 ul li:hover{
background:url(http://i.imgur.com/2ywWLzP.png) no-repeat left;}
#Label1 ul li a {color: #2E2E2E;} 

#Label1 ul li a:hover {color: #FA5882;}

Gostou desse tutorial? Se inscreve no meu canal que tem um monte deles super explicadinhos, ah, e curte a fanpage.

CONHEÇA MEU OUTRO BLOG! Moda evangélica, cachos, inspirações, resenhas e muito mais!! Blog Twice ♥

5 comentários :

  1. Eu simplesmente adoro esses posts com dicas, aqui no seu blog a gente encontra de tudo um pouquinho, sempre coisas úteis.

    http://kethellynb.blogspot.com.br/2016/12/como-fazer-uma-guirlanda-com-coisas-que.html

    ResponderExcluir
  2. Mandei um Direct no insta ❤ estou amando Tudo perfeitinho a certo que estou com algumas dificuldades ,pois antes tinha deixado alguém editar para mim porque eu não sábia , e alguns códigos não aparecem na minha pesquisa da uma ajuda Aqui pra mim, bjoos e estou te acompanhando não esquece de ver lá o meu recadinho

    ResponderExcluir