Post Game

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 .



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/AVvXsEgp_jcwY8CAEx3YlTWGjWlbDKdhyphenhyphennXd9ZcyXO3uhqiiPJzrqQRCmFJNH67f-LchScYwNP_7xAxtiOOjlS37YsPxmObztQRjou7vlovn5_Viuwp13AwL9CdMcvwBJoVC4QVUcx0NfpbyMg8/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/AVvXsEg1dW5HAIA9Fwxgm-FFTqpTUfmwJtTUHvNQ9AIA9dzT-mjvc5PwVW2Zc9GSKJluC0KJxpLTEdFirsvxPkupdMdFyEqpcEUxq-uYCSzKW_LGZu-kDhUPh34qCdlg7djG4x7kSKs1KTfOV48/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/AVvXsEhNSCnugb9SFflanyXjSfhA0QH3ihpfnUs5fCbV7YwoM1I1mlt-kiX5SwsjAHWt98fXs-tqJQyd_MKJyfRRspA4GStgfZJms040XGHbvz5RVIgvvptGOyW27fDE_a4Bwyeh_O8gOsiTc2Q/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=http://1.bp.blogspot.com/-wrJzEwB1V3U/UoQktvRDCxI/AAAAAAAAGEA/jYcRiXTyOFg/s1600/lonceng.png/></div>
<div id=cm-total/>
<div class=close-notif><img alt=close src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLeUB8dSKgOwgrm6H1LgCnGJoXc24bgooSw1gHlekUKO_c5TYpR5Mm-BXJTh2GO5OnIJWNn0jlEzGyUJr4xu3kA4v5UyoQE3NII0CsAdJeE553j36G1DJ99hsGRdkSzfnV1tUPeuLGbjQ/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= otal-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/>

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

Go to link Download

Cara Membuat Navbar Keren Ala Lord Kaisar Blogs

Kali Ini Saya Akan Membuat postingan Tentang Cara Membuat Navbar Keren Ala Lord Kaisar Blogs
Oke Langsung Saja Caranya
1.Log In Ke Blogger
2.Pilih Template
3.Edit Html
4.Pilih Lanjutkan
5.Cari Kode ]]></b:skin> (Gunakan Ctrl + F Untuk Mozila Firefox)
6.Masukkan Kode Berikut Ke Ata Kode ]]></b:skin>

 #Kaisarnavbar{font-family:Salsa;font-weight:Bold;font-size:11pt;color:#eee;
background:url(/favicon.ico) no-repeat scroll 10px center rgba(0,0,0,0.75);border:2px groove RED;z-index:100000000;top:1px;left:1px;right:1px;position:fixed;border-radius:7px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-box-shadow:0 0 10px red;-webkit-box-shadow:0 0 10px red;box-shadow:0 0 30px red;padding:3px}
#Kaisarnavbar:hover{font-family:Salsa;font-weight:Bold;font-size:11pt;color:#eee;background:url(http://lordkaisar.blogspot.com/favicon.ico) no-repeat scroll 10px center rgba(0,0,0,0.75);border:2px groove RED;z-index:100000000;top:1px;left:1px;right:1px;position:fixed;border-radius:7px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-box-shadow:0 0 10px red;-webkit-box-shadow:0 0 40px red;box-shadow:0 0 40px red;padding:3px}
#Kaisarnavbar .kaisarnavleft{float:left;font-weight:400;padding:2px 38px}
#Kaisarnavbar .kaisarnavright{float:right;padding:2px}
#KaisarTbar{width:330px;height:30px;margin-bottom:-8px;font-family:Salsa;color:orange;background:rgba(0,0,0,0.5);z-index:999;bottom:1px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-box-shadow:0 0 10px red;-webkit-box-shadow:0 0 10px red;box-shadow:0 0 30px red;padding:2px}
#KaisarTbar .left{float:left;text-align:center;font-size:13px;font-style:normal;font-weight:700;color:red;padding:2px 10px}
#KaisarTbar .right{float:right;color:red;text-align:center;font-size:0;font-style:normal;font-family:Salsa,Arial,Verdana;font-weight:700;background:0;padding:2px 10px}
#KaisarTbar:hover{width:1000px;height:80px;margin-bottom:-15px;margin-left:12px}

7.Eits,Jangan DiSimpan Dulu,Ada Lagi Nih,Masukkan Kode Berikut DiAtas Kode </body>

<div id=Kaisarnavbar style=position:fixed;>
<span class=kaisarnavleft>
Isi Dengan Teksmu
</span>
<span class=kaisarnavright style=font-family:Salsa;>
Isi Dengan Text/Widgetmu
</span></div>

Nb :  Gnti Kode Berwarna Merah Menjadi Kata2/Widget Yg Anda Suka
Oke Sekian Dulu Dari Saya,Smoga Bermanfaat

Go to link Download