» » Cara Membuat Notifikasi Komentar Ala Google Plus

Cara Membuat Notifikasi Komentar Ala Google Plus - Askum , kemaren ada yang request entang bagaimana cara membuat notifikasi komentar ala google + , sebetulnya cara ini awalnya kang ismet dulu lah yang menemukannya . namun karena ada teman saya yang request notifikasi keren ini , maka akan saya buat triknya , meskipun terlambat :) oh ya demonya seperti dibawah ini .

Cara Membuat Notifikasi Komentar Ala Google Plus


Berikut Cara Membuat Notifikasi Komentar Ala Google Plus

1- Pertama sobat harus Simpan kode CSS ini di atas ]]></b:skin> atau </style>

#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/AVvXsEiTeKYZhuZhB2SgHBt3kMwz0CUxosBLSf0rCAgMAcqgrjY_rlVOjKJ0zNHbOTva0Lj-cR5NcUCE73y2DrOTlVGCZcw9E2mXG3TXPTAtJoDeJu0N2jAfAIfaBLclII0aL0VocU6nLgfJcGY/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/AVvXsEgzvLlCtym55N2dXtymqrUPJ9Hyo_KrlMrOMOAp-Vrv62nMgqUXuaVNZLBg5fEi4fip9gbiZgIL__PS3N1iSn6QRhGxE5hvofDOOqG5_TV6zLFLC16sW9OBQtI8fy_LrzUDrWpDAK7X6Zk/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/AVvXsEhlN-L96uIX32SDAl287_mokGHqiQtzB3LOLLSD4a-hUHKDwtKXcKEgBv1utloetnUM5-rBKNI_U0UGzkPLoiziYhHYmIAskPYdFuvQWGbtrZtxR4rbU6C6cJkHbEVUOOWV-FhkHlXZ1Yc/s80-c/gravatar.png)}

2- Setelah anda pasang kode diatas kemudian langkah selanjutnya  adalah sobat Simpan kode Java script ini di atas </body>


<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-XaU3h8fuWo2H175-OLMaM_ElQ-ifbwP-Hnwk-4bdUPwdLci2egylJJiGMjlt4R_anBKelcMgJ25XvrX_KM61t_glmUsI6b0ujAGSteoYtwlz9RiDy-czwt-avw3xDmXC-RQYoMoNvrE/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqgAb-PUmELcPOwQaHyIh7o3sxK3ulW54XzKQ8c4URTMBmQYEr0_dpH1yT2MsVy2z-q5vHBUqHU4lXBHRhr7N7jQVOZP8n2dlvtwmrDr-JAB3CebJTsnqq4buqYc6s_sRZ7u9rLJAI7U4/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>

3-Langkah yang Terkahir adalah Sobat Harus Simpan jQuery dibawah <head>

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

Oh ya , apabila di template sobat sudah terdapat jQuery maka lewati saja langkah diatas

4- Simpan Template dan lihat hasilnya . Gimana sob , mudahkan Cara Membuat Notifikasi Komentar Ala Google Plus , oh ya trima kasih banyak to +Kang Ismet

sumber : http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html

About Redi

Hi there! I am Hung Duy and I am a true enthusiast in the areas of SEO and web design. In my personal life I spend time on photography, mountain climbing, snorkeling and dirt bike riding.
«
Next
Newer Post
»
Previous
Older Post

No comments:

Leave a Reply