Cara Membuat Notifikasi Komentar Di Blog Ala Google Plus
Cara Membuat Notifikasi Komentar Di Blog Ala Google Plus - Halo sobat, kembali saya update artikel lagi heheh kali ini saya update artikel tentang
Tutorial Blog yaitu cara membuat Recent Comment, Namun ini bukan
Recent Comment biasa karena Recent Comment yang biasa kalau saya share udah terlalu mainstream ckckckck... :D Recent Comment ini dari Kang Ismet, Recent Comment ini seperti
Notifikasi Google Plus
yang pojok kanan atas kita itu loh.. atau sobat bisa melihat di blog
saya yang berbentu gambar balon chat, Recent Comment ini bukan hanya
penambahan gambar saat diklik doank melainkan jika ada Komentar masuk
diatas gambar Notifikasi akan menampilkan jumlah komentar terbaru yang
masuk seperti layaknya
facebook. Singkat waktu langsung saja yuk sob.
- Login dahulu Blogger
- Masuk Dashboard lalu klik Template dan klik Edit Html.
- Masukkan Kode dibawah ini tepat diatas
Lewati langkah ini apabila sudah terdapat jQuery pada template sobat.
- Kemudian masukkan CSS dibawah ini tepat diatas
]]>
/* Notifikasi Komentar
----------------------------------------------- */
#cm-total {
position:fixed;
top:14px;
right:0;
width:188px;
text-align:left;
z-index:9999;
cursor:pointer;
}
.total-counter {
background-color:#d11919;
color:white;
padding:1px 4px;
font-family:Arial,Sans-serif;
font-size:11px;
border-radius:5px;
font-weight:bold;
}
#notif {
position:fixed;
top:20px;
right:180px;
z-index:9999;
height:22px;
width:19px;
opacity:.4;
cursor:pointer;
}
#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/AVvXsEg40zlWNUoqERjeyFpEnKOYoziV8Uualiv_eZrsUomlaS_XPLKEpiSC42CM7Yp3knBUP8Ak0qQyyIi2HbuErHrxDYX1FUcPqhPgU6orPNy5rOdGKuxQYhr7nusAZ4y1O08uSX5DNwGF3gE/s1600/arrow-notif.png');
position:absolute;
top:-14px;
left:196px;
}
#cm-container:after {
content:"Komentar Terbaru";
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ton19uL7B4iicOApNwMyg3_N8O4Af5Ilt7ooOsMxQoKykM1EuY_wRxinEnO-DBNGh4iLMD__mAjTaM98lcaCmq3yRPJFuxDdDJVmZB6T6wTjmGVO7pbJYPf85DAf9PMxxLncVZRwdeQ/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='http://img1.blogblog.com/img/openid16-rounded.gif'] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyd5QXc7JDXYQKRmbdRVQHqOsgeyxkY_aspcBLSbRpnsxiH-TT2Pd8O3GRR3zKFPg9pxXYNHp0MTuhQbj0wPH8HjQFDibeIx9l6p_zguEMkacI9m8mTphZ1SlQrGcfqUqxvhAw_arT0nA/s80-c/gravatar.png);
}
- Langkah berikutnya masukkan kode dibawah ini tepat diatas