Floating NextPrev navegando no seu post



Os créditos vão para o código blog e ferramentas blog



Siga o tutorial:

1) Faça login no Blogger, entre em “Modelo” – > “Editar HTML”. Depois marque a caixa “Expandir modelos de widgets”;

2) Procure (Ctrl + f) por ]]></b:skin> e cole o seguinte código logo ABAIXO da tag encontrada:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var alts = jQuery.noConflict();
alts(document).ready(function(){
var newerLink = alts(&quot;a.blog-pager-newer-link2&quot;).attr(&quot;href&quot;);
alts(&quot;a.blog-pager-newer-link2&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = alts(&quot;a.blog-pager-newer-link2&quot;).text();
alts(&quot;a.blog-pager-newer-link2&quot;).text(newerLinkTitle);
});
var olderLink = alts(&quot;a.blog-pager-older-link2&quot;).attr(&quot;href&quot;);
alts(&quot;a.blog-pager-older-link2&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = alts(&quot;a.blog-pager-older-link2&quot;).text();
alts(&quot;a.blog-pager-older-link2&quot;).text(olderLinkTitle);//rgt
});
});

var fnp = jQuery.noConflict();
fnp(document).ready(function(){

    fnp(&quot;.fnp-previous&quot;).mouseenter(function(){
        fnp(&quot;.fnp-content-left&quot;).stop().animate({
            left:-10
        },700);
        fnp(&quot;.fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link&quot;).stop().delay(500).animate({
            opacity:1
        },500);
    });
    fnp(&quot;.fnp-previous&quot;).mouseleave(function(){
        fnp(&quot;.fnp-content-left&quot;).stop().animate({
            left:-400
        },700);
        fnp(&quot;.fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link&quot;).stop().animate({
            opacity:0},500)
    });fnp(&quot;.fnp-next&quot;).mouseenter(function(){
        fnp(&quot;.fnp-content-right&quot;).stop().animate({
            right:-10
        },700);
        fnp(&quot;.fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link&quot;).stop().delay(500).animate({
            opacity:1
        },500);
    });fnp(&quot;.fnp-next&quot;).mouseleave(function(){
        fnp(&quot;.fnp-content-right&quot;).stop().animate({
            right:-400
        },700);
        fnp(&quot;.fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link&quot;).stop().animate({
            opacity:0
        },500);
    });
});
</script>
</b:if>

3) Procure (Ctrl + f) por <b:includable id=’nextprev’>, selecione todo o código a partir dessa tag até a primeira tag </b:includable>.
Ou seja, selecione isso:

<b:includable id='nextprev'>
...
</b:includable>

Obs.: Existem várias tags </b:includable>, é importante você selecionar até a primeira que você ver.

4) Substitua o código selecionado por:

<b:includable id='nextprev'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fnp-nav'>
<div class='blog-pager2' id='blog-pager2'>

<b:if cond='data:newerPageUrl'>
<div class='fnp-previous'><a rel='prev'><div class='fnp-box-left'><div class='fnp-content-left'><div class='fnp-content-border'/><div class='fnp-nav-title'>Anterior</div><div class='fnp-nav-link'><a class='blog-pager-newer-link2' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' style='display: block;'/></div></div></div></a></div>
</b:if>

<b:if cond='data:olderPageUrl'>
<div class='fnp-next'><a rel='next'><div class='fnp-box-right'><div class='fnp-content-right'><div class='fnp-content-border'/><div class='fnp-nav-title'>Próximo</div><div class='fnp-nav-link'><a class='blog-pager-older-link2' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'/></div></div></div></a></div>
</b:if>

</div>
<div class='clear'/>
</div>
</b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
<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'>Página Anterior</a>
</span>
</b:if>
<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'>Próxima Página</a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:if>
</b:includable>

Obs.: A segunda parte do código acima, depois de “<b:if cond=’data:blog.pageType != &quot;item&quot;’>” é o código de navegação de páginas do blog, essa parte pode ser editada como quiser, só não retire a condicional (if).

5) Agora devemos aplicar o estilo CSS. Escolha um dos modelos abaixo, abra o link e copie o código correspondente.




6) Agora procure por ]]></b:skin> e cole o código antes dessa tag encontrada.


#fnp-nav {font-size:13px;color:#000;font-family:Helvetica, Arial, Verdana, Sans-serif;text-align:left;}
.fnp-previous {position:fixed;top:50%;left:10px;height:37px;width:20px;z-index:9999;}
.fnp-next {position:fixed;top:50%;right:10px;height:37px;width:20px;z-index:9999;}
.fnp-previous a, .fnp-next a {transition:all 0.4s ease;-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;-moz-transition:all 0.4s ease;opacity:0.6;}
.fnp-previous a:hover, .fnp-next a:hover {opacity:1;text-decoration:none;}
.fnp-box-left {position:relative;width:20px;height:37px;background:url(http://3.bp.blogspot.com/-lUC8p7asn0o/TuyJMbi83cI/AAAAAAAADlc/wrruXaK-IWU/s1600/arrow-left.png) no-repeat;}
.fnp-content-left {overflow:hidden;width:200px;height:101px;padding:5px 10px 0 60px;border-width:1px 4px 1px 1px;border-style:solid;border-color:#666;color:#000;background:#fff;display:block;position:absolute;top:-36px;left:-235px;z-index:-1;}
.fnp-box-right {position:relative;width:20px;height:37px;background:url(http://4.bp.blogspot.com/-CFxPmApgp-Y/TuyJMpORrmI/AAAAAAAADlk/8ZPmN694QCA/s1600/arrow-right.png) no-repeat;}
.fnp-content-right {overflow:hidden;width:200px;height:101px;padding:5px 60px 0 10px;border-width:1px 1px 1px 4px;border-style:solid;border-color:#666;color:#000;background:#fff;display:block;position:absolute;top:-36px;right:-235px;z-index:-1;}
.fnp-nav-title {opacity:0;font-weight:bold;margin:5px 0;color:#666;}
.fnp-nav-link {opacity:0}
.fb-content-left .fb-content-border,.fb-content-right .fb-content-border {display:none;}
@media screen and (max-width: 900px) {
    .fnp-previous {display:none;}
    .fnp-next {display:none;}
}


7) Teste, se não deu nenhum erro e a página visualizada não sofreu alteração, salve. Os botões de navegação só serão vistos quando alguma postagem for aberta.


1 Comentário

Henrique Araújo disse...

Um dos poucos tutoriais sobre o assunto que ainda funcionam, valeu.

Postar um comentário

Seguidores

 
Copyright (c) 2008-2010 FerramentasBlog.com | Tecnologia do Blogger | Sobre LemosIdeias.com | Não são autorizadas obras derivadas.