Tutorial membuat notifikasi komentar di BLOG ~ Syehbi Blog

Tutorial membuat notifikasi komentar di blog

Tutorial membuat notofikasi- Halo sobat blogger yang saya cintai dan saya hormati. kali ini saya akan share cara membuat tombol notifikasi di blog. untuk sobat yang masih bingung apa sih tombol notifikasi di blog itu, bisa liat di pojok kanan atas saya ada tombol seperti lonceng, nah itu lah kurang lebihnya seperti itu, cara ini saya dapatkan di mbah google ketika sedang asik browsing, oke langsung aja simak caranya

Pertama, anda harus login di blogger, jangan login di facebook oke,,
masuk ke halaman dashboard, kalo udah ketemu klik menu template yang ada di pinggir kanan, gimana ketemu? kalo udah langsung klik edit HTML,
cari kode </head> , untuk memudahkan pencet tombol CTRL + F di keyboard ente
lalu masukkan kode dibawah ini tepat di atas script head </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Lewati script diatas apabila blog sobat sudah memakai jquery, oke lanjuuuuuuuuuutttt
lalu cari script]]></b:skin>
kalo sudah ketemu pastekan script css dibawah ini tepat diatas ]]></b:skin>
/* 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/AVvXsEg6FNS6wciVQU8i7tlvM2Z3-quGnfUfLzD3fwLs3tV9B2zZ6gVKdbXBKE1sVdKRfRovjd2UveIE2mcfEUox4K28FdckoFsSjB_-vw_2PZJ4Izbs7YW5TCSq4gXy52qD961fzwbmVUa9DXM/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/AVvXsEhSuPGYBlolvtiUyP_AnDvvNUSApK1iGL3tFm7ADuIjBCNV4lMQxQDIVg8ILXkRRLHAWbMP7mRt0FLoIYD5yFq5faFB0mQ4GySfdNVr4-xHetkcOtJiSDdbhPsqXb0YlN_dGahWDDcDkTw/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/AVvXsEgXpjzL7QXnlUBJHKJ47HvT3Nd3nwiTpF3fOaJYuluo0j2vaNI1YxRZLgZB-mNguOdxezmTvMddur7oLLCxAQCC7gthMRAghxj0GJd0GqtqwmYpwWToDdQJOhiELqb-aQke8wLh3fTqkzw/s80-c/gravatar.png); }
lalu pastekan script dibawah ini di atas script </body>
<div id='cm-container'/> <div id='notif' title='Notifikasi'> <img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim_GMePnbEI0ESltpggwWlSKqYk3Ca-kMDNVUCUEeCa0CP6AiEaRixCdjXiTXL3W_xVAifWKzBcz5Bh-g5NR28VQWetxkXB19Ckbol59V7qlTYbyweuoSo0IAobgRH8ZdtY7z_5KUHK8Y/s1600/lonceng.png'/></div> <div id='cm-total'/> <div class='close-notif'> <img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJUh-Y9eGmbWjNwF_MPFa5WS1gFrO5swv6KV667GuosfyDt5WVejNP66gTv38FHmvBHCJNfRbGvH5wMBR9BpeAhmj0A0aNThIGKqZhVh_ThCkZDcj64QcM8u4UIb0hUDXSjtUUe7vmcKM/s1600/delete4.png' title='close'/></div> <script> //<![CDATA[ var originalTitle = document.title; var cm_config = { home_page: "<b>http://www.berbagi-infosh.blogspot.com.com/</b>", max_result: 3, 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'/></li> </ol>

Keterangan : script yang ditulis becetak Tebal www.berbagi-infosh.blogspot.com, silahkan sobat atur sendiri dengan link blog sobat, dan untuk max result : 3 itu adalah batas komentar yang akan ditampilkan di notifikasi,

Jika sudah selesai, Klik SAVE/simpan, jika sobat tidak mengerti bahasa inggris wahahhahaha.

Sekian artikel dari seorang newbie ini hahha, tentang Tutorial Membuat notifikasi Komentar Di BLOG semoga bermanfaat, dan kalo ada yang mau ditanyakan silahkan berkomentar di blog ini, jangan di facebook yak hahahaha. TERIMA KASIH.