Membuat notifikasi komentar ala google plus

maman    11.49.00    blog , tutorial    Comment   

Sahabat mandala tentu tidak asing lagi dengan notifikasi yang ada di google plus yang berbentuk lonceng, yang berada tepat di pojok sisi kanan atas. Nah kali ini mandala ingin berbagi trik untuk pembuatan notifikasi yang mirip dengan punya di google plus.

Dengan memasang notifikasi ini diharapkan sahabat mandala semua akan cepat tahu komentar yang masuk dan dengan segera untuk membalas komentar yang di buat oleh pengunjung blog kita, sehingga komentar tidak akan tenggelam begitu saja.

Baik agar tidak menimbulkan penasaran yuk kita simak bermasa tutorial atau cara pembuatannya berikut ini simak bersama ya sahabat Mandala :

Langkah pertama sudah pasti login dulu ke halaman blogger sahabat mandala semua.

Kedua silahkan masuk kehalaman dasbhor bloger sahabat semua dan pilih menu template dan klik edit html

Ketiga pasang kode jQuery berikut ini tepat di atas </head>

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

Keempat Simpan CSS ini di atas ]]></b:skin> atau </style>



/* Notifikasi Komentar
----------------------------------------------- */
#cm-total {
  position:fixed;
  top:14px;
  right:0;
  width:188px;
  text-align:left;
  z-index:9999;
  cursor:pointer;
}
.total-counter {
  background-color:#d11919;
  color:white;
  padding:1px 4px;
  font-family:Arial,Sans-serif;
  font-size:11px;
  border-radius:5px;
  font-weight:bold;
}
#notif {
  position:fixed;
  top:20px;
  right:180px;
  z-index:9999;
  height:22px;
  width:19px;
  opacity:.4;
  cursor:pointer;
}
#notif:hover {
  opacity:1;
}
.close-notif {
  position:fixed;
  top:92px;
  right:20px;
  z-index:9999;
  cursor:pointer;
  display:none;
}
#cm-container {
  width:355px;
  position:fixed;
  top:67px;
  right:0;
  z-index:9999;
  background-color:#e5e5e5;
  padding:60px 20px 10px 20px;
  color:#666;
  box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important;
  text-align:left;
  border:1px solid rgba(0,0,0,.2);
  background-clip:padding-box;
  display:none;
}
#cm-container:before {
  content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaGlz1F3Unezrz5b6flhDBptzROPfkzgwpCY7h47GglysadEwerxqvLLpiqvgUZALuspMVH7l_n-SMxB-mTGRD3_701Bo1iv_rtR8XAnE8jkG0xPSqHr2eVL86CL7_OnhkqtugWXFpwnE/s1600/arrow-notif.png');
  position:absolute;
  top:-14px;
  left:196px;
}
#cm-container:after {
  content:"Komentar Terbaru";
  position:absolute;
  top:22px;
  left:150px;
  text-align:center;
  font:normal 14px Arial;
  color:#333;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
  font:normal 12px Arial;
}
.cm-outer ul{
  margin-bottom:5px;
}
.cm-outer li {
  padding:9px 10px 14px;
  list-style:none;
  clear:both;
  position:relative;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  background-color: white;
  margin-bottom:10px;
}
.cm-text {color:#797979;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 90px;font-size:11px;font-weight:normal !important;}
.cm-header a {color:#262626;text-decoration:none;font-size:14px;font-weight:bold}
.cm-header a:hover {color:#74a2c3;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:90px}
.cm-outer img {
  display:block;
  float:left;
  background:#ececec url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZvcCoZBeLBdgKe9zrEI56Qu9bVKZv7M-zu1LXCoGURbF59CJIV28oKEpGeBv-KSjefDrfezhWrCYMtHlH_QOdBHY3RnLdOrHqFkFDIlwXb3HI-B6iHTdnmu2SzXnCFqET4bF_hoazhds/s1600/anon80.png') no-repeat 50% 50%;
  overflow:hidden;
  border-radius:3px 0 0 3px;
  position:absolute;
  top:0;
  left:0;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#5886a7;text-decoration:none;}
.cm-footer a:hover {color:#74a2c3;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);
}


Kelima Supaya CSS diatas berfungsi, silahkan simpan kode ini di atas </body>



<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG1hv4JN5RvjCD6VvC2IQ0NFnHgKqlzE74n1UGk9UNwaYQZ9x6NA9YeJGiYT-EjX00dT9tBp0ivx5F8pTbjd8SHwI22N-WFRipvp6FoqPuyEEqJeX_3_nJw91r2XUrVRGmrk45KwnNlJI/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW5R9C6ibXECZXm6ckSsMpJgFH6RqkYQxy3wNFNyc7myM6hF2XyiYZa47ZcgkBpyJvVrrp1CywjVD9DPTJWs4JfPXegN5aEr-V0GigkIdAf4Le6yiA6yxMp1Ca0NLaERrsP1DjXxfwpLQ/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://mandalatutor.blogspot.com/",
    max_result: 6,
    t_w: 80,
    t_h: 80,
    summary: 40,
    new_tab_link: true,
    ct_id: "cm-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("cm-total").innerHTML = '<strong class=\'total-counter\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function(){$('#cm-container, .close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container, .close-notif').hide();});document.getElementById('notif').onclick = function(){document.title = originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick = function(){document.title = originalTitle;$('#cm-total').hide();$('#cm-container').show();};
//]]>
</script>
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js' type='text/javascript'/>

Terakhir simpan template sahabat mandala semua dan lihat hasilnya treng treng treng.