Langkah-Langkah Membuat Notifikasi Komentar Di Blogger Seperti Google Plus ~ Tutorial Blog

Selamat malam sobat, semoga anda sehat selalu yah, kali ini saya akan berbagi widget yang menurut saya sangat keren. dan memang sudah banyak yang memposting widget ini, akan tetapi tidak ada salahnya bagi saya untuk menulis kembali dan mempuklikasikan ulang, betul tidak.? hehehe

Widget ini sangatlah bermanfaat menurut saya karena kenapa? karena setiap ada orang yang berkomentar di blog kita, kita langsung tahu, karena widget ini adalah notifikasi komentar seperti halnya notifikasi yang ada di facebook maupun google plus. dan judul postingan kali ini saya beri nama, Widget Notifikasi Komentar Untuk Blog, lumayan keren bukan. hehehe

Berikut adalah langkah-langkah untuk memasang Widget Notifikasi Komentar Untuk Blog:

login ke blogger
buka template
edit template
tekan f3 atau ctl+f
cari kode </head>
Simpan kode Jquery di bawah ini tepat di atas </head>

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

Lewati langkah di atas jika template anda suda ada Jquery

7. Copy kode CSS berikut dan simpan di atas kode ]]></b:skin> atau </style>

/* Komentar Notif */
#show-total {
position:fixed;
top:1px; /* jarak dari atas */
right:280px; /* jika ingin kesebelah kiri tukar right menjadi left */
z-index:9999; /*pengaturan always top*/
cursor:pointer;
float:right;
}
.total-show {
background-color:#FF0000; /*warna total komentar*/
color:white;
padding:2px 6px;
font-size:11px;
border-radius:4px;
font-weight:bold;
}
#notif {cursor:pointer;}
#notif:before {
content: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwXOacuE1VgR_EuL8YSc6XbnG4hFOW07wkfu1qXuOkT8Rfazz8fL8C0RoiWjRBCYdQd7OXXXEPYVJ4lIc65CYZKkLx_y0F2suWU2uaSGWlm-PkpE4z9mDbxVEnY0HcECMsHLlOtEzXBCk/s1600/lonceng.png&#39;);
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(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwXOacuE1VgR_EuL8YSc6XbnG4hFOW07wkfu1qXuOkT8Rfazz8fL8C0RoiWjRBCYdQd7OXXXEPYVJ4lIc65CYZKkLx_y0F2suWU2uaSGWlm-PkpE4z9mDbxVEnY0HcECMsHLlOtEzXBCk/s1600/lonceng.png&#39;);
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:50px;
right:-381px;
z-index:9999;
background-color:#222;
padding:15px 13px 25px 15px;
color:#d35400;
font-family: Arial, Sans-serif;
border-top:8px solid #d35400;
transition:0.5s ease;
}
#cm-wrapper:before {
content:&quot;&quot;;
width:0;
height:0;
position:absolute;
top:-24px;
right: 303px;
border:8px solid transparent;
border-color:transparent transparent #d35400;
}
#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:#d35400;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(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxYQb4A7bOHDr7jNYOko7hk1J_8m4U4pwV7AudNsFOcgzW170sc9QxETF9BMTRgGB-mk9q_nJXyANNayngkVVO9vCe-73Zl_2aEusGgJZOHiPmWjRpwqeguDrNnr-7e8JE3grMgDp0mWI/s1600/anon5.png&#39;) 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:#d35400;text-decoration:none;}
.cm-footer a:hover {color:#e6e6e6;text-decoration:none;}
div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigZ81-g3LDzvqxKAK3y5miTaOpCTxRYL3gg8Ik2X_05rGmO-m8evZDDVqvOlNxzK009lfCKHVJVv3EqTTW4VlkjVBvELvdpdIT8oF6Y6ZZb4Y5d8pnjJWKdNHl89iExc97sXhC_yiij6Y/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;/* jarak dari atas*/
z-index: 100;
}
.comments
.thanks-comment{
position:relative;
margin:10px 0;
padding-left:40px;
font-style:italic;
font-size:16px;
quotes:&quot;\201C&quot;&quot;\201D&quot;&quot;\2018&quot;&quot;\2019&quot;
}
.comments
.thanks-comment:before{
content:open-quote;
position:absolute;
top:0;
left:0;
margin-top:15px;font-size:4em;color:#d80556}

8. Letakan kode berikut di atas 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://vandepenter.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/0B8zY82qas755NGNtcURKUXJkYjA' type='text/javascript'/>

Ganti http://vandepenter.blogspot.com dengan url blog anda

9. Simpan template

Demikian pembahasan tentang Langkah-Langkah Membuat Notifikasi Komentar Di Blogger Seperti Google Plus : ini kami sajikan, semoga bermanfaat. Silahkan anda baca artikel yang sebelumnya yang bisa membuat anda mengetahui lebih banyak tips kesehatan, di antaranya Cara Mempercantik Widget Contact From dan Cara Membuat Tombol Join This Site Tanpa Poto Follower :