Tutoriales sobre Blogger

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 == "item"'>
<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("a.blog-pager-newer-link2").attr("href");
alts("a.blog-pager-newer-link2").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = alts("a.blog-pager-newer-link2").text();
alts("a.blog-pager-newer-link2").text(newerLinkTitle);
});
var olderLink = alts("a.blog-pager-older-link2").attr("href");
alts("a.blog-pager-older-link2").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = alts("a.blog-pager-older-link2").text();
alts("a.blog-pager-older-link2").text(olderLinkTitle);//rgt
});
});
var fnp = jQuery.noConflict();
fnp(document).ready(function(){
fnp(".fnp-previous").mouseenter(function(){
fnp(".fnp-content-left").stop().animate({
left:-10
},700);
fnp(".fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link").stop().delay(500).animate({
opacity:1
},500);
});
fnp(".fnp-previous").mouseleave(function(){
fnp(".fnp-content-left").stop().animate({
left:-400
},700);
fnp(".fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link").stop().animate({
opacity:0},500)
});fnp(".fnp-next").mouseenter(function(){
fnp(".fnp-content-right").stop().animate({
right:-10
},700);
fnp(".fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link").stop().delay(500).animate({
opacity:1
},500);
});fnp(".fnp-next").mouseleave(function(){
fnp(".fnp-content-right").stop().animate({
right:-400
},700);
fnp(".fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link").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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPaSmXyyLnLqbJeUcfG6fM-j95PeT3k1uEOfvFIKGpl_CHjAjrM7T_5UvpVwzYmUoadm43N-nK1OtNme7kREEh1oBaY0reS0LVzZi0JN1Y0nYjlHIpPn4klcdYk5u-umyTl1O_qSFHWAp_/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaA5VGxcEGK95Cuey35SZKbuRVVMFmlDf0muv0RJ5RjsHbbHoLkuc9KhOwB9y40QyPgiFnqNzStEcVIoYeYFeutMk8zV3N6hmXH1tm2FO_f2FOAAz0q8dic-ULYuSmh68i9BcnO_bIKjIQ/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 == "item"'>
<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'/></div></div></div></a></div>
</b:if>
</div>
<div class='clear'/>
</div>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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

Comentarios (8)

@dmin14 de mayo de 2013, 18:09
No me funciona, será porque ya tengo otro código jquery?
ResponderEliminar
Respuestas
ADMINISTRADOR20 de julio de 2013, 16:28
no me funciono ;((
ResponderEliminar
Respuestas
Fernando Salas20 de julio de 2013, 18:13
@JeFeRsOn BaRReRaCuenta que error tienes?
ResponderEliminar
Respuestas
Unknown14 de octubre de 2013, 16:54
Este comentario ha sido eliminado por el autor.
ResponderEliminar
Respuestas
Padrino2429 de octubre de 2013, 8:38
no me funciono :c
ResponderEliminar
Respuestas
Rock Crossing3 de enero de 2014, 19:26
No funciona :(
ResponderEliminar
Respuestas
Unknown7 de febrero de 2014, 17:37
mal
ResponderEliminar
Respuestas
Anónimo13 de junio de 2014, 1:43
FUCK
THIS SHIT NOT WORK
BULLSHIT
ResponderEliminar
Respuestas

Emoticon Cargar Imagenn Reglas Editar Comentarios

:))

:((

:-)

;)

=))

=.=

^_^

/=he

/=r

/=l

/=ok

/=clap

(y)

(yy)

/=hi

/=j

/=hup

/=hd

/=hl

/=hr

/=s

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

Flechas de Navegación en las entradas de Blogger

Comencemos:

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

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

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

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

Comentarios (8)

Instrucciones Para omentar

Incertar Enlace

Cargar Imagen

Formato Word

Insertar un Fragmento de codigo

Tutoriales Blogger

Donaciones

Contacto

Sobre mi

C?p nh?t m?i trên Star Cu?ng IT

Flechas de Navegación en las entradas de Blogger

Comencemos:

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

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

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

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

ENTRADAS RELACIONADAS

Comentarios (8)

Instrucciones Para omentar

Incertar Enlace

Cargar Imagen

Formato Word

Insertar un Fragmento de codigo

Tutoriales Blogger

Donaciones

Contacto

Sobre mi