Postingan Cara Membuat Notifikasi Komentar Ala Google PLus,
Saya buat tidak lebih dari satu menit,
kenapa postingan Cara Membuat Notifikasi Komentar Ala Google PLus,
saya buat cepat dan tanpa berpikir, Karena hasil Copy Paste, hehehe...
Notifikasi Komentar Ala Google PLus ini saya anggap berguna bagi buat mempermudah baik pengunjung maupun pemilik blog agar mudah mengetahui keberadaan komentar dan postingan yang mendapat komentar.
Nah langsung aja disimak cara membuatnya
1. Masuk ke blogger dulu
2. Lalu ke Template > Edit HTML
3. Backup terlebih dahulu template anda bila perlu
4. Cari kode </head> (gunakan Ctrl + F atau F3 untuk memudahkan pencarian) lalu letakkan 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 ini jika di blog anda sudah terpasang jQuery
5. Jangan disimpan dulu, sekarang letakkan kode dibawah ini tepat diatas kode ]]></b:skin>atau </style> , kalau saya di atas </style>
/* Notifikasi Komentar Blogsiryan.blogspot.com */ #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/AVvXsEgYlEOw3NNjM53epV6CMxey_kIIuCcGmfqjk7B-V06rd4OobgDFLwp_EtLvzo0LF_lFWZQ1vmdf9zFP5M9IUi4iO-VO3rJmgViUI3V3hyphenhyphencm9KTaK9iirO-GPM-M4yopO84S9yPH1F60Jv8/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/AVvXsEgYlEOw3NNjM53epV6CMxey_kIIuCcGmfqjk7B-V06rd4OobgDFLwp_EtLvzo0LF_lFWZQ1vmdf9zFP5M9IUi4iO-VO3rJmgViUI3V3hyphenhyphencm9KTaK9iirO-GPM-M4yopO84S9yPH1F60Jv8/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/AVvXsEjc4nSVyDzND4twzHXw7iqtUyF4M4PKRTEHb5e05wi7HApD7w_bcp57EEMoIqx7fp190P3cPbxlf0EvvtMrEMy2uSOl2eWWYu1rCzXF7eYLCU40zEtVIGczHRmq3yKkmi3C5bZziWDbauk/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/AVvXsEgXGwmrGJJJU7Dj_ZGDKp1edMLol1cus4Pm4jO44gNtfhUgvJFLnzDL7K_PfoFv5GIyLJqWDtfn412TUA58NKPW4SLWe2yXxbczOhZmyj6j6bJquyjwVDKKe_hI07gZ0gXc13fGxyrIqWc/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}
6. Langkah terakhir cari kode </body> lalu 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://blogsiryan.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'/>
*ganti tulisan yang berwarna biru dengan link blog agan
7. Silahkan simpan template anda dan lihat perubahannya
Jangan Lupa Pencet Salah Satu Share Dibawah Artikel Ini
Sekian artikel saya mengenai Cara Membuat Notifikasi Komentar Keren Di Blog,
Semoga bermanfaat,
Wassalam
Sumber: http://blogsiryan.blogspot.com/2014/02/cara-membuat-notifikasi-komentar-keren.htm.