Cara Membuat Tombol Notifikasi Komentar Blog Ala Google+ Dengan Efek Slide

20:32:00
Cara Membuat Tombol Notifikasi Komentar Blog Ala Google+ Dengan Efek Slide
Selamat datang agan atau aganwati kali ini saya akan berbagi tips blogging yaitu cara membuat tombol notifikasi komentar blog ala google+ dengan efek slide. Tombol notifikasi komentar merupakan widget yang menampilkan komentar pengunjung yang ada pada blog, notifikasi komentar ini dapat terlihat apabila anda menekan tombol notifikasi yang sudah anda pasang, maka akan muncul komentar-komentar dari para pengunjung blog. Cara kerjanya hampir mirip dengan notifikasi pada Facebook.


Dengan menambahkan tombol notifikasi komentar pada blog kita dapat memudahkan dalam memantau komentar blog dari pengunjung pada blog kita. Widget ini cukuplah menarik dengan efek slide saat memunculkan komentar.


Berikut tutorial untuk membuat tombol notifikasi komentar blog ala Google+ dengan efek slide :


Langkah

1. Login pada blog anda masing-masing,

2. Pada menu dashboard pilih menu template,

3. Lalu pilih edit html,

4. Setelah itu cari kode </head> dengan cara
Ctrl
+
F
, lalu copy script di bawah ini, lalu paste tepat di atas kode </head>,

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

Catatan : Jika script Jquery di atas sudah terdapat di blog anda maka tidak usah dipasang lagi.


5. Copy script di bawah ini, lalu cari kode ]]></b:skin> dengan cara
Ctrl
+
F
, lalu paste tepat di atas kode ]]></b:skin>,

 /* Notifikasi Komentar Ala RenaldyWays */
#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('http://4.bp.blogspot.com/-Hd3B90Kfggg/UpjdHX6iwTI/AAAAAAAABSY/dFE_zIuO8o8/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('http://4.bp.blogspot.com/-Hd3B90Kfggg/UpjdHX6iwTI/AAAAAAAABSY/dFE_zIuO8o8/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('http://4.bp.blogspot.com/-JF6712BTA-U/T2Z5ZRTOrOI/AAAAAAAABn4/cXZsvDO8Hzs/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(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/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:"\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} 


Kode warna dapat diganti dengan kode warna yang Anda inginkan, bisa Anda dapatkan di sini, 
http://renaldyways.blogspot.com/p/kode-warna-html.html


6. Setelah itu cari kode </body> dengan cara
Ctrl
+
F
, lalu copy script di bawah ini, lalu paste tepat 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://renaldyways.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/0B54Ccx1SCE-cYi1hNDJLTC03cEE/ravizikrillah-notif.js' type='text/javascript'/> 


Jangan lupa untuk mengganti alamat blog saya dengan blog anda pada script di atas!



7. Simpan Template.


Demikian artikel tentang cara membuat tombol notifikasi komentar blog ala Google+ dengan efek slide, semoga artikel ini dapat bermanfaat bagi anda jangan lupa like, share, dan google+nya serta tinggalkan komentar anda, terima kasih.

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Artikel Selanjutnya
Next Post
Artikel Sebelumnya
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

12 Comments

NÖPUL.7 15 February 2015 at 10:55

:mewek

NÖPUL.7 15 February 2015 at 10:56

n7-blog.blogspot.com

Renaldy Ramadani 15 February 2015 at 20:13

:2thumbup

Arief Bachrul 16 February 2015 at 10:43
This comment has been removed by the author.
muhammad royan Firdaus 20 March 2015 at 20:50

gan biar yang muncul recent post gimana ya?

Renaldy Ramadani 21 March 2015 at 16:45

kalo recent post saya belum tahu gan, kalo random post silakan pelajari disini gan http://renaldyways.blogspot.com/2014/10/cara-membuat-random-post-tanpa-tumbnail.html

Syahrul Hamzah 29 March 2015 at 10:55

liat js yang dihosting jadi kurang berminat memasangnya.
tapi makasih dh berbagi :D

Renaldy Ramadani 30 March 2015 at 16:09

:2thumbup yoi gan

Syahrul Sidik 22 July 2015 at 19:48

kang cara nurunin dikit loncengnya gimana saya ketutupan kotak atas

Renaldy Ramadani 22 July 2015 at 22:21

top:1px; /* jarak dari atas */ itu gan angkanya diganti lebih besar untuk mengatur jarak tombolnya dari atas :2thumbup

Maximilian Edelman 9 September 2015 at 05:10

5+:thumbup

Renaldy Ramadani 9 September 2015 at 08:54

:2thumbup