jika anda seorang blogger maka anda pasti sudah tidak asing dengan google plus, jika anda masih tidak mengetahuinya anda bisa menyimak penjelasan saya berikutgoogle plus adalah layanan sosial media yang dibuat oleh google inc. Produk google satu ini dapat menghubungkan seluruh penggunanya untuk saling berinteraksi dengan berbagi pengalaman,link,foto,bahkan video. Google plus saat ini merupakan salah satu jejaring sosial yang cukup digemari karena sangat mudah digunakan seperti facebook dan twitter.
Oke tadi cukup kita membahas tentang google plus itu sendiri, sekarang kita hanya akan berfokus pada notifikasi komentarnya. Jika anda bisa melihat lambang lonceng disekitar tombol logout blogger maka hal itulah yang akan kita bahas saat ini. Teknik/trik ini saya mbil sepenuhnya dari blog kang ismet aitu http://blog.kangismet.net/ dan juga saya gunakan saat ini.
Cara pemasangan
- Step 1 Buka blogger.com lalu pilih blog anda
- Step 2 Pilih template lalu edit html
- Step 3 Cari kode ]]></b:skin> dengan mengklik
CTRL +F - Step 4 Copy kode berikut lalu pastekan pada diatas kode ]]></b:skin> tadi
#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/AVvXsEiPF4e7skxq9q7A3AFSM8BufvsNy9y1fIrU5UfFqfBVjqlJ6Ia48XlEVGxbq3NMJKGKGGtPwzpzjiiUl4jkEX7QKMLHLhMY4EhHaCxN2EOd5jP1aj1-u2pNv53LATzY8DxUQx_i5yH3bfE/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/AVvXsEjWBdqd3DAaM8L9Yu9nUG9TnxUSZGInc3NxHxnuRHbvgsnTCe7vSyChItbgd3gqC7Yg6326rx5ULK3DiIvGfXvLKDqtkcQf80tDkNdKLZJD3szUUX-N3UWqeNsrtQgdu9l-bPJLJeU1Wm8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcw7cQVCyWSG_evEOohFZr9QPIc9NhCf2HCAt_W6gDx8EDdbyraIENmds8KRTtyZR36XkOvoeYz347n_mah3WKwKxL3iuOFvGFsTU2W-rJVF_38QwnyxvawSWxCOmIOgO0pqMLtU2noUo/s80-c/gravatar.png);
}
- Step 5 Cari Kode </body> lalu pastekan kode berikut diatasnya
<div id='cm-container'/> <div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbZr_vIOjBjcamPqG491RoqHuaeNTR9_6Vt3PB5Q21dWR7UbbQ4K5-mFKJMzLidbMIr9OqpPm58zOLnetrPq387cXsHwby1RewEQ2iAm2s-g7U0pN8ad-8_gihjTVmSBhyphenhyphenNqgqUnNRvNc/s1600/lonceng.png'/></div> <div id='cm-total'/> <div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipoH5Dz4EwDRVH9LL1UcPblYCnzWS4r1NTVR260p20vAdyxxEjopzQN0cUnlsQzCwmaoR0C0speEIko04k52ToLqtsiqFIScGwnARWZOR1khzy5rBjmvS70rcekTaNXD4aX9CW6L9DhrE/s1600/delete4.png' title='close'/></div> <script> //<![CDATA[ var originalTitle = document.title; var cm_config = { home_page: "http://blog.kangismet.net", 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'/>
- Step 6 Pastekan kode berikut diatas </head>
<script src='http://code.jquery.com/jquery-2.0.2.js'/>
- Step 7 Simpan lalu cek bog anda untuk melihat hasilnya
jika ada yang ingin agan tanyakan silahkan berkomentar .wassalamualaikum wr.wb.
Posting Komentar
gunakan kotak komentar ini dengan bijak tolong jangan melanggar beberapa aturan dibawah ini
-flooding
-menggunakan kata-kata kasar
-livelink
-sopan
- out of topic (OOT)