Cara Pasang Widget Recent Posts per Label dengan Satu Thumbnail

Cara Pasang Widget Recent Posts per Label dengan Satu Thumbnail - Widget recent posts atau artikel terbaru yang akan saya bahas ini akan menampilkan posting-posting terbaru berdasarkan label tertentu dengan thumbnail atau gambar hanya pada artikel yang paling baru atau yang teratas. Sebelumnya saya juga pernah membahas widget recent posts per label, tetapi tampilan pada setiap artikel dapat disertai dengan thumbnail atau gambar.

Widget recent posts per label dengan satu thumbnail ini cocok dipasang pada template blog yang mempunyai banyak kolom sidebar. Tampilannya bisa dilihat pada bagian bawah blog ini. Saat saya membuat artikel ini, widget tersebut masih saya pasang. Namun, tidak menutup kemungkinan suatu saat nanti saya bisa saja menghapusnya.

Jika Sobat tertarik untuk memasangnya pada blog, silakan simak langkah-langkah untuk memasang widget artikel terakhir dengan satu thumbnail di bawah ini.

1. Masuk ke akun Blogger Sobat.

2. Klik segitiga hitam kecil ("Opsi lainnya") >> "Template".

3. Klik tombol "Edit HTML" >> tombol "Lanjutkan".

4. Silakan cari kode ]]></b:skin> lalu letakkan kode berikut ini di atas kode tersebut.

img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}

img.label_thumb:hover{background:#f7f6f6}

.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}

ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

5. Selanjutnya cari kode </head> dan letakkan script berikut ini di atas kode tersebut.

<script type='text/javascript'>

//<![CDATA[

function labelthumbs(json){document.write('<ul class="label_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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHEPdTetmZ6VsRcqZUkhum4p-qbZUFmjMY0PCx75Hb2BuGqCj2squYObFHSJqouzlP1ebifSqeTy_WBYHaEksHaYbDu6Zw2hr29zvnGmBfts_V1DdZ4fXZdYDswTZ0V1VB4tjjtcq_DCdY/';}

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('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><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('');document.write(postcontent);document.write('');}

else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}

var towrite='';var flag=0;document.write('<br>');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">More »</a>';flag=1;;}

document.write(towrite);document.write('</li>');if(displayseparator==true)

if(i!=(numposts-1))

document.write('');}document.write('</ul>');}

//]]>

</script>

6. Klik tombol "Simpan template".

7. Kemudian pergi ke menu "Tata Letak".

8. Klik menu "Tambah Gadget" >> "HTML/JavaScript".

9. Silakan beri judul yang diinginkan kemudian masukkan  script berikut di kolom "Konten".

<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 1; i < json.feed.entry.length; i++)
 {
    for (var j = 1; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://johnyportal2.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://johnyportal2.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

• Ganti teks yang berwarna biru dengan nama label yang Sobat inginkan.
• Ganti teks yang berwarna merah dengan url blog Sobat.

10. Klik tombol "Simpan".

11. Klik dan seret gadget ke tempat yang Sobat inginkan.

12. Klik tombol "Simpan setelan".

Tampilan dari widget ini akan mengikuti pengaturan kode CSS sidebar pada template yang Sobat pakai. Kode CSS yang digunakan pada pembuatan widget ini hanya digunakan untuk mengatur tampilan thumbnail.

Panduan Untuk Memasang Widget Recent Posts

Panduan Untuk Memasang Widget Recent Posts - Kali ini saya mau berbagi informasi tentang memasang widget recent posts atau artikel terbaru. Widget ini akan menampilkan daftar posting terakhir blog. Pengunjung yang datang tidak langsung ke halaman utama (home page) dapat mengetahui beberapa artikel terbaru melalui widget ini.

Bila tertarik untuk memasang widget recent posts ini di sidebar blog, silakan Sobat lihat panduannya di bawah ini.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" >> "Tata Letak".

3. Klik "Tambah Gadget" >> "HTML/JavaScript".

4. Masukkan judul yang diinginkan.

5. Copy dan paste kode di bawah ini pada kolom "Konten".

<script>
//credit to hoctro
function rp(json) {
document.write('<ul>');
for (var i = 0; i < numposts; i++) {
document.write('<li>');
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);
var readmorelink = "(lagi)";
readmorelink = readmorelink.link(posturl);
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";
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 (showpostdate == true) document.write('# ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + '>> ');
document.write(posttitle + ' ');
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write('-> ' + postcontent + '...' + readmorelink);
}
}
document.write('</li>');
document.write('<hr width="100%" size="1" />');
}
document.write('</ul>');
}
</script><script>var numposts = 7; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script><script src="http://klikmunadi.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"> </script>

6. Tentukan jumlah artikel yang ingin ditampilkan dengan mengisi angka pada var numposts. Ganti klikmunadi.blogspot.com dengan alamat blog Sobat. Jika ingin menampilkan tanggal posting, ubah false pada var showpostdate menjadi true. Bila ingin menampilkan ringkasan artikel, ganti false pada var showpostsummary menjadi true.

7. Klik tombol "Simpan".

8. Klik dan seret widget ke tempat yang Sobat inginkan lalu klik tombol "Simpan setelan".

9. Selesai dan hasilnya kira-kira akan seperti di bawah ini.

Widget Artikel Terbaru

Menambahkan Widget Recent Posts per Label

Widget recent posts (posting terakhir) per label ini akan menampilkan daftar artikel terbaru berdasarkan satu label tertentu. Penampakannya bisa dilihat pada screenshot di bawah ini.

Recent Posts per Label

Cara menambahkannya di blog dapat disimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger.

2. Klik menu "Opsi lainnya" >> "Template".

3. Klik tombol "Edit HTML" >> "Lanjutkan".

4. Beri tanda contreng di kotak "Expand Template Widget".

5. Letakkan kode CSS berikut di atas kode ]]></b:skin>

img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}
.label_with_thumbs a{}
.label_with_thumbs strong{}

6. Kemudian cari kode </head> dan taruh kode berikut di atasnya.

<script src='http://adablogku.googlecode.com/files/lebelgambar.js' type='text/javascript'/>

7. Klik tombol "Simpan template".

8. Selanjutnya masuk ke menu "Tata Letak".

9. Klik tautan "Tambah Gadget" >> "HTML/JavaScript".

10. Beri judul yang diinginkan dan masukkan kode berikut di "Konten".

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script type="text/javascript" src="/feeds/posts/default/-/NAMALABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

11. Silakan dikustomisasi tampilan widget dengan mengubah kode yang berwarna merah. Bila ingin menampilkan elemen tertentu, ganti kode false menjadi true, begitu juga sebaliknya. Untuk NAMALABEL, isilah sesuai sewaktu label dibuat. Perhatikan huruf besar dan huruf kecil saat penulisan label pertama kali. Jika nama label terdiri dua kata atau lebih, maka ganti spasi dengan %20. Misalnya, ada label yang bernama Tutorial Blog maka NAMALABEL dalam kode di atas ditulis menjadi Tutorial%20Blog

12. Klik tombol "Simpan" jika sudah selesai.

Cara Membuat Widget Recent Posts atau Posting Terbaru

Assalamualaikum Sob, apa kabar di hari Senin yang cerah ini? Mengawali pekan ke-tiga di bulan Februari ini, ane mau berbagi tentang cara menambahkan border pada widget "Posting Terakhir" seperti yang terdapat di blog ini. Script widget "Recent Post" ini ane dapat dari folder BESTSEO-BLOGGER TEMPLATE.

Langsung saja, ane akan jelaskan sedikit tentang penambahan border di widget tersebut. Silakan disimak baik-baik Sob. Semoga mengerti dan bermanfaat.

1. Seperti biasa masuk dulu ke akun Blogger masing-masing.

2. Terus langsung saja menuju ke Rancangan >> Elemen Laman.

3. Klik Tambah Gadget yang ada di mana saja.

4. Selanjutnya, silakan pilih HTML/JavaScript.

5. Isikan judul sesuai keinginan Sobat di kolom "Judul"..

6. Kemudian copy dan paste kode di bawah ini di kolom "Konten".

<style>
img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:13px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}
</style>
<script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

7. Nah, agar widget tersebut mempunyai border serta background, maka ane menambahkan kode seperti di bawah ini.

.recent_posts_with_thumbs {height:auto;width:auto;padding:5px;background:#FFFFFF;border:1px solid #4169E1;}

• Untuk mengatur warna latar belakang, silakan ubah kode #FFFFFF dengan kode warna lainnya.
• Selanjutnya, ubah tebal border, jenis border, dan warna border pada border:1px solid #4169E1; sesuai keinginan Sobat. Kalau mau melihat sekilas tentang border, bisa mampir di sini.

8. Di mana kode untuk border di atas ditempatkan? Ane menaruh kode tersebut sebelum tag </style> sehingga hasilnya akan menjadi seperti di bawah ini.

<style>
img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:13px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}

.recent_posts_with_thumbs {height:auto;width:auto;padding:5px;background:#FFFFFF;border:1px solid #4169E1;}

</style>
<script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

9. Langkah selanjutnya adalah mengeklik tombol SIMPAN.

10. Seret kotak widget tadi ke tempat yang Sobat kehendaki.

11. Jangan lupa untuk menekan tombol SIMPAN kembali.

12. Silakan lihat hasilnya. Mengenai parameter yang lainnya, Sobat dapat mengubahnya sendiri dengan mengutak-atik kode widget di atas.

Widget Recent Posts atau Posting Terakhir.

Cara Memasang Widget Recent Posts dan Recent Comments

Banyak dari blogger yang memasang widget Recent Posts dan Recent Comments di sidebar blog mereka. Untuk memasang kedua widget tersebut, blogger biasanya menggunakan javascript. Namun, penggunaan javascript berpotensi memperlambat loading sebuah blog. Bila sebuah blog sulit diakses karena loading yang berat, maka ada kemungkinan akan ditinggalkan oleh para pengunjung.

Selain menggunakan javascript, ada cara lain yang dapat dilakukan yaitu dengan menggunakan alamat feed kita sendiri. Untuk Recent Posts dapat menggunakan feed posts. Sedangkan untuk Recent Comments bisa menggunakan feed comments. Berikut ini adalah alamat feed untuk Recent Posts:

http://NamaBlogAnda.blogspot.com/feeds/posts/default

Sedangkan alamat feed untuk Recent Comments adalah sebagai berikut:

http://NamaBlogAnda.blogspot.com/feeds/comments/default

Untuk NamaBlogAnda harus diganti dengan nama blog Anda sendiri. Misalnya, nama blog ini adalah klikmunadi, maka alamat feed untuk Recent Posts akan menjadi seperti ini:

http://klikmunadi.blogspot.com/feeds/posts/default

Sedangkan Recent Comments alamat feednya menjadi:

http://klikmunadi.blogspot.com/feeds/comments/default

Berikut ini cara pemasangannya di blog:

1. Masuk ke akun Blogger Anda.
2. Di halaman Dasbor, klik Rancangan.
3. Pilih Elemen Laman kemudian klik Tambah Gadget.
4. Di halaman Dasar-dasar, pilih Feed.
5. Masukkan alamat feed yang Anda inginkan, alamat feed Recent Posts atau Recent Comments.
6. Klik LANJUTKAN.
7. Isikan Judul, pilih berapa item yang akan ditampilkan, maksimal 5. Beri tanda centang di Tanggal Item, Sumber/pengarang item atau Buka link di jendela baru bila Anda menginginkannya. Silakan lihat di bawah untuk Pratinjaunya.
8. Klik SIMPAN.
9. Pindahkan posisi widget tersebut di tempat yang Anda inginkan.
10. Kemudian klik SIMPAN.
11. Klik Lihat Blog untuk melihat hasilnya.