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('http://1.bp.blogspot.com/-7xFowgOTfDw/UmTNnH5eJ2I/AAAAAAAAF14/Qse4oyyZdnY/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(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/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. Respuestas
    1. Si me especificas un poco mas de que problemas tienes con esta entrada podre saber mas o menos que problemas tienes

      Saludos

      Eliminar
  2. 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. Niko T: veo que tu plantilla pusiste otro código...
      Suerte.

      Eliminar
    2. 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. Hey amigo no me funciona mira mi blog. y lo hice como dijiste http://theblogjose.blogspot.com/

    ResponderEliminar
  4. 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