Membuat Notifikasi Komentar Efek Slide Pada Blog

Membuat Notifikasi Komentar Efek Slide Pada Blog - PAda dini hari yang berbahagia ini saya akan share cara Membuat Notifikasi Komentar Efek Slide Pada Blog. Sebenarnya sudah banyak blog blog yang telah membagikan tutorial serupa. Hitung hitung menambah jumlah potingan :v. Okelah langsung saja.

1. Masuk ke akun blogger sobat.
2. Masukk Tab Rancangan >> Template  >>  Edit HTML.
3. Backup terlebih dahulu template anda bila perlu.
4. Cari kode </head> (gunakan Ctrl + F atau F3 untuk memudahkan pencarian) Taruh jQuary berikut tepat sebelum kode </head>

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

Catatan: Lewati langkah ini jika di blog anda sudah terpasang jQuery.

5. Selanjutnya letakkan style dibawah ini tepat diatas kode ]]></b:skin> atau </style>.

/* Notifikasi Komentar Blogsiryan.blogspot.com */
#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/AVvXsEiKLAtrHm7zIizyJLexBU8S6jVsvU70IR4Q6zhEP2PPPPMN7QW0e1JAeaOZYYDjig9LIlbcJi0r3vvpdCKWfMYHk5j9dq_8B6PJj-IYtZoN3IbpS3SE2kapxH7k1Vf07dEmHK1_CKjir8c/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/AVvXsEiKLAtrHm7zIizyJLexBU8S6jVsvU70IR4Q6zhEP2PPPPMN7QW0e1JAeaOZYYDjig9LIlbcJi0r3vvpdCKWfMYHk5j9dq_8B6PJj-IYtZoN3IbpS3SE2kapxH7k1Vf07dEmHK1_CKjir8c/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/AVvXsEhAFNvBy2bSRgv4kSk8nKAx7MdsCddkM3MohdRuwmnxT7pthi7XYWzW9wkiIudBEaSQY_M1c79Zv7Krqgn66w2l_LgK1uu1I8uixy5KPyf7NVUxo5mo0plweEEqXWrP4dySHUlmona5ykQ/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/AVvXsEi6qSpVz0chJBlKvKuxRJvfVRE3U8hy-uaelCgcofeq9L_We5xppCfH7gypF5mEYVm5NnoUVKg6WZnS4aigpDRZsq2I8BoxqppyqBF0_S5HPCE9CEQapk9P71vpsIhNS6LN5xE7q766C5I/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}

Catatan: Silahkan sesuaikan kode warna merah dengan template anda.

6. Langkah terakhir cari kode </body> lalu 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://artugan.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'/>

Catatan: Ganti tulisan watna biru dengan URL blog sobat.

7. Simpan template anda.

Sekian post saya yang berjudul Membuat Notifikasi Komentar Efek Slide Pada Blog semoga bermanfaat.


Thanks God!!