Cara Membuat Notifikasi Komentar Terbaru di Blog - Hai hai hai! Selamat siang sobat semuanya pada kali ini saya akan membahas tentang Cara Membuat Notifikasi Komentar Terbaru di Blog. Sebelumnya Blog Billy-Art pernah posting Cara Membuat Recent Comment Dengan Tampilan G+. Nah sekarang versi ke-2 nya sobat! Recent Comment kali ini lebih Elegan dan tentunya.. keren! :D Pada penasaran kan gimana cara buatnya yuk langsung aja ke tutorialnya! Disimak baik² ya gan! Untuk Demo (Tampilannya) Bisa dilihat gambar disamping kiri ^_^
1. Masuk ke Blogger
2. Lalu Pilih Template > Edit HTML
3. Letakkan kode jQuery ini tepat diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
4. Eiittss! jangan disimpan dulu, sekarang letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
/* Notifikasi Komentar SiRyan.net */
#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/AVvXsEgyyz4rhEZ61pZjmRtmgQBr7-y8gJC2-qW8jWGFxqdSg2WujDdGu1aNyaVUxmlaJt0Ee0jmK1NSFR5u_rNDDBmmedXGB116jagGqFTxsgaDGD5n_lKU1AssCYdiGbpuRvXqwjZFPRbE-W4/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/AVvXsEgyyz4rhEZ61pZjmRtmgQBr7-y8gJC2-qW8jWGFxqdSg2WujDdGu1aNyaVUxmlaJt0Ee0jmK1NSFR5u_rNDDBmmedXGB116jagGqFTxsgaDGD5n_lKU1AssCYdiGbpuRvXqwjZFPRbE-W4/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/AVvXsEjCxLVnjQ2p_FEs2gHUfMvK60H6q9Q-jGjI-w6IkLzI-GjhkXUmFr6ZuV5YeezIVuyL7XPbMJSF8MM3f2e8EYcK8V3zkZUT9zTlm_9kjSm-ZbqYslf2en69mOUKS_vyltbXapLVSXWme5c/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/AVvXsEjxKkh2w5Ru2LX_vmokj1QTCzq1ZaZOnwQEInm7Zf7HzKcJ8XwleOksQ8jAbX91SKeM_N3gmFuuqhqPkEP5rTIazXyBXSLlXaVW7eH2_wPfByM9gQDASVlhMWP5M5J_dFtpBgFrGtgqSPk/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}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://Billy-art.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 Biru muda dengan URL (Link) Blog sobat
6. Simpan Template dan Lihat hasilnya! :D
Sekian dulu Tutorial tentang Cara Membuat Notifikasi Komentar Terbaru di Blog! Terus kunjungi Blog Billy-Art untuk mendapatkan tutorial yang lebih unik dan keren tentunya! see u next post! ^_^
0 Response to "Cara Membuat Notifikasi Komentar Terbaru di Blog "
Post a Comment