Cara Membuat Notifikasi Komentar Keren Di Blog

     Membuat Notifikasi Komentar Ala Google+ - Kali ini saya akan berbagi widget yang menurut tutorwidget cukup bagus dan keren untuk di pasang di blog sobat. dan memang sudah banyak yang menulis artikel tentang widget ini, akan tetapi akan saya ulas kembali.

     Bagaimana cara membuat notifikasi ala Google Plus. Notifikasi ini mirip dengan notifikasi Google+ yang berbentuk lonceng di bagian atas. Notifikasi ini juga sudah saya tambah dengan scrool sehingga memungkinkan untuk menambah jumlah komentar yang ditampilkan dan juga akan mempermudah navigasi pengunjung ketika membaca semua komentar hanya dalam satu kali klik. Tentu saja ini akan sangat berguna bagi anda dan sekaligus juga akan memperbesar peluang dapat backlink internal serta mendapat komentar lebih banyak.

Baca juga : Membuat Profil Blogger keren Seperti Google+

Seperti yang kita ketahui komentar sudah menjadi momok yang penting bagi sebuah blog, karena dengan semakin banyaknya komentar maka semakin banyak pula visitor yang ingin meninggalkan jejaknya ditempat anda.

Admin akan membagikan bagaimana cara Memasang Notifikasi Komentar Google Plus di Blogger. Berikut ini tampilan screenshootnya:

1. Masuk ke Blogger
2. Lalu Pilih Template > Edit HTML
3. Letakkan kode jQuery di bawah ini tepat diatas kode </head>

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

#NB : Lewati langkah ini jika diatas kode </head> sudah ada kode jQuery tersebut

4. Sekarang letakkan kode berikut tepat diatas kode ]]></b:skin> 

/* Notifikasi Komentar */
#show-total {
position:fixed;
top:1px;
right:280px;
z-index:9999;
cursor:pointer;
float:right;
}
.total-show {
background-color:#FF0000;
color:white;
padding:2px 6px;
font-size:11px;
border-radius:4px;
font-weight:bold;
}
#notif {cursor:pointer;}
#notif:before {
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXlnZQZEmbNIbIQKXdhgir6-bxzBySdlKxleKQ8XzeBBjP4WF1xKAhD6MbcAwAOX3BQjA_Wr2UJHcD4Lp9RQcOG1PSESiR80ZraULoKFSQeRGUohAz5xBxrJWxa7-vBlTeaTGrmWOTa3g/s1600/lonceng.png');
display:block;
position:fixed;
top:12px;
right:300px;
opacity:.5;
z-index:9997;
transition:all 0.4s ease-out;
}
#notif:hover:before {
opacity:1;
}
#notif2 {cursor:pointer;display:none}
#notif2:before {
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXlnZQZEmbNIbIQKXdhgir6-bxzBySdlKxleKQ8XzeBBjP4WF1xKAhD6MbcAwAOX3BQjA_Wr2UJHcD4Lp9RQcOG1PSESiR80ZraULoKFSQeRGUohAz5xBxrJWxa7-vBlTeaTGrmWOTa3g/s1600/lonceng.png');
display:block;
position:fixed;
top:12px;
right:300px;
opacity:.5;
z-index:9997;
transition:all 0.4s ease-out;
}
#notif2:hover:before {
opacity:1;
}
#cm-wrapper {
width:310px;
position:fixed;
top:48px;
right:-381px;
z-index:9999;
background-color:#222;
padding:15px 13px 25px 15px;
color:#666;
font-family: Arial, Sans-serif;
border-top:8px solid #444;
transition:0.5s ease;
}
#cm-wrapper:before {
content:"";
width:0;
height:0;
position:absolute;
top:-24px;
right: 303px;
border:8px solid transparent;
border-color:transparent transparent #444;
}
#cm-scroll {
width: 100%;
height: 600px;
overflow: auto;
position: relative;
}
#comments-container {
color:#666;
font-family: Arial, Sans-serif;
}
#comments-container.cm-active {
position:fixed;
right:0;
top:61px;
}
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}
.vscrollerbase {
width: 5px;
background-color: #111;border-radius:2px;
}
.vscrollerbar {
width: 5px;
background-color: #599b29;border-radius:2px;
}
.hscrollerbase {
height: 10px;
background-color: #111;border-radius:2px;
}
.hscrollerbar {
height: 10px;
background-color: #444;border-radius:2px;
}
.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background-color: gray;
}
.cm-outer {
margin:0 auto;
padding:0;
font-size:11px;
text-align:left;
}
.cm-outer pre {background-color:#141414;font-size:11px;color:#7c7c7c}
.cm-outer li {
padding:7px 10px 12px;
list-style:none;
clear:both;
position:relative;
border-top:1px solid #333;
border-bottom:1px solid #111;
margin-right:10px;
}
.cm-outer code {
color:#a6a658;
font-size:11px;
}
.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:#999;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 60px;font-size:12px;font-weight:normal !important;}
.cm-header a {color:#599b29;text-decoration:none;font-size:12px;font-weight:bold}
.cm-header a:hover {color:#e6e6e6;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:60px}
.cm-outer img {
display:block;
float:left;
background:#8fa2cb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGm1HKX59RcX1_agqndxv4czO3EdHqvrx74FPhStHZTpuGfM3yk2GR7K_597W2YZZpvFCanfGeRajt08DSPVlh0n7WHlqJWDmaApcF_Z9SLN5rpxv9oByGWvjARMnDxKEolU9x9C6FlR4/s1600/anon5.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:#599b29;text-decoration:none;}
.cm-footer a:hover {color:#e6e6e6;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/AVvXsEjhBjNMqHuyata0PXIGMQIyZdLvORART8MPfKIOBzz0Vny8_Cnzv03RcEKFJJtW9m5Hsv3WtdIvF2qUP3j05k1Ua_iUgvwPhIIVyMq0R8snkjMmr3JguDXe2cgMEi__vDTx9yOHhwA-zj0/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:99;
opacity:.30;
}
.sticky {
position:fixed;
top:42px;
z-index: 100;
}
.comments
.thanks-comment{
position:relative;
margin:10px 0;
padding-left:40px;
font-style:italic;
font-size:16px;
quotes:"\201C""\201D""\2018""\2019"
}
.comments
.thanks-comment:before{
content:open-quote;
position:absolute;
top:0;
left:0;
margin-top:15px;font-size:4em;color:#d80556}

#NB : Silahkan diatur sendiri Letaknya (Berwarna Merah)

5. Langkah terakhir Letakkan kode dibawah ini tepat diatas kode </body>

<div id='notif' title='Notifikasi'/>
<div id='notif2' title='Notifikasi'/>
<div class='bg_hitam' id='bg'/>
<div id='cm-wrapper'>
<div class='flexcroll' id='cm-scroll'>
<div id='comments-container'/>
</div>
</div>
<div id='show-total'/>
<script type='text/javascript'>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://tutorwidget.blogspot.com",
    max_result: 18,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    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(){$("#cm-wrapper").css({right: "0px"});$("#bg, #notif2").show();$("#notif").hide();});$('#notif2').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});$('#bg').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});document.getElementById('notif').onclick = function() {document.title = originalTitle;$('#show-total').hide();};document.getElementById('show-total').onclick = function() {document.title = originalTitle;$('#show-total').hide();$("#cm-wrapper").css({right: "0px"});$("#bg").show();};setTimeout(function() {$('.myframe').each(function() {$(this).replaceWith('<iframe class="myframe" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');});}, 5000);$(document).ready(function() {
var stickyNavTop = $('#HTML7').offset().top; var stickyNav = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyNavTop) { $('#HTML7').addClass('sticky');} else {$('#HTML7').removeClass('sticky'); }};stickyNav();$(window).scroll(function() {stickyNav();});});
setTimeout(function() {
        $('.jsfiddle-demo').each(function() {
        $(this).replaceWith('<iframe class="jsfiddle-demo loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');
    });
}, 5000);
//]]>
</script>
<script src='https://googledrive.com/host/0B_VKL1yJ5C2uUnNSVjhIaHZiUWs' type='text/javascript'/>

#NB : Ganti warna Merah dengan URL (Link) Blog sobat

6. Simpan Template dan Lihat hasilnya! :D

 Sekian pembahasan dari tutorwidget mengenai Cara Membuat Notifikasi Komentar Keren Di Blog.
Semoga dengan sobat terapkan tutorial tersebut dapat menarik pengunjung untuk memberikan komentarnya di halaman post anda dan traffic pageviews blog anda pun akan semakin meningkat. Jika berkenan janganlah lupa memberikan kesan anda disini, besar harapan kami dengan apa yang sobat berikan atas perkembangan halaman web ini.