Membuat Recent Post Dengan Sistem Notifikasi

Recent Post dengan Sistem Notifikasi pada Blog ini menampilkan artikel terbaru milik kita, namun diwidget ini ada penambahan dengan fitur pemberitahuan seperti halnya Notifikasi komentar ala Google. Notifikasi itu dilambangkan dengan icon lonceng dan jika Notifikasi tersebut di klik, maka Recent Post akan muncul.

Untuk pemasangannya, Anda bisa mengikuti panduannya di bawah ini step by step :

Cara Memasang Recent Post Dengan Sistem Notifikasi

Silahkan anda buka Editor template anda, selanjutnya anda cari kode ]]></b:skin>, lalu anda terapkan kode berikut diatas kode ]]></b:skin>

.notif-recent,.notif-closer{
cursor:pointer;
}
.notif-closer{
display:none;
}
.notif-recent:before{content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkzZewsDIVLvXOjFIy0eU444gVK2EniiFVS6VTcABXpDOn6xLZuyuTAhkq1c_J8Zt4r5BFEhvz0aCaYZrUIDhS1wVoEGMwqWFim4TL5Gz6Dm830Rjj_B_idpDSaRYK0sUpQddq3ubNxHk/s1600/lonceng2.png');padding:5px 6px 0 6px;border-radius:3px;display:block;position:absolute;top:15px;right:370px;opacity:.5;z-index:9999;transition:all .4s ease-out}
.notif-closer:before{content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkzZewsDIVLvXOjFIy0eU444gVK2EniiFVS6VTcABXpDOn6xLZuyuTAhkq1c_J8Zt4r5BFEhvz0aCaYZrUIDhS1wVoEGMwqWFim4TL5Gz6Dm830Rjj_B_idpDSaRYK0sUpQddq3ubNxHk/s1600/lonceng2.png');padding:5px 6px 0 6px;border-radius:3px;display:block;position:absolute;top:15px;right:370px;opacity:.5;z-index:9999;transition:all .4s ease-out}
.recent-scroll{
right:-380px;
height: 100%;
width: 300px;
position: fixed;
top: 0;
z-index: 9999;
background-color: white;
border-left: 1px solid #333;
padding-left: 5px;
overflow: auto;
transition: all .4s ease-out;
}
#recent-posts li{
padding: 10px;
list-style: none;
list-style-image: none;
}
#recent-posts img {
float: left;
margin-right: 10px;
border: 1px solid #999;
background: #FFF;
width: 50px;
height: 50px;
padding: 3px;
}

Selanjutnya anda cari kode </body> dan terapkan kode berikut sebelumnya

<div class='notif-recent'/>
<div class='notif-closer'/>
<div class='recent-scroll' id='recent-scroll'>
<div id='recent-posts'/>
</div>
<script type='text/javascript'>
//<![CDATA[
  $('.notif-recent').click(function () {
      $(this).hide();
      $('.notif-closer').show();
      $('.recent-scroll').css({
          right: 0
      })
  });
  $('.notif-closer').click(function () {
      $(this).hide();
      $('.notif-recent').show();
      $('.recent-scroll').css({
          right: -380
      })
  });
var rcp_numposts=7; //Jumlah artikel yang akan ditampilkan
var rcp_snippet_length=50;
var rcp_info='yes';
var rcp_comment='Comments';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJk1jq4Nrm43jESg9nP8tJNuNvrHOpYH5u9XJq6Al90ns88rdAkt6QE42mwmMBEjyn7CoeCpAdk0yYSuLz_Gx1kepRRYvyKu9WHOk5c7O4tCfjZu2ixuOlFMj0wskAY_FM5qc0BLiXLFk/s1600/tips-blog-baru.jpg"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_posttitle+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
//]]>
</script>

Selanjutnya anda simpan template dan lihat hasilnya.

Demikian Membuat Recent Post Dengan Sistem Notifikasi, semoge bermanfaat!

Bagikan Artikel ini