Olá queridos leitores do Categoria Blogger. Depois de termos aprendido a instalar o Jump Link em blogs do Blogger que não possui ele, hoje aprenderemos a personalizar ele. Iremos deixá-lo um pouco parecido com o nosso (que utilizamos aqui no blog). Vamos lá?
1. Acesse o Painel de Controle do seu blog e clique na guia Modelo. Clique no botão Editar HTML e procure pelo código abaixo.
]]></b:skin>
2. Imediatamente, acima do código achado cole o seguinte código. Faça as modificações como desejar.
.jump-link {
font:normal bold 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin:15px 0px 0px;
text-align:right;
}
.jump-link a:link {
color:#FFFFFF;
background: #FF6A6A;
border: 1px solid #000;
text-decoration:none;
margin:0px;
padding:5px 20px;
outline:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-goog-ms-border-radius:4px;
border-radius:4px;
}
.jump-link a:visited {
color:#FFFFFF;
background: #FF6A6A;
border: 1px solid #000;
text-decoration:none;
margin:0px;
padding:5px 20px;
outline:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-goog-ms-border-radius:4px;
border-radius:4px;
}
.jump-link a:active {
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
-o-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);
}
Não iremos adicionar partes para personalizar pois ficará à seu gosto. Modifique o que desejar, sinta-se a vontade.
3. Clique em Visualizar e veja como ficou seu Jump Link, logo após clique em Salvar modelo.
Pronto! Não foi simples? Então não deixe de compartilhar sua opinião ou dúvida. Até mais.
Não funcionou no Modelo Answer Espetacular LTDA da Tina Chen
28 de janeiro de 2013 às 13:01Aqui deu tudo certo no mesmo modelo descrito. Tente novamente.
28 de janeiro de 2013 às 14:35Optei por outra forma de customizar o mesmo. Mas obrigado ainda assim.
28 de janeiro de 2013 às 22:28Postar um comentário