Memasang Notifikasi Komentar Google Plus di Blogger

Memasang Notifikasi Komentar Google Plus di Blogger - Admin akan membagikan bagaimana cara Memasang Notifikasi Komentar Google Plus di Blogger. Cara ini banyak di temukan di google yang pertama kali saya temukan di DTE dan +Kang Ismet .
lonceng
Dibawah ini screenshoot  atau gambaran tentang Notifikasi komentar ala google plus
notif
Untuk cara Pemasangannya 
1. Simpan kode JQuery dibawah ini tepat diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Lewati langkah di atas bila template anda sudah ada jquery
2. Copy kode CSS berikut dan pastekan diatas kode ]]></b:skin> atau </style>
/* Komentar Notif */
#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(&#39;http://4.bp.blogspot.com/-Hd3B90Kfggg/UpjdHX6iwTI/AAAAAAAABSY/dFE_zIuO8o8/s1600/lonceng.png&#39;);
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(&#39;http://4.bp.blogspot.com/-Hd3B90Kfggg/UpjdHX6iwTI/AAAAAAAABSY/dFE_zIuO8o8/s1600/lonceng.png&#39;);
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:50px;
right:-381px;
z-index:9999;
background-color:#222;
padding:15px 13px 25px 15px;
color:#d35400;
font-family: Arial, Sans-serif;
border-top:8px solid #d35400;
transition:0.5s ease;
}
#cm-wrapper:before {
content:&quot;&quot;;
width:0;
height:0;
position:absolute;
top:-24px;
right: 303px;
border:8px solid transparent;
border-color:transparent transparent #d35400;
}
#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:#d35400;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(&#39;http://4.bp.blogspot.com/-JF6712BTA-U/T2Z5ZRTOrOI/AAAAAAAABn4/cXZsvDO8Hzs/s1600/anon5.png&#39;) 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:#d35400;text-decoration:none;}
.cm-footer a:hover {color:#e6e6e6;text-decoration:none;}
div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
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:&quot;\201C&quot;&quot;\201D&quot;&quot;\2018&quot;&quot;\2019&quot;
}
.comments
.thanks-comment:before{
content:open-quote;
position:absolute;
top:0;
left:0;
margin-top:15px;font-size:4em;color:#d80556}
3. Letakkan kode berikut 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://hollabacktexas.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/0B8zY82qas755NGNtcURKUXJkYjA' type='text/javascript'/>
yang ditandai warna merah ganti dengan blog anda http://hollabacktexas.blogspot.com
4. Simpan Template
Semoga bermanfaat bila ada pertanyaan didiskusikan lewat kotak komentar.

Resource: http://mantapweb.blogspot.com/2013/12/mempelajari-lebih-lanjut-notifikasi.html

68 Responses to Memasang Notifikasi Komentar Google Plus di Blogger

  1. mantap,walau belum valid HTML5 tetapi mau dicoba menerapkan ubtuk blog saya,dengan membuat lekukan kodenya lebih padat agar tidak berpengaruh pada load blog.

    terimakasih kodenya sob

    ReplyDelete
    Replies
    1. sama2 mbak.. :) silahkan di utak atik sendiri :D

      Delete
  2. Lambang loncengnya bisa diganti gak sob..

    ReplyDelete
    Replies
    1. bisa.. ganti aja link ini http://4.bp.blogspot.com/-Hd3B90Kfggg/UpjdHX6iwTI/AAAAAAAABSY/dFE_zIuO8o8/s1600/lonceng.png :-d

      Delete
  3. widih mantap nih mas .. ikut belajar ah

    ReplyDelete
  4. widih mantap nih mas .. ikut belajar ah

    ReplyDelete
    Replies
    1. double balesnya :D saya malah banyak belajar sama mas jenar nih

      Delete
  5. saya masih setia pake komentar blog mas...makasih ya

    ReplyDelete
    Replies
    1. sama-sama mbak indah :) makasih udah mau setia ^_^

      Delete
  6. Hasilnya kayak di screnshootnya gk sob, soalnya yang dari KI gk sama, saya gk bisa modif soalnya gk tau pengkodean :(

    ReplyDelete
    Replies
    1. iya cssnya juga sama persis seperti di screenshoot ,coba lihat demo :D

      Delete
  7. keren juga widgetnya,.. nice tutorial mas

    ReplyDelete
  8. wah bagus juga ya mas wiget nya kayak punya Google plus :)

    ReplyDelete
  9. Aku masih komentar blog, mau ganti ko berat sebab ga bisa editnya :)

    ReplyDelete
  10. Waduuuuhh kodenya seabrek-abrek
    Trims atas tutornya
    Tapi aku nggak bisa edit"n kalau soal html

    ReplyDelete
    Replies
    1. sama-sama mbak muya :) iya saya sendiri juga bingung =D

      Delete
  11. kreatif juga mas. saya cukup dengan komentar apa adanya aja deh

    ReplyDelete
    Replies
    1. itu sudah lebih dari cukup :) makasih sudah sempatkan untuk mampiri mas Agus :)

      Delete
  12. Tampilannya,keliat lebih fresh ya mas :)

    ReplyDelete
    Replies
    1. iya mas , biar pengunjung betah,hehe :D

      Delete
  13. jadi kelihatan keren ya mas blog nya apabila ada widget notifikasi comment di blog nya :)

    ReplyDelete
    Replies
    1. iya mbak eka :) biar tahu kalau ada yg komentar :D

      Delete
  14. Ternyata kelihatan bagus juga ya memasang notifikasi komentar googleplus di blog,nanti saya coba praktekkan.

    ReplyDelete
  15. jadi lebih mudah ya mas untuk cek komentar yang masuk di blog :)

    ReplyDelete
  16. Wuih keren nih.... sempat pengen pasang, tp loading blognya sudah limit he,,,
    Izin follow blognya sob.....

    ReplyDelete
    Replies
    1. iya silahkan mas, blog ini blum pasang Notif komentarnya =D

      Delete
  17. wah ini tw caranya, keren tapi sayangnya saya pakai worpress, kalau di pasang di wordpress bisa ga yah mas

    ReplyDelete
  18. bisa kalau bisa di edit lagi, coba kreasikan sendiri, saya gak pakai WP jadi belum ngotak ngatik =D makasih kujungannya :D

    ReplyDelete
  19. Thx kang , sudah saya terapkan pada blog saya ^_^

    ReplyDelete
  20. hay kak mawan, saya sudah coba dan bisa, tapi kok widget atau gadget saya yang disebelah kanan ikut jadi fixed gitu ya sama seperti widget di blog ini yang"Jangan Lupa Gabung", cara mengatasinya gimana ya? haha maaf nih tanya-tanya

    ReplyDelete
    Replies
    1. sudah bisa deh, ternyata tinggal hapus bagian .sticky :D efek malem nih ngedit jadi gini wkwk nice share kak keren-keren!!

      Delete
    2. sudah aman yah,tadi sudah di cek dan rapi :)

      Delete
  21. Terima kasih banyak gan, izin cicip buat blog saya

    ReplyDelete
    Replies
    1. silahkan dicicipi,kalau ada yang kurang beritahu :D

      Delete
  22. Saya mau tanya kalau template punya saya itu b skinya di depannya ada /*
    jadi taruh di atas style ya

    ReplyDelete
  23. mau tanya gan, kok kadang redirect ke linkbucks,
    dimana letak kesalahannya tu gan.. mohon pencerahannya

    soalnya saya lihat di kode pun gak ada url www.linkbucks nya gan

    ReplyDelete
    Replies
    1. apa mungkin sebelumnya mas nasrful pernah memasang link linkbucks?

      Delete
  24. Replies
    1. rusak yang mana mas, saya lihat masih bagus kok :)

      Delete
  25. mantap mas makasih ...
    sangat membantu untuk melengkapi template buatan saya

    ReplyDelete
  26. gak berhasil ce T___T

    visit back gan :D www.berbagisesama123.blogspot.com

    ReplyDelete
  27. gak berhasil sob :) hehe
    kalo boleh tau, letakin kode buat lonceng kayak mna ya ?? thanks

    ReplyDelete
  28. This comment has been removed by a blog administrator.

    ReplyDelete
  29. wah keren bos notifikasi comentar nya nanti saya coba deh,,, oiya tapi itu ada efek sampingnya ga bos.. misalnya menambah berat loading atau apa gitu bos,,, makasih bos,,,

    ReplyDelete
  30. Keren Bang :D,
    oiya, Mau Nanya nih, Cara Membuat Persis Perbedaan Pengunjung dengan Author Blog kaya di blog ini gimana ?
    Mohon Penjelasanya ya

    ReplyDelete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔