Cara Membuat Notifikasi Komentar Seperti Google+

Hai semuanya kali ini saya akan berbagi sedikit yaitu tentang Cara Membuat Notifikasi Komentar Seperti Google+ caranya gampang banget kok, tinggal masuk2 in script doank. Dari pada pasang recent komentar meningan pasang ini aja lebih mudah dan simple !!!
Ok inilah tutorialnya.
1. Login Blogger
2. Klik Template, Edit HTML
3. Letakan Kode Berikut Di Atas Kode ]]></b:skin>



#cm-total{position:fixed;top:14px;right:0;width:188px;text-align:left;z-index:9999;cursor:pointer}
.total-counter{background-color:#d11919;color:#FFF;font-family:Arial,Sans-serif;font-size:11px;border-radius:5px;font-weight:700;padding:1px 4px}
#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;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;padding:60px 20px 10px}
#cm-container:before{content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNFpfHZz0BQ1a_G1OevRk9XzjlG-mXd2cGpIBQMWB4rkoo9tdKbIqIkk8b-q78rbwWrSGG1FIIiLVKSG2MdUwV07IKn2nPo_7b-o7jrd-kzsKYxelEBdlqmihYhC_K6jJB89BC0rRozmM/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{font-size:11px;text-align:left;font:normal 12px Arial;margin:0 0 5px;padding:0}
.cm-outer ul{margin-bottom:5px}
.cm-outer li{list-style:none;clear:both;position:relative;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.2);background-color:#FFF;margin-bottom:10px;padding:9px 10px 14px}
.cm-text{color:#797979}
.cm-header{font-size:11px;font-weight:400!important;margin:4px 0 8px 90px}
.cm-header a{color:#262626;text-decoration:none;font-size:14px;font-weight:700}
.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/AVvXsEiWApb-62cNuxlvmSnSieoID2olWDKEdbN5qYRkbx5mXMvsCTs4FMXEKuQf2LvfUl0EtXRo-1QoQe0kpLVNonJxb7nWfhlf34_kPb-snqoa1S-BRRaf58iMbzEwiNrTToJqqzjTVRdtv_4/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}
div.cm-header img[src='http://img1.blogblog.com/img/openid16-rounded.gif']{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHFj7mJ-u8sE3rgq7nshSZnqHj-4O6WKAkDqJtPPg-4KD2lcleUTu2IuiCOSancENl9EEmOnJGNZO-eVvUPYAGX8l-6BDYLH1RVboaXxtyrEkL6zUwhAHpiijrcTFLYJ8QbZenQAWQ-U/s80-c/gravatar.png)}
.cm-header a:hover,.cm-footer a:hover{color:#74a2c3;text-decoration:none}


4. Letakan kode berikut diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

5. Letakan kode berikut di atas kode </body>

<div id=cm-container/>
<div id=notif title=Notifikasi><img alt=notifikasi src=http://1.bp.blogspot.com/-wrJzEwB1V3U/UoQktvRDCxI/AAAAAAAAGEA/jYcRiXTyOFg/s1600/lonceng.png/></div>
<div id=cm-total/>
<div class=close-notif><img alt=close src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9KCbfL0_HYJG2cG4KEoH1FGUKR1Ivdyp3Pcy010mSrs09Bw1X4UuzlvaXgFNJSbANecxtH9zwpbNyrxq_vM-ImXXQOX4-0P9xQ-cjWqRzPpI4gJKZF7cwTFqeD1BcA51LJGuBAOPL5FM/s1600/delete4.png title=close/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config ={home_page:http://uzumakiramadan.blogspot.com, max_result: 6, t_w: 80, t_h: 80, summary: 40, new_tab_link: true, ct_id: cm-container, new_cm: " Komentar Baru!", interval: 30000, alert: true, alert: function(total) { document.getElementById(cm-total).innerHTML = '<strong class=\'total-counter\'>'+total+</strong>;documenttitle:( 0 total 0 ') ' 0 originalTitle}
);document.getElementById(notif).onclick = function(),;document.getElementById(show-total).onclick = function(){documenttitle:originalTitle}

 
6. Klik Simpan

Semoga Bermanfaat Buat Kalian Semua !!! Selamat Sore 

Baca Juga Artikel : Cara Memasang Alexa Toolbar - Cara Memperbaiki Penurunan Alexa Rank