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

VER DEMO"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(http://1.bp.blogspot.com/-K7tY9_gz3js/UmnCR22ZJII/AAAAAAAAF68/U8N5jBtaLLM/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('http://3.bp.blogspot.com/-wlYmBEpUtGE/UoVyl3GpUZI/AAAAAAAAGEQ/LDeklWh3CNI/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;background:#ececec url('http://4.bp.blogspot.com/-G-9yhzSt2Mw/UoWcB4bdn4I/AAAAAAAAGE4/tzIixYewCsU/s1600/anon80.png') no-repeat 50% 50%;overflow:hidden;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;}
div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
content: url(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);}
.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 == &quot;&quot;) {this.placeholder = &quot;Buscar...&quot;;}' onfocus='if (this.value == &quot;Cari disini..&quot;) {this.value = &quot;&quot;}' 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='http://1.bp.blogspot.com/-wrJzEwB1V3U/UoQktvRDCxI/AAAAAAAAGEA/jYcRiXTyOFg/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='cerrar' src='http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/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.