Cara Membuat Notifikasi Ala Google Plus di Blog

"Cara Membuat Notifikasi Ala "Google Plus" di Blog

Selamat datang agan/aganwati disini saya akan menyampaikan cara-cara untuk memberikan notifikasi ala google plus di blog agan. sebenarnya artikel ini sudah sangat banyak diberikan, tapi kali ini saya juga akan membahas tentang artikel ini. baiklah ini ia cara-caranya..

Langkah-langka: 

1. buka dulu dashboard agan/aganwati www.blogger.com

2. klik menu template>edit html
3. Cari Kode </head> lalu taruh kode dibawah ini diatas kode </head>

Jquery versi terbaru: 

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

Jika di template agan sudah ada kode seperti diatas, jangan lagi dipasangkan, biarkan dan lewati langkah ini agar jquery blog anda tidak bertabrakan.

4. Letakkan kode dibawah ini diatas kode </style>

/* Notifikasi Komentar Tips Trick */ #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/AVvXsEjl96ZTH7Ct91GBZjYUZ5SEORHj6caF53YNjCTkrpnHf2pOEoRdZNkeZ6u95hkckanWEgrFEk9Xj1FyQqmK17Aa0wt8YtmjMBvLXBBwcpgXZzwOXAA5s6K3KwlVMwkauYhivY5cBzMEF_w/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/AVvXsEjl96ZTH7Ct91GBZjYUZ5SEORHj6caF53YNjCTkrpnHf2pOEoRdZNkeZ6u95hkckanWEgrFEk9Xj1FyQqmK17Aa0wt8YtmjMBvLXBBwcpgXZzwOXAA5s6K3KwlVMwkauYhivY5cBzMEF_w/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/AVvXsEi08tKytQAwH2BysWogJKqGZhxrsWY6OH4D_O09esDsehYAGZOXR4dwwTDIaX2O0iuqUdqYyFOb0waDSBTykeP1-9SzGnlRkIXX7CYnoWUN4v-aM6DMhZhkfFbP0mfjehr4XQVz8y5VOYw/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/AVvXsEiqXjkhozbp-LFkFUIex9kLuJ0uxJHIQuNMZ6jyx2nQ1v_1m80cTdFFrmmYJwMuAmF0kOlsk6d9A0Y9wBtnRhARKOZnVhtbMPHMQ3ckZLeRcdsp9-c4wYvX9D2Hk6rHfE117192386lmRQ/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 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://juragandawet69.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'/>

• Catatan: Diatas ada tulisan seperti  home_page:  "http://juragandawet69.blogspot.com/"Ganti Dengan URL Blog Agan/aganwati. 

5. Setelah itu agan Simpan Template Dan Coba Lihat Hasilnya gan, Baiklah Jika Kurang Jelas Silahkan Komen di bawah.

Semoga Bermanfaat sekian artikel dari saya ini selamat mencoba gan!

Published By: Tsani Aziz | Jika Ingin Copas Tolong Sertakan Sumber Di Bawah ini

Terimah Kasih telah membaca artikel Cara Membuat Notifikasi Ala Google Plus di Blog. Yang ditulis oleh Tsani Aziz .Pada hariSabtu, 15 November 2014. Jika anda ingin sebarluaskan artikel ini, mohon sertakan sumber link asli. Kritik dan saran dapat anda sampaikan melalui kotak komentar Dan Jika Anda Memberi Like/Share Saya Sangat Berterima Kasih. Sekian Trimakasih ^_^

<a href="http://juragandawet69.blogspot.com/2014/11/cara-membuat-notifikasi-ala-google-plus_15.html" target="_blank">Cara Membuat Notifikasi Ala Google Plus di Blog</a>