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 ibarat halnya Notifikasi komentar ala Google. Notifikasi itu dilambangkan dengan icon lonceng dan bila Notifikasi tersebut di klik, maka Recent Post akan muncul.

Untuk pemasangannya, Anda dapat 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>, kemudian anda terapkan arahan 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/AVvXsEgIi1AeVXrY-SbWuJ46ZG4tRX4prXYOyJYth6bdLi42XzZrDYGCfFeOLzk5oZPRrjzFpFtkaYwIPXkXc5opbq57EJVK9NJSJzPNTsSZ3H_-KKWJ-hO7v5t2vtJSlWL-gTTmw7oDPGmDJlE/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/AVvXsEgIi1AeVXrY-SbWuJ46ZG4tRX4prXYOyJYth6bdLi42XzZrDYGCfFeOLzk5oZPRrjzFpFtkaYwIPXkXc5opbq57EJVK9NJSJzPNTsSZ3H_-KKWJ-hO7v5t2vtJSlWL-gTTmw7oDPGmDJlE/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 arahan </body> dan terapkan arahan 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/AVvXsEiROPmrQRMd_5DtlZbtVnmrBBg-Rhj7eFho7cM4PL3g8z_ffdtZUlVCqvehwruRiMpgFRHQSyo9FhxhsuGxfERE1p9fDjO4o6lzRamSoLgx405l_vd0WJdVoSEsiCBllaj4neyhXdEXJPs/s1600/tips-blog-baru.jpg"};}};dw+='<li>';dw+='<img alt="Recent Post dengan Sistem Notifikasi pada Blog ini menampilkan artikel terbaru milik kita Membuat Recent Post Dengan Sistem Notifikasi" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="Membuat Recent Post Dengan Sistem Notifikasi">'+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!

Share this post