Cara Membuat Notifikasi Komentar Pada Blog

Oleh Rafid Aslam

23 Juli 2014

Notifikasi komentar ini banyak digunakan oleh para Blogger sekarang. Saya ingat dulu para Blogger masih memakai widget recent comment untuk menampilkan komentar terbaru, sekarang sudah beralih ke yang lebih modern dan enak dilihat. Widget ini sama dengan widget recent comments tetapi dengan desain yang berbeda dengan button yang unik seperti notifikasi Google plus. Widget ini juga digunakan di blog-blog yang terkenal seperti milik +Kang Ismet.

Langkah pertama: Memasang jQuery

Pasang jQuery di bawah ini di atas kode </head>

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

Perhatian: Lewati langkah ini jika jQuery di atas sudah ada pada template anda

Langkah kedua: Memasang CSS

Letakan CSS di bawah ini di atas kode </style> atau ]]></b:skin>

/* Notifikasi Komentar Tips Trick */
#show-total {
position:fixed;
top:1px;
right:180px;
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/AVvXsEj6-NiCzp4IRU4P8AAai_Lhbrinpgb7VDV4oZAwdCU8zqvBDxXMPaiGebufSnXGwK2_X_zqPiw-AOTTNTKhcLPDgOASGFB0fW5TN9Y8NVoSkpuejncoNzvq1V5Sm8i5KOJOnMXmgpj6iuQ/s1600/lonceng.png');
display:block;
position:fixed;
top:12px;
right:160px;
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/AVvXsEj6-NiCzp4IRU4P8AAai_Lhbrinpgb7VDV4oZAwdCU8zqvBDxXMPaiGebufSnXGwK2_X_zqPiw-AOTTNTKhcLPDgOASGFB0fW5TN9Y8NVoSkpuejncoNzvq1V5Sm8i5KOJOnMXmgpj6iuQ/s1600/lonceng.png');
display:block;
position:fixed;
top:12px;
right:160px;
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: 163px;
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/AVvXsEhAtt1p7SrHaVz2Rx_K1zqjlcWTfyQT2ZODXMtHjc4wiEpqtKWTEWhazWWWMmAPt287RmSNLDiE21d0IKRrRKtg3q8DG6LfL6zIWxF1yZ54YWw_BmMG7hcpLp7Cha2uXBo6i_yq7Kk-DLs/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/AVvXsEhyovHWnzJ8Ous35SyTB34XfghLXD0Ydkev9Jfpmtd7knDIQh-ExNGayDezMyWc140k1Qu8M2iKho7ee4MXyBOMy_1Z_-dCdtEB-I3L4xs4r1DIuDWzTAjmFaBoqSVybwRt-iX55iwsB1s/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}

Langkah terakhir: Pasang kode di bawah ini di atas </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://rh-w.blogspot.com",
    max_result: 20,
    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'/>

Perhatian: Ganti kode yang di beri warna kuning menjadi alamat url blog anda

Kemudian lihatlah pada blog anda, jika ada masalah bisa ditanyakan di kotak komentar di bawah post ini. Terimakasih sudah melihat post ini, semoga post ini bermanfaat bagi anda.

Tag : Tips Blogger

Bagikan :

Tweet