Vou iniciar uma categoria nova,"tutorias"; Pensei em não fazer isso, pois sou péssimo para criar essas coisas. Mas como é um item, que todos precisamos, volta e meia vou catar algum na Internet e postar aqui, claro que colocando os créditos a quem é de direito. Esse tutorial, achei no site "Semnome.net"; Otimo tutorial pra quem gosta de customizar o blog, este em questão, você vai aprender a trocar os títulos dos seus widgets da sidebar, por imagens, assim como fiz aqui no meu blog.
Para começar, crie um Widget qualquer no seu blog. Vou colocar “Titulo Vagabundo” como título do Widget, para podermos identificá-lo posteriormente:
Depois de salvar o Widget, podemos vê-lo na nossa Sidebar:
E devemos também ter a imagem pronta. Costumo fazer as minhas no Photoshop com formato .PNG. Irei utilizar uma imagem nas dimençoes 148px x 106px:
Agora, com isso pronto, vamos ao tutorial (clique nas imagens para ampliá-las):
1 - No Blogger, vá em Editar HTML e selecione “Expandir modelos de widgets”:
2 - Use Ctrl+F para achar esta linha ]]></b:skin> ,e cole antes dela, o código abaixo:
.widget .title img{
display: block;
text-align: center;
}
3 - Aperte Ctrl+F e procure o título do widget, no meu caso, “Titulo Vagabundo”:
Encontrado o Widget, ele terá uma estrutura parecida com essa:
<b:widget id='Text2' locked='false' title='Titulo Vagabundo' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
[…]4 - Apague o “<data:title/>” e substitua por:
<img src="http://A_URL_DE_SUA_IMAGEM"/>Substituindo, é claro, o texto em negrito pela URL da sua imagem.
5 - Visualize para ver se está tudo certo, salve o modelo e pronto! O seu widget agora tem imagem no lugar do título. Veja como ficou a a minha:
Bom, era isso, facil e com resultado satisfatório. Lembrando que os créditos desse tutorial são do site "semnome.net"
Nenhum comentário:
Postar um comentário