Insira tags de navegação com um Super efeito no Blogger

Hoje, tentarei explicar como colocar navegação blogspot com o nome do artigo. Na verdade, esta forma não é difícil só precisa prestar atenção para onde a tag de fechamento no post, bem como conhecer a estrutura da navegação no blogspot. Em geral, é a ferramenta de navegação Blog1 e includable na tag com id = 'NextPrev' de uma maneira que é chamado com <b:include name='nextprev'/> . Mas se estamos indo para se mover sob a forma de mensagens / artigos que ignoramos. Uma vez que vamos inserir um estilo para torná-lo mais interessante. 

1

A primeira etapa que você precisa fazer é envolver a navegação existente com tags condicionais do que posts e páginas de itens. Isso deve ser feito para que a navegação não aparecer na mensagem duas vezes. O truque está procurando <b:include name='nextprev'/> dentro do modelo e substituir por:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:include name='nextprev'/>
</b:if></b:if>Copy

22

A segunda etapa é colocar o código de navegação após o fechamento artigo / post. A tampa é um pouco difícil de encontrar. Normalmente existem pré-código comentários. Tente pesquisar var='post'> id='comment_picker' <b:includable nele existe </ b: includable> navegação novo código e será colocada previamente. porque se fora </ b: includable> vontade de erro. Código da seguinte forma:

<div class='blog-pager' id='blog-pager'>
 <div class='pager-isi'>
    <b:if cond='data:newerPageUrl'>
          <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>
<b:else/>
<span class='linkgrey left'><h6>Next</h6><h5>Ini merupakan artike terbaru .</h5></span>
         </b:if>

    <b:if cond='data:olderPageUrl'>
       <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>
<b:else/>
<span class='linkgrey right'><h6>Previous</h6><h5>Ini merupakan artikel terakhir.</h5></span>
       </b:if>  
 </div>
  </div>Copy

No código que eu adicionei um pouco de código para ser sobre os artigos mais recentes e condições terkhir são disse a mostrar que é um novo artigo ou no final. Bem, o roteiro poderia ter sido até lá, mas a escrita que aparece pós apenas mais velhos ou mais novos Post. Mas se você quiser exibir o título do artigo deve dar o próximo passo.

3

Esta terceira fase é a adição de javascript / jQuery para alterar posts mais antigos correios / mais recente post com o título postagem. Código da seguinte forma:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    var newerLink = $('a.blog-pager-newer-link').attr('href');
 $('a.blog-pager-newer-link').load(newerLink + ' .post-title:first', function () {
        var newerLinkTitle = $('a.blog-pager-newer-link').text();
  $('a.blog-pager-newer-link').html('<h6>Next</h6><h5>' + newerLinkTitle + '<h5>');
    });
    var olderLink = $('a.blog-pager-older-link').attr('href');
 $('a.blog-pager-older-link').load(olderLink + ' .post-title:first', function () {
        var olderLinkTitle = $('a.blog-pager-older-link').text();
  $('a.blog-pager-older-link').html('<h6>Previous</h6><h5>' + olderLinkTitle + '</h5>');
    });
});
//]]>
</script>Copy

NB: O código acima deve ser envolvido com uma tag kondional apenas em itens porque a navegação é esperado para aparecer somente no artigo sobre os itens e não na página, homepage, de etiqueta, de arquivo, e páginas de erro. Assim, o código completo, como mostrado abaixo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
 <div class='pager-isi'>
    <b:if cond='data:newerPageUrl'>
          <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>
<b:else/>
<span class='linkgrey left'><h6>Next</h6><h5>This is the most recent template.</h5></span>
         </b:if>

    <b:if cond='data:olderPageUrl'>
       <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>
<b:else/>
<span class='linkgrey right'><h6>Previous</h6><h5>This is the last template.</h5></span>
       </b:if>  
 </div>
  </div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    var newerLink = $('a.blog-pager-newer-link').attr('href');
 $('a.blog-pager-newer-link').load(newerLink + ' .post-title:first', function () {
        var newerLinkTitle = $('a.blog-pager-newer-link').text();
  $('a.blog-pager-newer-link').html('<h6>Next</h6><h5>' + newerLinkTitle + '<h5>');
    });
    var olderLink = $('a.blog-pager-older-link').attr('href');
 $('a.blog-pager-older-link').load(olderLink + ' .post-title:first', function () {
        var olderLinkTitle = $('a.blog-pager-older-link').text();
  $('a.blog-pager-older-link').html('<h6>Previous</h6><h5>' + olderLinkTitle + '</h5>');
    });
});
//]]>
</script>
</b:if>Copy

4
4

Esta etapa é a última etapa que embelezar a CSS para torná-lo mais interessante. Seu código CSS eu tirei de modelo JPstation que eu criei. Assim, o resultado será o mesmo que o link de demonstração demonstração abaixo:

Veja a demo

CSS código a partir de modelos de navegação acima são:

.pager-isi{background:white;overflow:hidden;border:1px solid #DDD}
.pager-isi a,.pager-isi .linkgrey{width:50%;display:block;float:left;padding:10px 0;font-size:120%}
.pager-isi a:hover,.pager-isi .linkgrey{background-color:#F7F7F7;text-decoration:none}
.pager-isi h6{color:#575757;font-size:105%;font-weight:bold}
a.blog-pager-newer-link{background-image:url(http://4.bp.blogspot.com/-r8YeL5MClP8/UIT2mjkPR6I/AAAAAAAAGGM/QM_4AcjZNfY/s1600/small-left.png);background-repeat:no-repeat;background-position:2% center;padding-left:3.5%;text-align:left}
a.blog-pager-older-link{background-image:url(http://1.bp.blogspot.com/-SovF-2Yqzx8/UIT2nmYLCuI/AAAAAAAAGGU/FjDXOtx5erk/s1600/small-right.png);background-repeat:no-repeat;background-position:98% center;padding-right:3.5%;text-align:right}
.pager-isi .linkgrey.left{padding-left:3.5%;text-align:left}
.pager-isi .linkgrey.right{padding-right:3.5%;text-align:right}Copy

Alguns modelo de blogs que utilizam desse código:

ExtraNews JPStation darkred

Fonte: Mkr-site.blogspot.com.br

Share This :