√ Últimos comentarios al estilo Notificaciones de Google+

Con este tutorial voy a enseñaros la forma de mostrar los últimos comentarios del blog de una forma semejante a las notificaciones de Google+. Antes de empezar vamos a ver una captura de pantalla de como funciona este truco y luego la demostración en vivo, que la he adaptado a este blog con algunas variaciones.

VER DEMO

Este tutorial consiste en colocar una barra de navegación fija donde incluiremos una imagen o logo de nuestro blog, una imagen del perfil de Google, un buscador y lo más importante del tutorial, las notificaciones de los últimos comentarios tipo Google+. (nos notifica de los comentarios que nos dejan en el blog).

"Antes de empezar es muy importante siempre crear una copia de nuestra plantilla", para esto, antes de intentar los cambios seguimos estos pasos:
Panel de Administración/ Plantilla/ Crear/Restablecer copia de seguridad/ Y hacemos clic en “descargar plantilla completa”.

Instalación:

Paso 1: Copie el siguiente código y colóquelo antes del </head>
"Si ya dispones en tu plantilla del script jquery, pásate este paso"

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

Paso 2: En este paso vamos a colocar el CSS del tutorial y para ello vamos a buscar ]]></b:skin> y antes de ello colocarémos el siguiente código:

/* Barra menu comentarios
----------------------------------------------- */
#top-menuwrapper{background: white;height:60px;width:100%;position:fixed;top:0;left:0;z-index:999;overflow:hidden;border-bottom:1px solid #f1f2f7}
#top-menuwrap, #top-menuwrap2{width:100%;margin:0 auto;padding-left:1%;padding-right:1%}
#top-menu{width:100%}
#top-menu ul{list-style: none;}
#top-menu ul li{float:right}
#top-menu ul li a{line-height:20px;padding:5px 0;margin-left:25px;color:#999;font-size:14px;text-transform:uppercase;display:block;text-decoration:none;}
.logo{float:left;}
#top-menu ul li a.current{color:#c94e5c}
.logo img{margin-top:13px;width:250px;height:40px}
#autor img {float:right;height:30px;margin:15px 90px 8px 6px;width:30px;}
#search-box{position:relative;width:250px;margin:15px 0;float:right;margin-right:35px}
#cse-search-box{height:28px;border-radius:2px;background-color:#fff;overflow:hidden;border:1px solid #dfdfdf;border-radius:4px}
#search-text{font-size:12px;color:#ddd;border-width:0;background:transparent}
#search-box input[type="text"]{width:90%;padding:5px 20px 12px 10px;color:#666;outline:none}
#search-button{position:absolute;top:-2px;right:4px;height:32px;width:20px;margin-top:10px;font-size:14px;color:#fff;text-align:center;line-height:0;border-width:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivW6JUnMiLKZBgyUmyCEVr28W6ghYYd_Gx5-1QaYNTH1mGt-P0Hba-sbtethj2bACmtgMfMj7G1JkziCnJeLrWvShx11yDtwl8Gfg_v-sE2OymgTgjqxptHpb52beiaRZEJGiNY8GG8hY/s1600/search-icon.jpg) no-repeat;cursor:pointer}

/* Notificaciones en comentarios
----------------------------------------------- */
#cm-total {position:fixed;top:14px;right:0;width:188px;text-align:left;z-index:9999;cursor:pointer;}
.total-counter {position:fixed; background-color:#d11919;color:white;padding:1px 4px;font-family:Arial,Sans-serif;font-size:11px; border-radius:5px;
font-weight:bold;right:290px;top:10px;}
#notif {position:fixed;top:20px;right:310px;z-index:9999;height:22px;width:19px;opacity:.4;cursor:pointer;border:1px solid #b6b5b5;}
#notif:hover { opacity:1;}
.close-notif { position:fixed;top:92px;right:20px;z-index:9999;cursor:pointer;display:none;}
#cm-container { width:355px; position:fixed;top:67px;right:0; z-index:9999; background-color:#e5e5e5;padding:60px 20px 10px 20px;color:#666;
box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important;text-align:left; border:1px solid rgba(0,0,0,.2);background-clip:padding-box;display:none;}
#cm-container:before {content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRV9_U5HuRpoKBHlutvQ5l3d_K2VKQxlUx_Oc2eCeRnToKwZ1S2iu2qOB705tI98eijZhLcoQZ-JFpYJct3EX0HAzY02FiVPG7GYl2MnUfcbQYOXj6goiFjVXzKNRJbzgYLBMkfKBpGR0/s1600/arrow-notif.png');position:absolute;
top:-14px;left:66px;}
#cm-container:after {content:"Últimos Comentarios";position:absolute;top:22px;left:150px;text-align:center;font:normal 14px Arial;color:#333;}
.cm-outer {margin:0 auto;padding:0;font-size:11px;text-align:left;font:normal 12px Arial;}
.cm-outer ul{margin-bottom:5px;}
.cm-outer li {padding:9px 10px 14px;list-style:none;clear:both;position:relative;border-radius: 3px;box-shadow: 0 1px 2px rgba(0,0,0,.2);background-color: white;margin-bottom:10px;}
.cm-text {color:#797979;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 90px;font-size:11px;font-weight:normal !important;}
.cm-header a {color:#262626;text-decoration:none;font-size:14px;font-weight:bold}
.cm-header a:hover {color:#74a2c3;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:90px}
.cm-outer img {display:block;float:left;border-radius:3px 0 0 3px;position:absolute;top:0;left:0;}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#5886a7;text-decoration:none;}
.cm-footer a:hover {color:#74a2c3;text-decoration:none;}
.cm-outer{height:570px;overflow:auto;}

Paso 3: Ahora antes del cierre </body> colocamos el siguiente código:

<div id='top-menuwrapper'>
<div id='top-menuwrap'>
<div id='top-menu'>
<div class='logo'>
<a href='URL de tu blog'><img alt='logo blog' src='URL del Logo de tu blog'/></a></div>
<div id='search-box'>
<form action='URL de tu blog/search' id='cse-search-box'>
<input id='search-text' name='q' onblur='if (this.placeholder == "") {this.placeholder = "Buscar...";}' onfocus='if (this.value == "Cari disini..") {this.value = ""}' placeholder='Buscar...' type='text'/>
<button id='search-button' type='submit'/>
</form></div></div>
<div id='autor'>
<a href='URL de perfíl o página de Google+' target='blank'><img alt='autor' border='0' src='URL de la imágen de tu perfil'/></a>
</div></div></div>

<div id='cm-container'/>
<div id='notif' title='Notificaciones'><img alt='notificaciones' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWxgfp1D0OAJWwyKGtbZZoFj0GETK2vxsiTu7T1180sIYdbQaefIXON3uWb-vSQdg7KCMMC3lbuVVTbChOK93zxWSXiamfYcnME0a74hKQIv1lh5EkWbsMrr6l2e8q8juUTfsfg8RJndE/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='cerrar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjahtauoGFhl3u_Jkk74_hd75xmAGc8yCvQZN3DccQyIWo2JqlCxcvYQEjYOQKe1DmZJItTYqRjX6H1PQvHw2GDO2T4klny_eG-wJQeSHjqlJXhZd8N5Cgfdjh3EWPvWXenVtJntaKaMU/s1600/delete4.png' title='cerrar'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
home_page: "URL de tu blog",
max_result: 15,
t_w: 80,
t_h: 80,
summary: 30,
new_tab_link:true,
ct_id: "cm-container",
new_cm: "Últimos Comentarios!",
interval: 30000,
alert: true,
alert: function(total) {
document.getElementById("cm-total").innerHTML = '<strong class=\'total-counter\'>'+total+'</strong>';
document.title = '(' + total + ') ' + originalTitle;
}
};
$('#notif').click(function(){$('#cm-container, .close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container, .close-notif').hide();});document.getElementById('notif').onclick = function(){document.title = originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick = function(){document.title = originalTitle;$('#cm-total').hide();$('#cm-container').show();};
//]]></script><script src='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/googlenot.js' type='text/javascript'/>

Configuración:
Cambiar todas las URL por las vuestras
max_result: 15, Comentarios a mostrar.

Guardar plantilla.