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 Notifikasi Sederhana Dengan CSS3

Halo pengunjung blog hexhozord , apa kabarnya nih ? masih pada puasakan haha jangan batal ya kan masih hari kedua. Kali ini admin ingin share tutorial blogging nih gan yaitu Cara Membuat Notifikasi Sederhana Dengan CSS3.

3. Setelah itu cari kode <body> atau <body dan copas script HTML dibawah ini

<div id=notifjo>
<span>
<h2><b>Notifikasi :</b>
<p>1. Text Hexhozord</p>
<p>2. Text Hexhozord.blogspot</p>
<p>3. Text Hexhozord.blogspot.com</p>
<p>4. Text Hexho-zord.blogspot.com.</p>
</h2>
</span>
</div>

4. Sekarang tinggal agan ganti teks yang berwarna hijau itu dengan teks agan
5. Silahkan edit CSS nya sendiri ya gan kalau mau terlihat beda

Edit CSS Memerlukan ketelitian dan keahlian  gan jadi kalau agan merasa tidak mengerti jangan coba - coba mengeditnya karena bisa fatal akibatnya.

Sekarang agan cek blognya , nah udh munculkan notifnya. Bagaimana simple bukan ? nah silahkan terapkan diblog agan sendiri yaa. Semoga bermanfaat terimakasih. Tutorial ini dibuat oleh DJogz admin hanya share kembali.

Go to link Download