CARA MEMBUAT NOTIFIKASI PADA BLOG SEPERTI NOTIFIKASI PADA GOOGLE PLUS

Selamat datang di blog R3N_DESIGN Digital.net dan salam sejahtera buat sobat blogger semuanya...

Sobat blogger terkhususnya blogger pemula (seperti saya) >_< Apakah sobat blogger tahu kalau di blog kita, kita bisa memasang notifikasi/pemberitahuan apabila ada orang yang mengomentari artikel kita layaknya yang tertera pada google plus (Lihat contoh gambar dibawah ini).

Tentulah menarik dong bila memang notifikasi demikian bisa terpasang pada blog kita. Karena sobat tidak perlu lagi harus melihat terlebih dahulu pada "Home Blog" untuk mengetahui apakah ada notifikasi/pemberitahuan masuk atau tidak. Cukup dengan memasang notifikasi seperti yang terletak di sudut kanan atas pada google plus saja sobat blogger tidak harus bingung lagi untuk mengecek blog anda apakah ada yang komentar atau tidak pada salah satu artikel yang sobat posting.

Okey,...untuk memasang notifikasi tersebut, simak tutorialnya dibawah ini:

1. Simpan kode JQUERY dibawah ini diatas kode </head>

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

Note: Abaikan saja kode JQUERY diatas jika di dalam Edit HTML template anda sudah ada.!

2. Next,...cari kode seperti ini ]]></b:skin> dengan cara taruh sembarang kursor pada tabel Edit HTML anda terus tekan ctrl+f pada keyboard.

3. Setelah ketemu kode ]]></b:skin> anda copy pastekan kode dibawah ini tepat diatas kode ]]></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/AVvXsEgwilOy_Th_JAiZf2Uc-1Hwpe52KpdaBrqXIer_6baK647cRR6YDQwKPVCstEK8eO5GRD6wGdbebHSNQHvEiJj2q7mupWrXLDHSrKL52tRPZ5S6jqDU1RrUH2NoSs4OAH0E4i8eWh_Q0hU/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/AVvXsEjkxXj6FIwoIt70hSRe4nhmxNFVAB9tcg9zFvsKVPsUFw6Kc4PlIus6AUz5NnqiFfa1ZXWIaBlmc2VjAUFFAAoA3JgHHK0cHPYL3Ji2BTbwshfMkX_ggjTgIm7YxP7gpgohHwpWearR8S4/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/AVvXsEjxRGjF-rAyScLJT-0NIHnnIcXHrG_aVFaAaiqRMmXN1pmIz5hZUaR3Zf_co5jeShBIZKZht-QN9ABO2pvwQhGpXpWcKf6Mgos1jNq3ddlxEsmJP7E0mXJ76D1u4fC3QcFwcT61we1uoK0/s80-c/gravatar.png); }

4. Next again,...cari kode </body> dan bila sudah ketemu, silahkan copy pastekan juga kode dibawah ini tepat diatas kode </body>

<div id='cm-container'/> <div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIVi4_2G_b1RJlwuK3ew-Qh4sZPe5azFnHmzGHmmlGuP4XrxfiPpizLvuUIxq6DWUTS1dPkgnv3lNl0dI3gib3yDxwgOYQq_FR1qR3TN3kPMxLaZz74EpvRyzHt8gC7u73ffJwGzvWX_M/s1600/lonceng.png'/></div><div id='cm-total'/> <div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5_VuE-Y9mZaYRLH_zaADoM-CgQ5CMSj7Rmc1IBxoV9V5mhbtwCpEZKF9Y3jYx4cEuNzDT79Ej3nrvX9yQzdKZzLv1msY0oAnFOeR7EQLGuqOLiy_E-m8jWcQDbpQvrz-Ctfh_yXvFKBc/s1600/delete4.png' title='close'/></div> <script> //<![CDATA[ var originalTitle = document.title; var cm_config = { home_page: "http://r3n-design-digitalnet.blogspot.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>

5. Ganti tulisan yang berwarna merah dengan alamat link blog sobat.

6. Simpan template dan lihat hasilnya...

Mungkin hanya itu saja untuk artikel kali ini, bila masih ada yang kurang dipahami silahkan tinggalkan komentar sobat semuanya dibawah ini.

TERIMA KASIH atas kunjungannya dan salam... :')

CARA MEMBUAT NOTIFIKASI PADA BLOG SEPERTI NOTIFIKASI PADA GOOGLE PLUS

No comments: