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.
3 Comentários
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