Salam sahabat jitu, kali ini saya akan memberikan trik bagaimana cara membuat notifikasi/pemberitahuan komentar terbaru mirip seperti notifikasi pada google plus. Sebelumnya bagi yang bertanya-tanya apa sih maksud notifikasi pada google plus itu ?. Jika diperhatikan lebih teliti, setiap anda login akun google, tak lama setelah anda selesai login, pasti ada beberapa icon yang muncul di layar bagian kanan atas milik anda sahabat jitu, nah disana ada icon berbentuk lonceng, icon lonceng itulah yang merupakan icon notifikasi pada google plus yang memberikan anda update terbaru seputar akun dan perkembangan google. Setalah tahu apa itu notif google plus, pasti anda ingin mencoba membuat notif yang hampir mirip kan ? hanya bedanya notif ini akan anda gunakan pada blog anda sebagai pemberitahuan komentar terbaru pada blog anda. Langsung saja bagi anda yang tertarik untuk mencobanya sahabat jitu.
- Seperti biasa, silahkan sobat masuk ke dasbhor akun blogger , pilih menu template yang berada di tab kiri => Edit html
- Letakkan jQuery dibawah ini di atas
</head>, karena widget ini tidak bisa tanpa jquery.<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> - Kemudian letakkan juga 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/AVvXsEh5tH0Y83AcNUzM-sdC6lfkaq3grD8eJEBRUWFNYYhlKZAsvRHe_clzJmDa3n4ELl3KhDLJosc5T26Bzx_Bg8AIVfHUKDzDw-_Tjz_dApgOkt5NxXX8vYa0VO-TVtv8bL9n1O50d_wSxTc/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/AVvXsEhRmtvl4iv7ehYV6s_fok9rs0rRuVLnROWKN8gBnCY7WJGA7Hij_9ysuZMZRY_Ns16oTdrEXWLk9Ab5YawrJSv-W6pJjCftpaVnRiZQ1ziQrK4lSWUT06J2VwyC7dgHJbkfHH_iVWCWm0g/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/AVvXsEirrLIH3Beejp6dACE4hlWUI05F8D7TahZZwXWDS9ucuZUeQg1P8375vKCtdwcBFMPeO3dgSPWu4aGnsnKzgErZJyyBNUNkO8qELYCfDAa7HCUt9ADE6OErB369ZKJvvt10sHymCLWjmLg/s80-c/gravatar.png);
} - Supaya CSS diatas dapat berfungsi, maka 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/AVvXsEhzVVs5eyF-o_JefvWq30GHgpWjZA2xuaYI_-_9p9XjxvOgTK-EmYSA3UFBCiQY8fpXXQBDZCsq3xxqhAmwfaVsxJot82RKDx3S8uazNJ-NplGUG1zTu-nEwcXJU__jaH-PoUFyCvKoQv0/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifUGLi3H7-1hBFLCLFSCxFQ_jhiRo-tFV7Q1FJ5VovWLd_P_OySomQ6w3hKFDdjSwdbpudCmaaYIAIjHwMGfJcg00SAGd5Rt7WF90Ys-B-EZ6Xsivu-TXY_nAYUb7X5ST0cvlv2owtEpo/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
home_page: "http://masyadi.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'/> Jangan lupa untuk mengganti kode home_page nya dengan alamat website kamu sendiri.- Selesai, sekarang tinggal simpan template, dan lihat hasilnya ^_^
Sebagai acuan, saya sudah memasang notif model ini pada blog saya, penampakannya seperti gambar dibawah ini.
