Como agregar las Notificaciones Google adaptadas 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 Google+ (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/AVvXsEirfnDF9VbXq3d8l2XB9UGdPFNyOvlio4eayCn6SWnO0Cy5NKkr4Bcb7WbakMQoNBrhlmmtqMZTAKPHSMBTGtPJgitDoxxRMeI0_R7qfhNfavL4mFZiWqRzcN6XVt4LPva3AR5IiPQ5iE8/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/AVvXsEi1S1UGQbjt4D-VYdjTkj_VpMDh_l-rEnG5syl14yvKv47rYK8FqC9XjneeYuOKPykDUzpu_Xm2QBpJM5yChz7wDKdotNennlmR9f6w1DZtUUdQa7b3HlMBq6hgey5mmeUiq7dqy-NtUkA/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('comments-container').style.display='none';document.getElementById('bg').style.display='none''/>
<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'/>
.png)
1 comentarios:
Comentario Simple
Publicar un comentario
Con dudas, Deja tu comentario
Antes de comentar recuerda;
-No se permite spam
-No permitimos un vocabulario inapropiado
-Se se lo mas especifico
Nota:
Para introducir el código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
Para crear el efecto de un uso intensivo <b> SU TEXTO AQUÍ ... </b>
Para crear el efecto del uso de la etiqueta cursiva <I> SU TEXTO AQUÍ ... </i>
Para convertir tu comentario en HTML