Cara Mudah Membuat Notifikasi Seperti Googe Plus
Salam blogger, sudah lama saya absen tidak aktif posting, dan kali ini saya akan membagikan cara membuat notifikasi google plus dengan mudah dan bisa anda praktekkan pada blogger anda. jujur saja cara ini saya dapatkan dan saya kutip dari suber kangismet yang benar-benar memahami tentang kode html, dan saya disini hanya memperluas saja agar mudah untuk mendapatkan informasi ini.
Kembali pada topik kita semula untuk membuat notifikasi seperti google plus adapun caranya sebagai berikut.
1. cara yang pertama simpan jquery di atas </head>
2. cara kedua simpan kode CSS di bawah ini di atas kode ]]></b : skin> atau </style>
3. Cara yang ke tiga simpan kode di bawah ini tepat di atas </body>
Langkah terakhir yaitu klik simpan dan lihat hasilnya, setiap ada orang yang berkomentar pada blog anda maka akan muncul pemberitahuan pada notifikasi tersebut, selamat mencobanya dan sukses.
Kembali pada topik kita semula untuk membuat notifikasi seperti google plus adapun caranya sebagai berikut.
1. cara yang pertama simpan jquery di atas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>lewati langkah di atas jika di template anda sudah ada jqueri
2. cara kedua simpan kode CSS di bawah ini di atas kode ]]></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/AVvXsEgXzGFOM4MVA2nUCq-2AodDzyQ3n9kDVVY2AVOO__6ly3O93kLsRz1ePR7d2sTEj2N6C5UQ9_Va8tbyAukAdHoGttZEomLyPSehLnIu88J-AEAqb_3yIU0fBQsiHw30XMQxo1HwFWIJ5e0/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/AVvXsEhhgEp1oFHjQeaIiMn0OB-xJlBa682o7EMvKezBxExDw0BhRZomuxv5buuJiu7GjRc-BAqLqWR0xRkNQbR9_tDzy-VK0TWCi5rrgKA-OctmAlY_yZS4t3wBQPH6U9cGeAes62b2jmpSyps/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/AVvXsEjvUwhVmKbiP3XQkoRkgKWUHyjQo2zth5Ba1qe19jawuFGGBa3qfE9q530x8rdAAH6XYRbmOe6x_ZkA03MsZ8BkHop7_WP_EsuTtTUQRLzn2OfNZ42UTpwv1wzE80PvFwUJJt5z1V-pmA4/s80-c/gravatar.png);
}
3. Cara yang ke tiga simpan kode di bawah ini tepat di atas </body>
<div id='cm-container'/>Ganti situs yang ada di dalam kode script berwarna merah dengan site anda
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJnyRtpX8mTv2OKSmCUUYFwAi4yE493jCgMkv5fKzUkzQ_JRShyphenhyphenID7RFpoLcyRtYfjGoFvoBht_laUfs3aO6TcIMoT4_aHgAjcDhGiAbHxMVtDy3S2mYyW9jldn3BuX9sTPC_5twxwCU/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHNQ8pdZQERj7xzo3s2Fsyr4uE3h10252HiLwSB1MgQuYw1EehzVXTNvxg2FHRlp1MKVw8SPblxUfSXIFMZz75ldV2DjLoU62gkZ1tpeG3qXSbLGH4zzZQKNb4hfj8h98cVOLTIoplIQM/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
home_page: "http://www.gooblogi.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>
Langkah terakhir yaitu klik simpan dan lihat hasilnya, setiap ada orang yang berkomentar pada blog anda maka akan muncul pemberitahuan pada notifikasi tersebut, selamat mencobanya dan sukses.
