Este navegador aparecera cuando bajas la página sale con el nombre de las entradas recomendadas de tu blog.
Ejemplo de esto lo puedes ver en esta pagina al final de la misma veras el cuatrito en negro transparente con titulos de entradas.
Las conecciones de navegacion dicen asi "Old Post", "Post" y "Home" sirven de coneccion a los visitantes a que vean mas entradas del tu blog.Este pequeno proyecto conlleva unos simples pasos:
Cambiaremos los titulos de "Entradas antiguas" y "Entradas recientes" por los títulos de las entradas o posts.
Como hacer un cuadro que se "Muestra" al bajar la página.donde te sugiere mas articulos a leer,esto ayudara a que tengas mas vistas de tus articulos ademas de mas visitantes activos en tu blog.
Los Coneccion de navegación lo puedes chequear en entradas individuales o post individuales, ya que en la pagina principal seguira sin aparecer.
Te Preguntaras como instalarlo?.
Lo Primero es entrar en tu blog y buscar donde dice: Plantilla | Edición de HTML, marca la casilla Expandir plantillas y busca esta codigo:
<b:include name='nextprev'/>
Una vez lo encuentres en tu plantilla html reemplazalo con el siguiente codigo:
<b:if cond='data:blog.pageType != "item"'>
<b:include name='nextprev'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='blog-pager-note'>
<h4>También hemos publicado:</h4>
<b:include name='nextprev'/>
</div>
</b:if>
Luego buscar este codigo en tu plantilla html </head> y pegas el codigo de abajo antes de </head>
<b:if cond='data:blog.pageType == "item"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
// <![CDATA[
$(function() {
$('#blog-pager-note').toggle()
.css({
width: '520px',
height: '150px',
position: 'fixed',
padding: '1em',
bottom: 0,
right: 0,
background: 'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaLuLlR5f_W_ErPdfQH28jNETPtW0VTl9lpjbROpp-64EeB1BspZ_jN9C7eE5ox2FRALls3KbtBP80-IwCBC1dQMQydWk4_rx0xjr6YiK-jdlqNrJkatZHTYThb9DA-QVCrUWvWs12-PA/s10/negro85.png)'
});
$(window).scroll(function() {
if($(this).scrollTop() > 150) {
$('#blog-pager-note').fadeIn();
} else {
$('#blog-pager-note').fadeOut();
}
});
});
$(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:first").text();
$(".blog-pager-newer-link").html("<div>Entrada anterior:</div>" + newerLinkTitle);
});
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();
$(".blog-pager-older-link").html("<div>Entrada siguiente:</div>" + olderLinkTitle);
});
});
// ]]>
</script>
<style type='text/css'>
<!--
#blog-pager-newer-link {float:left;clear:both;line-height:30px;}
#blog-pager-older-link {float:left;clear:both;line-height:30px;}
.home-link {display:none;}
.blog-pager-older-link, .blog-pager-newer-link {
background-color: transparent !important;
background-image: none !important;
border:0 !important;
color:#0577AB !important; /* Color de los títulos de las entradas */
float: left;
width: 500px;
clear:both;
}
a.blog-pager-older-link:hover, a.blog-pager-newer-link:hover {
text-decoration:none !important;
}
a.blog-pager-newer-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLaCrD8n7BnVYsb3E7u-0eeaBhR9Ous7wdCk-ziVLok1Z7YtX4eD9QCVu6ApYNszGWs-kKywKeNtdTTuz00SLF6Wwf7a3b8O4QbBG7avt98cCy6up3Fmgx1F_8YGmtzkQS31DhS4xUluo/s32/flecha2.png);
float:left;
}
a.blog-pager-older-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrRk1mwvqNsQ1XKAmSXkEARRAqHXuuo6g-XOTr0SgLYLy4TG99MC3E-72lY8dh5sSCjijaJ9h4kdYcCTSItoUpMt4igHP_eAVoxI33on7eLOTOD35-qqR8B2v9_ieC4vStSCYwdfzVegs/s32/flecha1.png);
float:left;
}
#blog-pager {
width:500px;
background-color: transparent !important;
background-image: none !important;
border:0 !important;
text-align:left;
}
#blog-pager div {
color:#fff; /* Color de los textos "Entrada anterior" y "Entrada siguiente" */
font-weight:bold;
margin-bottom: -5px;
}
a#blog-pager div:hover {
text-decoration:none !important;
color:#fff; /* Color de los textos "Entrada anterior" y "Entrada siguiente" */
}
#blog-pager-note {
z-index:9;
}
#blog-pager-note h4 {
margin:0;
padding:0;
color:#4898B9; /* Color del título del recuadro */
font-size:16px; /* Tamaño del título del recuadro */
}
-->
</style>
</b:if>
En este codigo encontraras unas URLs en color azul, la primera es la imagen de fondo semitransparente del cuadro, las otras dos son los íconos o dibujos de las flechas de direccion sea adelante o para atras.
En color verde puedes ver dónde cambiar los colores de los textos.
El número en color rojo representa la distancia en pixelescuando se activa el gadget, esto quiere decir que el cuadro aparecerá cuando se haya bajado el scroll 150px.
Usa un valor más alto si tus entradas son largas y por lo tanto la "altura" del scroll sea mayor ajustalo a tu conveniencia y con discrecion para que se vea bien.
Nota Importante: Este gadget usa jQuery, usa solo una version de este, y si usas Scriptaculous deberás aplicar un hack, de lo contrario podría no funcionar.
Te facilita ademas cambiar el titulo donde dice "Entrada anterior" y "Entrada siguiente" por alguna otra palabra que se acomode mejor a tu blog.o en idioma ingles como Old Post y Next post.
0 comentarios:
Publicar un comentario