Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
Muchos blogger tiene la barra de navegación al final de cada entrada por lo que los usuarios deben de desplazarse hacia bajo para pasar a la siguiente entrada. En este tutorial veremos como agregar flechas de navegación  en las entradas de blogger para que los usuarios no deban desplazarse
asta el final de cada entrada, esta flechas de navegación tienen la capacidad de mostrarte el titulo de la siguiente entrada que continuara

La demostración la encontraras en este blog:

Comencemos: 

1ro. Agregaremos el código el Plugin para que este articulo funcione; para eso hacemos...

  • Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML>>Expandir Plantilla de Artilugios.
  • Paso 2: Buscamos la siguiente linea (Ctrol + F)
]]></b:skin>
  • Paso 3: Justo por debajo de ]]></b:skin> pegamos el siguiente codigo
<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>

2do. Agregaremos el codigo CSS para darle estilo a las flechas.

  • Paso 4: Todavia en la plantilla volvemos a buscar la siguiente linea 
]]></b:skin>

  • Paso 5: Justo por encima de ]]></b:skin> pegamos el código CSS.
#fnp-nav {font-size:13px;color:#000;font-family:Helvetica, Arial, Verdana, Sans-serif;text-align:left;}
.fnp-previous {position:fixed;top:50%;left:30px;height:37px;width:20px;z-index:9999;}
.fnp-next {position:fixed;top:50%;right:30px;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:100px;padding:5px 10px 0 40px;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;color:#000;background:#fff;display:block;position:absolute;top:-36px;left:-400px;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:100px;padding:5px 40px 0 10px;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;color:#000;background:#fff;display:block;position:absolute;top:-36px;right:-400px;z-index:-1;}
.fnp-nav-title {opacity:0;font-weight:bold;color:#004D97;margin: 5px 0;}
.fnp-nav-link {opacity:0}
.fnp-content-left .fnp-content-border {height:4px;width:251px;background:#004D97;position:absolute;top:0;left:0;}
.fnp-content-right .fnp-content-border {height:4px;width:251px;background:#004D97;position:absolute;top:0;right:0;}
@media screen and (max-width: 900px) {
    .fnp-previous {display:none;}
    .fnp-next {display:none;}
}

3ro. Agregaremos el código HTML para concluir con el tutorial. 

  • Paso 6: Dentro de la plantilla buscamos la siguiente linea con su cierre 
<b:includable id='nextprev'>
con su cierre
</b:includable>

  • Paso 7: Borramos todo lo que halla entre <b:includable id='nextprev'> y </b:includable>


<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>

  • Paso 8: Guardamos los cambios realizados en la plantilla

Listo ya tendríamos nuestras flechas de Navegación en nuestras estradas en blogger

- - 8 Comentarios
Tag

Comentarios (8)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar