Cara Membuat Widget Postingan Pada Blog Berdasarkan Label Terbaru 2019

Cara Membuat Widget Postingan Pada Blog Berdasarkan Label Terbaru

Tampilan pada blog untuk dijadikan lebih menarik tentu perlu beberapa rancangan untuk menjadikannya lebih menarik, dan salah satunya yaitu membuat widget postingan berdasarkan label atau kategori. Bukan hanya untuk menjadikan tampilan blog lebih menarik, tetapi yang paling utama ialah untuk menjadikan para pengunjung bisa lebih mengexplore postingan-postingan yang ada di dalam blog kita. Tentu hal ini sangat baik sekali untuk menjadikan pengunjung merasa betah berada di blog kita, sehingga bisa lebih meningkatkan page view blog.

Dalam pembuatan widget postingan berdasarkan label, tentunya sangat mudah. Disini saya akan memberikan beberapa kode alternatif yang bisa Anda pilih sesuai dengan keinginan Anda sendiri, silahkan dicoba saja satu persatu mana yang cocok sesuai dengan tampilan blog Anda.


Membuat Widget Postingan Pada Blog Berdasarkan Label
Membuat widget postingan berdasarkan label sangatlah mudah, Anda tidak perlu memikirkan kode-kodenya karena disini saya sudah berikan semuanya, tinggal Anda memilih saja mana yang menarik dan cocok sesuai dengan template blog Anda, untuk langkah-langkahnya silahkan langsung disimak saja urainnya berikut ini :

1. Masuk ke Layout --> Add a gadget --> HTML/Javascript
2. Masukkan (Copas) salah satu kode berikut ini, silahkan Anda pilih salah satu mana yang cocok menurut selera dan yang pas dengan template blog Anda.
3. Save!

Berikut ini saya berikan kode-kode posting perbaru berdasarkan label yang harus Anda pasang pada widget blog Anda, silahkan pilih satu saja atau bisa Anda coba satu-satu  :

Kode 1 : Kode postingan terbaru bedasarkan label simple

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = false;
var showpostdate = false;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Label?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = false;
var showpostdate = false;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Label?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>

KODE 2 : Posting terbaru berdasarkan label simple

<div style="border: 1px solid rgb(000, 000, 000); height: 100px; overflow: auto; padding: 10px; width: 90%;">
<script style="text/javascript">
var numposts = 5;
var standardstyling = true;
</script>
<script type='text/javascript'>function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);}
if (standardstyling) document.write('</li>');}</script>
<ul><script src="http://uberbagi.blogspot.com/feeds/posts/default/-/LABEL?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script> </ul>
</div>

KODE 3 : Posting terbaru berdasarkan label tanpa gambar thumbnail

<script style="text/javascript">
var numposts = 5;
var standardstyling = true;
</script>
<script type='text/javascript'>function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);}
if (standardstyling) document.write('</li>');}</script>
<script src="http://uberbagi.blogspot.com/feeds/posts/default/-/LABEL?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script>

KODE 4 : Posting terbaru berdasarkan label + gambar thumbnail

<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:left;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/71374511518/recent-post-label-thumbnail.js"></script><script>
var numposts = 5;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 150;
</script><script src="http://uberbagi.blogspot.com/feeds/posts/default/-/LABEL?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script>

KODE 5 : Posting terbaru berdasarkan label + gambar thumbnail

<style>
img.recent_thumb {padding:1px;width:72px;height:72px;border:0; float:left;margin:0 10px 5px 1px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:72px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style>
<script>
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)
{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';
}
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write('<li class="clearfix">');
if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</i>');}
}
var towrite='';var flag=0;
document.write('<br><strong>');
if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='1 Comments') commenttext='1 Comment';
if(commenttext=='0 Comments') commenttext='No Comments';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}
if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Read more&#187;&#187;</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==false)
if (i!=(numposts-1))
document.write('<hr color="#d9f1fa" size=0.5>');
}document.write('</ul>');
}
</script>
<script>
var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;
</script><script src="/feeds/posts/default/-/LABEL?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script><div class="clear"/></div>

Keterangan :

Numposts = 5, maksudnya untuk menampilan hanya 5 postingan, silahkan bisa Anda ganti sesuai dengan keinginan sendiri.
Alamat URL silahkan ganti dengan alamat URL blog Anda, disini masih menggunakan alamat blog saya sendiri (http://uberbagi.blogspot.com).
Label silahkan ganti dengan nama label dari postingan yang ingin Anda tampilkan.

Bagaimana mudah bukan?, Ulasan mengenai cara membuat widget postingan pada blog berdasarkan label terbaru telah selesai, semuga ulasan ini bisa bermanfaat dan selamat mencoba. 

• Tweet
• Share
• Share
• Share
• Share