Comentarios CSS Notificaciones Google modificado para Blogger.

En este tutorial veremos como agregar las Notificaciones Google adaptadas para blogger. Google tiene una caja de notificaciones diría yo, la caja de notificación de Google consiste en notificarte cuando alguien a compartido tu entrada (Ha echo +1 en una publicación) cuando alguien te sigue en tu Red Social de Googl
e+ (Te ha añadido a tus círculos) mostrándote en números  1, 2, 3 o mas notificaciones en rojo. De echo eso es una notificación Google.

En este tutorial veremos como agregar Notificaciones adaptadas a blogger, solo te mostrara los comentarios realizados en tu blog.


Antes de comenzar veremos una demostración:
Demo

Comencemos:

  • Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
  • Paso 2: Buscamos la siguiente linea (Ctrol + F)
<head>
  • Paso 3: Justo por debajo de <head> pegamos el siguiente codigo HTML.
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css' rel='stylesheet'/>
  • Paso 4: Ahora buscamos la siguiente linea (Ctrol + F)
]]></b:skin>
  • Paso 5: Justo por encima de ]]></b:skin> pegamos el codigo CSS.
#show-total {
  position:fixed;
  top:8px;
  left:30px;
  z-index:9999;
  cursor:pointer;
}
  .total-show {
    background-color:#b7362a;color:white;padding:2px 6px;font-size:11px;border-radius:3px;border:1px solid #49c6bc;font-weight:bold;
  }
  #notif {cursor:pointer;}
  #notif:before {
  content: "\f0f3";
  font-family:fontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size:26px;
  display:block;
  position:fixed;
  top:13px;
  left:15px;
  color:rgba(0,0,0,.3);
  z-index:9997;
  transition:all 0.4s ease-out;
}
  #notif:hover:before {
  color:rgba(0,0,0,.5);
}
#comments-container {
  width:374px;
  display:none;
  position:fixed;
  top:52px;
  left:0;
  z-index:9999;
  background-color:#2e3740;
  padding:15px;
  color:#999;
  display:none;
  font-family: Arial, Sans-serif;
  border-right:1px solid #1d252d;
}
#comments-container:before {
  content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidHMwfF9oHpLrOXoOLONJxG9STBMDzcFfTVGIhj78zi1XBDpmN9QdeBtWwGgSBC0mpgfHFtM3i03oayfTXrIAql-Dcui_a8O4lAe05V5VHL-8cGdkQmsXH_x9H8xgbd2A2JeP-LeCINxU/s1600/cm-arrow-blue.png');
  position:absolute;
  top:-11px;
  left:16px;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
}
.cm-outer li {
  padding:7px 10px 12px;
  list-style:none;
  clear:both;
  position:relative;
  border-top:1px solid #434c56;
  border-bottom:1px solid #1b2229;
}
  .cm-outer li.selected {
    border-left:4px solid #fffe8c;
}
  .cm-outer li:first-child {
  border-top:none;
}
  .cm-outer li:last-child {
  border-bottom:none;
}
  .cm-text {color:#cdcdcd;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 60px;font-size:12px;font-weight:normal !important;}
  .cm-header a {color:#5886a7;text-decoration:none;font-size:12px;font-weight:bold}
.cm-header a:hover {color:#74a2c3;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:60px}
.cm-outer img {
  display:block;
  float:left;
  background:#8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%;
  overflow:hidden;
  border-radius:100px;
  position:absolute;
  top:10px;
  left:0;
  border:3px solid #3d464f;
}
.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='http://img1.blogblog.com/img/openid16-rounded.gif'] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt3ItSFZF3xupAAU1-LWMPVbXUE4ngmdfpUARQVd8ZfJh5XNAXymC8daXCeFgjRtWZALQmvxj3_cFSSw60jEjSHBgVgDATbfkNaykjFW2Sqm2dxtOE2HO-umLppGv8scwPceTdOn6eugk/s80-c/gravatar.png);
}
.bg_hitam{
        display: none;
        position: absolute;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index:1001;
        opacity:.40;
}
  • Paso 6: Todavia en la plantilla buscamos el siguiente código
</body>
  • Paso 7: Justo encima de </body> pegamos el siguiente codigo HTML.
<div id='notif' title='Notificaciones'/>
<div class='bg_hitam' id='bg' onclick='document.getElementById(&apos;comments-container&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;bg&apos;).style.display=&apos;none&apos;'/>
<div id='comments-container'/>
<div id='show-total'/>
<script type='text/javascript'>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
  home_page: "http://crearunblogdecero.blogspot.com/",
    max_result: 7, numero de comentarios a mostrar
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: true,
    ct_id: "comments-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function() {
    $('#comments-container, #bg').toggle();
});
document.getElementById('notif').onclick = function() {
    document.title = originalTitle;
$('#show-total').hide();
};
document.getElementById('show-total').onclick = function() {
    document.title = originalTitle;
$('#show-total').hide();
$('#comments-container, #bg').show();
};
$(document).ready(function () {
    var space = $('#comment_block').html();
    space = space.replace(/(?:<br>s*){2,}/g, '<br>');
    $('#comment_block').html(space)
});
//]]>
</script>
<script src='https://dl.dropboxusercontent.com/u/91602513/Html/TutorialesBlogger.blogspot.com/Notificaciones.js'/>

Guardamos los cambios realizados en la plantilla



Nota:-  Solo debemos cambiar lo que esta en Rojo por URL de tu blog
- - 7 Comentarios
Tag

Comentarios (7)

  1. Margarita25 de diciembre de 2013, 1:27

    No me ha funcionado:(

    ResponderEliminar
    Respuestas
    1. Fernando Salas25 de diciembre de 2013, 9:47

      Si me especificas un poco mas de que problemas tienes con esta entrada podre saber mas o menos que problemas tienes

      Saludos

      Eliminar
  2. Unknown23 de febrero de 2014, 11:15

    bueno te confirmo que no funciona, lo unico que sale es el icono de la campanilla flotante, y no notifica nada ni tampoco muestra nada al clicar, es como poner un icono solo jeje

    ResponderEliminar
    Respuestas
    1. Fernando Salas5 de mayo de 2014, 8:53

      Niko T: veo que tu plantilla pusiste otro código...
      Suerte.

      Eliminar
    2. dsvsd10 de julio de 2014, 5:35

      Amigo te dejo mi blog: http://oficialuploaders.blogspot.com/

      no me funciona solo sale la campanilla...
      aquí esta la plantilla de mi blog...
      https://www.firedrive.com/file/0AE84F4C00A7E711

      y me gustaría saber si se puede hacer flotante el menu de esa plantilla

      gracias por todo

      Eliminar
  3. Anónimo7 de agosto de 2014, 8:25

    Hey amigo no me funciona mira mi blog. y lo hice como dijiste http://theblogjose.blogspot.com/

    ResponderEliminar
  4. Fernando Salas22 de agosto de 2014, 17:38

    OK para los que tengan problemas con este entrada, estaré con este tutorial modificado para que el código sea aceptados por todas las plantillas

    ResponderEliminar

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

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