Membuat Postingan Terbaru (Recent Post) Berdasarkan Label

Kumpulan Cara Membuat Widget Postingan Terbaru (Recent Post) Berdasarkan Label di Sidebar Sesuai Kategori - Setelah membuat artikel atau postingan pasti kita ingin agar postingan tersbut tampil di sidebar, bila pengunjung yang datang bisa meliat postingan baru yang telah di buat. Sebenarnya sangat mudah untuk membuat Artikel terbaru menrut Label yang akan di tampilkan disidebar.

Sebelumya admin sangat sering membagikan desain grafis, animasi, BBM Mod,  dll, namun sudah lama tidak membagikan seputar Blog, yang dimana pemilik blog biasana sangat ingin tampilan blog/websitenya keren unik dan cantik, salah satunya dengan cara menambahkan sebuah Recent Post / Artikel terbaru / Postingan Terbaru, dengan adanya Widget itu maka pengeunjung akan tau bahwa blog/ websoate ini masih aktif karena selalu ada artikel terbaru yang update.

Maka dari itu admin fathonan akan membagi Cara Membuat Postingan Terbaru Sesuai Label, Untuk tampilan Recent Postnya akan ada beberapa variasi, jadi anda dapat memilih variasi mana yang cocok dan bagus untuk di terapkan di blog anda. Admin akan menyertakan Screenshot hasil nya, sehingga anda dapat melihat mana yang menurut anda lebih pantas untuk di terakpan.

Artikel Terkait :

Cara Membuat Widget New Post Slide (Bergerak)

Membuat Formulir Pembelian untuk Online Shop

Cara Menampilkan Widget HTML/JavaSsript di Blog Versi Mobile

Cara Membuat Recent Post / Artikel Terbaru Berdasarkan Label :

Cara #1 :

• Masuk ke Akun Blogger Anda.
• Tata Letak > Klik "Tambahkan Gadget"
• Scroll kebawah dan Cari Feed, Lalu Klik
• Masukan URL Label anda.

http://www.fathonan.xyz/search/label/Photoshop

• Simpan

Cara #2 :

• Masuk Ke akun Blogger Anda.
• Tata Letak > Klik "Tambahkan Gadget" > Klik "HTML/JavaScript"
• Pastekan Kode dibawah ini.

Kode #1 : Postingan Terbaru / Recent Post Berdasar Label Simple

<script type='text/javascript'>

var numposts = 3;

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 : Postingan Terbaru / Recent Berdasar Label Post Scroll

<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://www.fathonan.xyz/feeds/posts/default/-/Photoshop?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script> </ul>

</div>

Kode #3: Postingan Terbaru / Recent Post Berdasar Label Bullet List

<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://www.fathonan.xyz/search/label/LABEL?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script>

Kode #4 : Postingan Terbaru / Recent Post Berdasar 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 = 3;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://fathonan.xyz/feeds/posts/default/-/LABEL?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">

</script>

Kode #5 : Postingan Terbaru / Recent Post Berdasar 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>

Code #3 : 

• Masuk akun Blogger anda
• "Tema" atau "Template"
• Pastekan Code di bawah ini Tepat di atas ]]></b:skin>

/* Grid Recent Post by Label */

ul.recent-by-tag{overflow:hidden;padding:0 15px}

.recent-by-tag img{width:100px;height:100px;margin-right:10px;margin-bottom:5px}

.recent-by-tag li{width:82px;margin-bottom:10px;margin-right:12px;text-align:center;list-style:none;padding:11px 18px;background:#f1f1f1;border:1px solid #ddd;float:left;line-height:1.3em!important}

.recent-by-tag li a{list-style:none;color:#555;font-weight:400;font-size:13px!important;width:1-0px;overflow:hidden;text-overflow:ellipsis;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.recent-by-tag li a:hover,.recent-by-tag li:hover a{color:#f35858!important}

.recent-by-tag .btndown{display:none}

@media screen and (max-width:640px) {ul.recent-by-tag{padding:0;margin-left:10px}}

@media screen and (max-width:480px) {ul.recent-by-tag{margin-left:0}}

• Lalu Pastekan Juga Code di bawah ini tepat di atas </head>

<!-- Recent Post Berdasarkan Label -->

<script type='text/javascript'>

var numposts = 3;

var showpostthumbnails = true;

var showpostdate = false;

</script>

<script type='text/javascript'>

//<![CDATA[

function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.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!=""){l=d}else l="http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="recentlist">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');document.write('<a class="btndown" href="'+i+'" target ="_blank">Download</a>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}

//]]>

</script>

<script>

document.write("<script src=\"/feeds/posts/default/-/Label?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag\"><\/script>");




</script>

• Setelah Sudah Beres Semuanya.
• Klik "Tata Letak"
• Klik "Tambahkan Gadget"
• Klik "HTML/JavaScript"
• Pastekan Code di bawah ini

<script>

document.write("<script src=\"/feeds/posts/default/-/LABEL?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag\"><\/script>");

</script>

Catatan : Ganti Pada Warna Merah

• Ganti fathonan dengan alamat blog anda.
• Ganti Label dengan Label postingan yang akan di tampilkan.
• Bila ada kesalahan coba cek pada Label bila anda menggunakan Label dua kata contoh "Tips Trik" maka anda Pisah dengan %20 menjadi "Tips%20Trik"

Sekian Mengenai Kumpulan Cara Membuat Postingan Terbaru (Recent Post) Berdasarkan Label , bila anda yang ingin di tanyakan jangan sungkan sungkan untuk berkomentar dan bertanya.

Share this

Jeni

Tag : Blog