Cara Membuat Notifikasi Komentar Keren Ala Google Plus Pada Blog - Halo kawan, hari ini saya akan posting Cara membuat notifikasi komentar keren di blog.
Notifikasi ini berguna untuk mengecek komentar terbaru di blog kalian tanpa perlu lagi membuka pada dashbord blogger untuk mengecek komentar. Notifikasi mirip seperti notifikasi yang ada pada Google Plus dan sangat menarik jika dipasang pada sebuah blog.
Screenshot:
langkah-langkah:
- Buka dashboard blog kalian
- Klik menu Template kemudian klik EDIT HTML
- Cari Kode </head> lalu taruh kode dibawah ini diatas kode</head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Jika di template kalian sudah ada kode seperti diatas, jangan lagi dipasangkan, biarkan saja yang sudah terpasang itu.
- Letakkan kode dibawah ini diatas kode </b:skin> atau </style>
/* 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/AVvXsEiWTjOuM-KZCMtvhwSwqljvMM6bDPi9Qv-Yp8oIgNmVJUl1dJSWKSDTQlECc4KTAjPha3_gJZ0UGggSwb7SWFrebIaUuzRnxDsVfQ7vAA2JBgh-P8pX4LD7fNPJTV8rE2OGkqRdxL267oc/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/AVvXsEiWTjOuM-KZCMtvhwSwqljvMM6bDPi9Qv-Yp8oIgNmVJUl1dJSWKSDTQlECc4KTAjPha3_gJZ0UGggSwb7SWFrebIaUuzRnxDsVfQ7vAA2JBgh-P8pX4LD7fNPJTV8rE2OGkqRdxL267oc/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/AVvXsEjbTObmtpB7bjFs72YdNQbT051Psf3e1sduJw_HjFLYvU4qmoQnO_5odMAJggCMAno20wvhFFChH-D0AiBda0SFnYZLoNM-Fusa5ZhWYCuuFxOjsn8u4MjCnblFS3TXBlA_wgtTUh-DOLg/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/AVvXsEhvRRvhxQbiT32HVQINHG_-aWDUqIrA3CNTYoKCEN7dygyVvgk0G_7r71y84xF8nWOGaSPUaatD3WyipZKNu2SHKctGuMZRUC_f3fP81bFNicNvuvt_awm709_rFU-dlYe-_a_bdhcU-4I/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 yaitu Cari kode </body> dan taruhkan kode dibawah ini 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://marwanto606.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'/>
- Ubah http://marwanto606.blogspot.com sesuai dengan alamat blog kalian.
- Kemudian simpan dan lihat hasilnya.
Komentar
Posting Komentar