August 14, 2015

Membuat Widget Posting Terbaru Berdasarkan Label - Per Kategori

August 14, 2015

Membuat Widget Posting Terbaru Berdasarkan Label - Per Kategori
Cara Membuat Widget Posting Terbaru Per Kategori - Artikel Terbaru, Recent Posts, Berdasarkan Label di Sidebar Blog.

SEBENARNYA cara membuat widget posting terbaru berdasarkan label atau kategori di sidebar blog ini sudah CB share di posting ini, juga di blog yang lain: Cara Membuat Recent Post Berdasarkan Label di Blog. 

Kali ini CB share kembali dengan lebih lengkap dan detail sehingga ada solusi lain atau alternatif jika Anda gagal membuat racent posts per label ini di sidebar blog Anda atau di Footer Widget.

Contoh atau Demonya ada di sidebar blog ini --dengan Label "Template SEO Terbaru". Ini menggunakan kode recent posts per label dengan gambar thumbnail.

Membuat Widget Posting Terbaru Berdasarkan Label

Ada Membuat Widget Posting Terbaru Berdasarkan Kategori/Label tertentu, yaitu dengan memasukkan URL Blog dan Memasukkan kode HTML/Javascript.

CARA 1
1. Layout > Add a gadget > Feed
2. Masukkan url:

http://contohblognih.blogspot.com/feeds/posts/default/-/Label

3. Save!

CARA 2
1. Layout > Add a gadhet > HTML/Javascript
2. Masukkan (Copas) salah satu kode berikut ini, pilih saja, atau tes satu-satu, mana yang cocok menurut selera dan pasa dengan template blog Anda.
3. Save!

Berikut ini Kode-Kode Posting Terbaru Berdasarkan Label yang harus Anda Copas di langkah kedua cara 2 di atas:

KODE 1 : Posting Terbaru Berdasarkan 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 : 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://contohblognih.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://contohblognih.blogspot.com/feeds/posts/default/-/NAMALABEL?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 = 10;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://contohblognih.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>

Catatan: Perhatina yang warna merah
1. Ganti contohblognih dengan alamat blog
2. Ganti Label dengan Label Posting yang akan ditampilkan
3. Label Dua Kata gunakan kode pemisah %20 sehingga menjadi Nama%20Label

Nah itu dia Cara Membuat Widget Posting Terbaru Berdasarkan Label alias Artikel Per Kategori. Kodenya CB koleksi dari berbagai sumber, termasuk Help Blogger. Semoga work dan sukses! (http://contohblognih.blogspot.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

9 comments on Membuat Widget Posting Terbaru Berdasarkan Label - Per Kategori

  1. Boleh di coba nih artikel nya bagus banget

    ReplyDelete
  2. Makasih gan tutorial nya ini dia yang ane cari dan berhasil di terapkan

    ReplyDelete
  3. mas saya udah coba cara di atas munggunakan kode yg ke-5. dan work, namun setelah beberapa lama yg muncul hanya 1 postingan saja per label, padahal tidak saya ganti, saya buat 5 posting. kira2 dimana yg salah???

    ReplyDelete
  4. gimana cara menambahkan backgroundnya?

    ReplyDelete
  5. Makasih banyak gan,, alhamdulillah saya langsung berhasil dengan menggunakan kode ke 5,,, :) makasih ya,,, sangat bermanfaat

    ReplyDelete
  6. Wah, cara ini sangat pas buat menambah Page View blog sepertinya Terimakasi CB.

    ReplyDelete
  7. trimakasih banyak mas... udah berhasil saya coba...

    ReplyDelete

Contact Form

Name

Email *

Message *