Cara Membuat Notifikasi Seperti Google Plus

Cara Membuat Notifikasi Seperti Google Plus - Kali ini ngescript ingin membahas tentang membuat notifikasi seperti Google Plus yang biasanya kita lihat pada pojok kanan atas pada header Google+ ,dengan memasang notifikasi seperti itu kita dapat mengetahui komentar terbaru.

Dengan memasang notifikasi juga dapat mempercepat respond kita jika ada orang yang berkunjung dam memberi kan komentar,kita sebagai pemilik blog tersebut dapat dengan cepat membalas komentar pengunjung dan nilai dimata pengunjungpun blog kita tidak terlihat mati dengan merespont komentar mereka secara cepat.

Seperti ini lah tampilan notifikasi Google Plus yang sudah ngescript tandai pada pojok kanan atas milik Google Plus kita,disini kita akan memasang notifikasi serupa pada blog pribadi kita agar kita bisa melihat komentar terbaru dan membalassnya dengan cepat dan mudah.

ngescrip sudah mengaplikasikan notifikasi seperti Google Plus dan ini adalahpenampakannya pada blog ngescript

Terlihat belum sempurna karena notifikasi tertimpa oleh menu laman namun ngescript akan segera merapihkan bagian menu dengan notifikasi tersebut agar terlihat lebih menarik dan rapih agar tidak terlihat berantakan.

Langkah memasang kode script pada Edit HTML sebagai berikut :

• Masuk pada bagian Dasboard blog.
• Pilih Template - Edit HTML.
• Copy paste kode ini diatas </Head>, jika kode ini sudah terpasang pada template lewati saja dan lanjut pada langkah berikutnya.

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

• Kemudian copy kode ini diatas ]]></b:skin> atau diatas </style>.

/* 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/AVvXsEg2FRKTQGWesE_jtW6xTHgnw7mkwOFksOdH6TdNYFSBkg0QzKEJoxVX8UUpThxG8VuJ-E321yX88HLpW0wTlO_JfSczNJTiwhoXWVdYlcWDVhGyMNZ7gcPC-YL6u68wKoikSaJAhuId0y8/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/AVvXsEiLKESMK4ZyDP47lzltXg5ajR3r4jSvRXFKeWqpnmsE2nWojlr7FdMxa5JOvEmoFTAqMgFmggMQqQziYC6YWIFpwvU1sEPbYOIpD18ZGkYCXaYQd7udxszFG8ysGre4OghzZjSH3HbRjAY/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=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] { content: url(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);}

• Copy kode terakhir terahir diatas </body>.

<div id='cm-container'/><div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGj7no9pAHjNAT4yE-TKohnxu8UtrZZUCf0DCMvlVHhcS6ojJvGxtdqGcm5lAVLYQElMlMEWwbwH0kJ6OqqR6jV_kZ7WZqMBYht5NMBwR8VCPrKyNsy2G8IcFen8HZ9iEqpjD9x-sxzzk/s1600/lonceng.png'/></div><div id='cm-total'/><div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHdPs3jQczTk8JTAsNnSG8eUXt5OwZxTah52GbPIges2EZXiiHebefZ9RzDm0eUtzH2QO-JFhM-f3TkOzIANHLBtNIWDTAWC0I2cHc3VxFsD-xKTybwOx19bGSkQsZ4_adE9jhVg94RxA/s1600/delete4.png' title='close'/></div><script>//<![CDATA[var originalTitle = document.title; var cm_config = { home_page: "http://ngescript.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><script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js' type='text/javascript'/>

• Simpan template / Save dan lihat hasilnya pada pojok kanan atas blog milik kita.

Cukup mudah untuk di praktekan pada blog masing-masing agar respont kita terhadap pengunjung blog yang berkomentar lebih siap siaga lagi sehingga pengunjung yang bertanya akan mendapatkan jawaban lebih cepat dari blogger lain yang hanya mementingkan diri sendiri.

Semoga tutorial ini dapat bermanfaat dan memberikan tambahan ilmu untuk kita semua dan untuk kedepannya pasti ngescrip akan terus memberikan informasi yang lebih bermanfaat untuk teman semua,jika ada pertanyaan dan saran bisa berkomentar dengan kolom yang sudah disediakan dibawah. Terima kasih

Selam

ngescript

Related Posts:

Tweet