Recent Post Dengan Sistem Notifikasi merupakan sebuah widget yang menampilkan artikel terbaru namun saya tambahkan dengan fitur pemberitahuan seperti halnya Notifikasi komentar ala google plus yang dulu sudah pernah saya share, Mungkin dengan penambahan fitur seperti ini bisa lebih menghemat ruang dan tidak membuat blog menjadi berantakan.
Recent Post Dengan Sistem Notifikasi
Salin CSS berikut diatas
]]></b:skin>
atau
</style>
.notif-recent,.notif-closer{
cursor:pointer;
}
.notif-closer{
display:none;
}
.notif-recent:before{content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-yBoJlUbaV-tWVnAwZbyDBpo3Cf-AJ54k-L2_zDCL24H2gQEdAQ9Mm2TmcMFCNqaD5dNuRM-6wz_yv5nw2wxW7qNyCfcBXJecDkDUvS8D1pwG9sCDvtqE5h8ql5G25MerCdJGkjCdZgU/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/AVvXsEj-yBoJlUbaV-tWVnAwZbyDBpo3Cf-AJ54k-L2_zDCL24H2gQEdAQ9Mm2TmcMFCNqaD5dNuRM-6wz_yv5nw2wxW7qNyCfcBXJecDkDUvS8D1pwG9sCDvtqE5h8ql5G25MerCdJGkjCdZgU/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;
}
Dan pasang script berikut diatas tag </body>
<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)+"…";};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/AVvXsEgNmVLtQu0AfQy3zfafwdXmAeSvJEf54Ko_ryV4bmrri3kUZSXe92Qmz__uqOySds_3-f7QsN9jW_eveqgDr19EiQ5T8MvOdtgmFVwxQuQlMzmToWlDePhqT9wpe96pJLOqJRzpy5_OYGE/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>
Simpan Templatemu.
Sebenarnya saya sudah share widget artikel terbaru ini namun hanya berbentuk widget biasa saja tanpa adanya fitur notifikasinya.
Dimohon kerjasamanya untuk tidak menyertakan link aktif dalam komentar. Lihat penjelasan mengenai tata cara berkomentar Disini