Cara Awan

Cara Awan Membuat Widget Recent Post Dengan Tampilan Notifikasi Google + | kali ini saya akan mengshare tutorial blogger yaitu membuat notifikasi recent komen ala google plus yang saya dapat dari blogwalking dan pencarian di search engine google dan saya menemukan cara nya tampilan nya seperti gambar SS yang saya ambil dari blog saya sendiri.

Atau kalian bisa melihat sendiri di bagian pojok kanan atas.
Langsung ke langkah langkah nya.
Perhatikan Dengan Seksama .!

Langkah 1 : Sisipkan kode jQuery di atas </head>

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

Lewati jika sudah terdapat jQuery di template agan !

Langkah 2 : Tambahkan CSS berikut di atas kode ]]></b:skin>

/* Notifikasi Komentar----------------------------------------------- */#cm-total { position:fixed; top:14px; right:0; width:188px; text-align:left; z-index:9999; cursor:pointer; } 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; } 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; } position:fixed; top:20px; right:180px; z-index:9999; height:22px; width:19px; opacity:.4; cursor:pointer;}#notif:hover { opacity:1; } opacity:1;}.close-notif { position:fixed; top:92px; right:20px; z-index:9999; cursor:pointer; display:none; } 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; } 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/AVvXsEhKpgzA5AjRMPB9Nt4-LNg3ELxl0nysXpdqZzSOjT_BlDJGdSEk1UeWX-1wnoN6ZuoSMB_3VlyEsKggCetFsnoGbrSAV4rPgyGy0KDYAMaLRkfpF6aX4JFzys8_bu1cqTLbUbLz-ReLLpU/s1600/arrow-notif.png'); position:absolute; top:-14px; left:196px; } content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKpgzA5AjRMPB9Nt4-LNg3ELxl0nysXpdqZzSOjT_BlDJGdSEk1UeWX-1wnoN6ZuoSMB_3VlyEsKggCetFsnoGbrSAV4rPgyGy0KDYAMaLRkfpF6aX4JFzys8_bu1cqTLbUbLz-ReLLpU/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; } 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; } margin:0 auto; padding:0; font-size:11px; text-align:left; font:normal 12px Arial;}.cm-outer ul{ margin-bottom:5px; } 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; } 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/AVvXsEgPnvj6Z1-34xdKyzwgsOWmhVg1-G2TDpHut5WcpcUXGOuZ8sVuD5OsEbP6IFToPM284W0CeUbJBuBg_JR5NhG9pDULBxl1VTdwDp6Oq546u_wDgYypqnepPUwzieh3FWkZW7w6fHGlDCw/s1600/anon80.png') no-repeat 50% 50%; overflow:hidden; border-radius:3px 0 0 3px; position:absolute; top:0; left:0; } display:block; float:left; background:#ececec url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPnvj6Z1-34xdKyzwgsOWmhVg1-G2TDpHut5WcpcUXGOuZ8sVuD5OsEbP6IFToPM284W0CeUbJBuBg_JR5NhG9pDULBxl1VTdwDp6Oq546u_wDgYypqnepPUwzieh3FWkZW7w6fHGlDCw/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); }content: url(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);}

Langkah 3 : Simpan kode dibawah ini diatas kode </body> 

<div id='cm-container'/> <div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQiw8I5hxcmKGVq0pQ3VqLWc9KAp-pEtG49XGgs8RRzo6si42WVFusGnlVyE6NvRhp4o_xxRHb_3fcudoP-aAdAh3qcwopJKaUg1vtT7qBE5aQaJyOTU1Izoe_vkadBNffiXDmXtln4Zk/s1600/lonceng.png'/></div> <div id='cm-total'/> <div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimU4tlQnvwLaRy6j9cqDd2ZCpyN4HGpxYkPqfYUDNfAxfhgZc6vEieasrVAlg5B3t5qmnnuDgKoY0qa071_a0IWU5086g_B888rBtcsP-jhSW8PrbLL-b5S8u5nAv4dEoUMFW5SggsJ10/s1600/delete4.png' title='close'/></div> <script> //<![CDATA[ var originalTitle = document.title; var cm_config = { home_page: "http://cara-awan.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'/>

Selesai.!
Jika masih bingung bisa bertanya lewat kotak komentar.!
Selamat Mencoba.!