Como colocar imagens nos links de Navegação na nova interface do Blogger.

F

Como vão nesta segunda meus Cupcakes?

Bom, Hoje o post é muito importante,

porque eu tenho certeza que várias pessoas não conseguiram mudar

os Links de navegação nessa nova Interface, Eu também não,

A pouco tempo atrás (Tipo,Meia Hora).

O nosso problema é que não  há o Ícone 'Expandir modelo dos widget',

Pelo menos,não na nossa cara.

E ai, quer saber como? Então vamos ao tutorial:

Ah, E créditos ao: Cherry Boomb.

Os seus links de navegação devem estar assim:

<*Passe o mouse sobre aquela pequena imagem para ver<

E, ficarão igual ao do Misturama, Só que com imagens diferentes.

Bom,vamos lá:

Vá em Modelo,E em Editar HTML.

Clique em Go to hum Widget, Ou Então Ir para um Widget.

Agora clique em Blog1.

Agora Sim,Vamos ao TUTO!

Aperte Ctrl+F com o mouse dentro do código de seu html 

e espere uma caixa de pesquisa aparecer.

Assim:

Clique na Imagem para ver melhor.

Vamos personalizar o Ínicio.

Nesta caixa de pesquisa cole: <data:homeMsg/> 

Irá achar um codigo parecido com esse:

<div class='mobile-link-button' id='blog-pager-home-link'>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    </div>

Apague o que tá sublinhado e cole:

<img src="url_da_imagem"/>

Ficará agora assim:

<div class='mobile-link-button' id='blog-pager-home-link'>

    <a class='home-link' expr:href='data:blog.homepageUrl'><img src="url_da_imagem"/></a>

    </div>

Em url da Imagem, coloque a Url entre as aspas, Tipo assim:

<div class='mobile-link-button' id='blog-pager-home-link'>

    <a class='home-link' expr:href='data:blog.homepageUrl'><img src="http://linkdeexemplo.com/147745.jpg"/></a>

    </div>

Prontinho,Agora salve,e visualize.

Personalizando agora o 'Postagens mais antigas'

Depois de ver, vamos clicar de novo em Ctrl+F, do mesmo modo e procure por:

<data:olderPageTitle/>

Você encontrará algo mais ou menos assim:

  <b:if cond='data:olderPageUrl'>

      <span id='blog-pager-older-link'>

      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

      </span>

O que ta tachado e sublinhado delete e ponha no lugar isto novamente:

<img src="url_da_imagem"/>

Salve e visualize

E agora, vamos aos postagens mais recentes:

Aperte Ctrl+F de novo, e pesquise por <data:newerPageTitle/>

vai aparecer algo assim:

<b:if cond='data:newerPageUrl'>

      <span id='blog-pager-newer-link'>

      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

      </span>

O que tá tachado e sublinhado(Que foi o que você pesquisou) Exclua ele e ponha no lugar de novo:

<img src="url_da_imagem"/>

E então ficará assim:

<b:if cond='data:newerPageUrl'>

      <span id='blog-pager-newer-link'>

      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src="url_da_imagem"/></a>

      </span>

Salve,Visualize!

Entendeu,gostou?

Simples né?

Beijinhos gente!

Bônus:

Criei para vocês,Se usarem creditem o Misturama!

 <Pro postagens mais Recentes

<Pro Home

<Pro postagens Mais Antigas.

< Pro postagens mais recentes

<Pro home

 < Pro Postagens mais antigas

Beijinho...