Entradas populares en ventana emergente

Vamos a mostrar hoy un plugin de Wordpress.
Lo he visto en la página de Olobloger, ya que soy una fiel visitante de su página.
Este plugin llamado Nrelate Flyout, muestra na ventana emergente que aparece en la parte inferior de nuestro blog, mostrando las entradas relacionadas que el visitante está leyendo en ese momento.
Es muy fácil de insertar y lo vamos a explicar paso a paso.

Lo primero que tenemos que hacer es ir a Diseño y añadir un gadget de entradas populares. Debemos de definir el número de post a mostrar,periodo de tiempo, y seleccionamos las dos casillas de verificación que salen para miniatura y resumen de texto.

Una vez tengamos esto lo guardamos y nos vamos a editar nuestra plantilla.
Como siempre recomiendo, debemos de hacer una copia de seguridad de nuestra plantilla antes de editarla.
Para ello nos vamos a Plantilla, y en la parte superior nos aparece el botón de

Guardamos nuestra plantilla en el disco duro de nuestro ordenador.

Ahora nos vamos a editar nuestra plantilla

Lo primero que tenemos que ver si nuestra plantilla dispone de la librería de jQuery. Si no es así tenemos que  añadir esta línea tras la etiqueta de cierre </b:skin>.

Nota :si tenéis dos después de la segunda.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

Ahora justo después de la línea anterior podemos pegar este JavaScript que creará el efecto.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$(".PopularPosts").prepend("<a class='closeflyout' href='javascript:void(0);' onclick='return closeflyout();'>&#9746;</a>");
});
$(window).scroll(function(){
if($(document).scrollTop()>=$(document).height()/5) {
$(".PopularPosts").show("slow");
} else {$(".PopularPosts").hide("slow");}
});
function closeflyout(){$(".PopularPosts").remove();
;}
//]]>
</script>

Podemos cambiar el divisor (5) por otro mayor o menor, según se quiera que aparezca antes o después y el slow por un valor numérico o por fast para cambiar la velocidad de la transición.
Ahora pegamos a continuación del  script anterior el código que elijamos de como queramos que se vean:

Estilo 1 Estilo Linkwithin (4 posts)

<style>
/* Estilo 1 - Linkwithin - 4 entradas */
a.closeflyout {float: right;margin: 0;padding: 0;font-size: 14px;line-height: 14px;color:#333;}
a.closeflyout:hover {text-decoration: none; color: red;}
.PopularPosts {display:none;}
.PopularPosts {position: fixed;bottom:0;right:0;width: 400px;margin:0;padding: 10px;text-align: center;background: #eee;border:1px solid #999;border-radius: 10px 0 0 10px;z-index: 999;}
.PopularPosts h2 {display: inline;margin: 0 20px;text-align: center;}
.PopularPosts .widget-content ul {font-size: 0;}
.PopularPosts .widget-content ul li {display: inline-block;*display: inline; zoom: 1;width: 23%;margin: 3px;padding:0;vertical-align: top;}
.PopularPosts .item-thumbnail {float: none;margin: 0;padding: 3px;border: 1px solid #999;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.PopularPosts img {width: 100%;height: auto; }
.PopularPosts .item-title a {font-size: 12px;text-transform: uppercase;}
.PopularPosts .item-snippet {display: none;}
</style>

Estilo 2 Estilo Huffington (1 post)

<style>
/* Estilo 2 - Huffington - 1 entrada */
a.closeflyout {float: right;margin: 0;padding: 0;font-size: 14px;line-height: 14px;color:#333;}
a.closeflyout:hover {text-decoration: none; color: red;}
.PopularPosts {display:none;}
.PopularPosts {position: fixed;bottom:0;right:0;width: 400px;margin:0;padding: 10px;text-align: center;background: #eee;border:1px solid #999;border-radius: 10px 0 0 10px;z-index: 999;}
.PopularPosts h2 {display: inline;margin: 0 20px;text-align: center;}
.PopularPosts .widget-content ul {font-size: 0;}
.PopularPosts .widget-content ul li {margin: 3px; padding: 0;text-align: left;vertical-align: top;}
.PopularPosts .item-thumbnail {float: left; margin: 0 10px 0 0;padding: 3px; border: 1px solid #999;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.PopularPosts img {width: 100%;height: auto;}
.PopularPosts .item-title a {line-height: 22px;text-transform: uppercase;}
.PopularPosts .item-title a, .PopularPosts .item-snippet {font-size: 12px;} </style>

 

Estilo 3  Estilo Trendland (3 post)

<style>
/* Estilo 3 - Trendland - 3 entradas */
a.closeflyout {float: right;margin: 0;padding: 0;font-size: 14px;line-height: 14px;color:#333;}
a.closeflyout:hover {text-decoration: none; color: red;}
.PopularPosts {display:none;}
.PopularPosts {position: fixed;bottom:0;right:0;width: 400px;margin:0;padding: 10px;text-align: center;background: #eee;border:1px solid #999;border-radius: 10px 0 0 10px;z-index: 999;}
.PopularPosts h2 {display: inline;margin: 0 20px;text-align: center;}
.PopularPosts .widget-content ul {font-size: 0;}
.PopularPosts .widget-content ul li {position: relative;display: inline-block;*display: inline;zoom: 1;width: 30%;margin: 3px;padding: 0;vertical-align: top;}
.PopularPosts .item-thumbnail {float: none;margin: 0;padding: 3px;border: 1px solid #999;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.PopularPosts img {width: 100%;height: auto;}
.PopularPosts .item-title a {position: absolute;top: 66%;left: 0;width: 100%;height: 28px;overflow: hidden;line-height: 14px;font-size: 12px;color: #333;background: #eee;border-top: 1px dotted #999;border-bottom: 1px dotted #999;}
.PopularPosts .item-snippet {display: none;} </style>

 

Estilo 4 Estilo Huffington Posts (cualquier número)

style>
/* Estilo 4 - Huffington Posts - x entradas */
a.closeflyout {float: right;margin: 0;padding: 0;font-size: 14px;line-height: 14px;color:#333;}
a.closeflyout:hover {text-decoration: none; color: red;}
.PopularPosts {display:none;}
.PopularPosts {position: fixed;bottom:0;right:0;width: 400px;margin:0;padding: 10px;text-align: center;background: #eee;border:1px solid #999;border-radius: 10px 0 0 10px;z-index: 999;}
.PopularPosts h2 {display: inline;margin: 0 20px;text-align: center;}
.PopularPosts .widget-content ul {font-size: 0;}
.PopularPosts .widget-content ul li {padding: 4px 0;text-align: left;vertical-align: top;border-bottom: 1px solid #999;}
.PopularPosts .widget-content ul li:last-child {border-bottom: 0;}
.PopularPosts .item-thumbnail {float: left; margin: 0 10px 0 0; border: 1px solid #999;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.PopularPosts img {width: 100%;height: auto;}
.PopularPosts .item-title a {line-height: 22px;text-transform: uppercase;}
.PopularPosts .item-title a, .PopularPosts .item-snippet {font-size: 12px;}<style>

 

Estilo 5 Polaroid (3 posts)

<style>
/* Estilo 5 - Polaroid - 3 entradas */
a.closeflyout {float: right;margin: 0;padding: 0;font-size: 14px;line-height: 14px;color:#333;}
a.closeflyout:hover {text-decoration: none; color: red;}
.PopularPosts {display:none;}
.PopularPosts {position: fixed;bottom:0;right:0;width: 400px;margin:0;padding: 10px;text-align: center;background: #eee;border:1px solid #999;border-radius: 10px 0 0 10px;z-index: 999;}
.PopularPosts h2 {display: inline;margin: 0 20px;text-align: center;}
.PopularPosts .widget-content ul {font-size: 0;}
.PopularPosts .widget-content ul li {display: inline-block;*display: inline; zoom: 1;width: 25%;height: 150px;overflow:hidden;margin: 16px 5px 8px;padding: 3px;background: #fff;border: 1px solid #999;border-radius:4px;vertical-align: top;box-shadow: 1px 1px 4px #999;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.PopularPosts .widget-content ul li:nth-of-type(1) {-moz-transform: rotate(-3deg);-webkit-transform: rotate(-3deg);transform: rotate(-3deg);}
.PopularPosts .widget-content ul li:nth-of-type(2) {-moz-transform: rotate(2deg);-webkit-transform: rotate(2deg);transform: rotate(2deg);}
.PopularPosts .widget-content ul li:nth-of-type(3) {-moz-transform: rotate(4deg);-webkit-transform: rotate(4deg);transform: rotate(4deg);}
.PopularPosts .item-thumbnail {float: none;margin: 0;}
.PopularPosts img {width: 100%;height: auto; }
.PopularPosts .item-title a {font-size: 12px;text-transform: uppercase;}
.PopularPosts .item-snippet {display: none;} </style>

 

Estilo 6 texto (cualquier número)

<style>
/* Estilo 6 - Text - x entradas */
a.closeflyout {float: right;margin: 0;padding: 0;font-size: 14px;line-height: 14px;color:#333;}
a.closeflyout:hover {text-decoration: none; color: red;}
.PopularPosts {display:none;}
.PopularPosts {position: fixed;bottom:0;right:0;margin:0;padding: 10px;text-align: left;background: #eee;border:1px solid #999;border-radius: 10px 0 0 10px;z-index: 999;}
.PopularPosts h2 {margin: 0 20px 8px 0;text-transform: uppercase;}
.PopularPosts .widget-content ul {list-style: circle;}
.PopularPosts .widget-content ul li {padding:0;}
.PopularPosts .item-thumbnail, .PopularPosts .item-snippet {display:none;}
.PopularPosts .item-title a {font-size: 12px;line-height: 14px;}</style>

 

Imprimir entrada