Membuat widget Recent Post di blog sangat membantu membuat tampilan blog menjadi lebih menarik dan lebih informatif. Salah satu widget Recent Post yang bisa dipasang di blog adalah Recent Post 1 Thumbnail atau hanya menampilkan satu gambar saja.
Menambahkan Widget Di Blogger
Membuat widget merupakan salah satu upaya yang dilakukan para blogger maupun web developer untuk memberikan informasi umum dari blog tersebut, sekaligus memberikan kesan menarik bagi pengunjungnya. Sehingga wajar saja bila banyak blogger yang ikut kelas online terbaik untuk meningkatkan skill mendesain blognya. Misalnya Harisenin.com atau Dumet School.
Widget blog adalah sejenis aplikasi tambahan yang dibuat untuk melengkapi fitur yang belum tersedia di template blog yang digunakan.
Cara membuat widget biasanya melalui penambahan fitur secara otomatis melalui dashboard blog. Pembuatan widget menggunakan kode-kode tertentu yang bertujuan untuk menampilkan atau menayangkan fitur-fitur informatif dalam blog sehingga mempermudah visitor mengakses informasi di dalamnya. Baca juga: Kriteria Template Blog SEO Friendly.
Pada Blogspot/Blogger dan Wordpress, widget bisa ditambahkan dan diinstal dengan otomatis. Pada beberapa template blog berplatform Blogspot/Blogger juga sudah tersedia fitur widget ini melalui script yang sudah dimasukkan oleh editornya di dalam form template HTML.
Selain menambahkan widget Popular Post, widget lain yang bisa mempercantik tampilan blog adalah widget Recent Post.
Bagaimana Memasang Widget Recent Post 1 Thumbnail
Widget Recent Post adalah salah satu aplikasi pendukung blog yang memuat informasi tentang judul dan artikel terbaru/terkini. Membuat recent post bisa dilakukan dengan menampilkan gambar artikel berbentuk thumbnail, fungsinya untuk mewakili isi keseluruhan dari konten artikel/postingan tersebut.
Widget Recent Post memiliki bermacam-macam style atau gaya. Di Blogger/Blogspot sebenarnya sudah tersedia fitur Recent Post ini. Tapi oleh sejumlah blogger, widget recent post dimodifikasi dengan berbagai style/gaya. Bahkan style widget Recent Post dari Wordpress (WP) bisa dimodifikasi di Blogger/Blogspot sehingga sekilas orang akan mengira template tersebut adalah template berplatform Wordpress.
Baca Juga:- Cara Membuat Blog Menarik Dengan Memasang Widget Popular Post
- Cara Membuat Widget Popular Post Keren Animasi 3 Dimensi
Cara Membuat Recent Post Satu Thumbnail Pada Setiap Halaman Label
Dengan berbagai pertimbangan para blogger seringkali memodifikasi style recent postnya per label dengan 1 thumbnail saja, lalu diikuti daftar artikel terbaru hanya berupa judul saja tanpa embel-embel gambar.Cara membuat widget recent posts unik dengan 1 thumbnail ini terinspirasi dari tampilan blog Teknoplug yang sederhana namun cukup elegan menurut Googelio. Memangnya seperti apa sih penampakan blog TeknoPlug ? Biar gak penasaran, coba cari saja di Google dengan kata kunci "teknoplug" (tanpa tanda kutip).
Pada dasarnya membuat recent post per label dengan 1 gambar ini mudah tapi susah. Mudahnya karena bisa dicopy paste. Susahnya karena membutuhkan keterampilan menata lay out dan ukuran ruang yang akan ditempatkan widget ini, dan keahlian mengedit kode.
Ini disebabkan karena setiap blog memiliki ukuran lebar halaman dan sidebar yang berbeda tergantung template dan selera, sehingga harus jeli menghitung lebar, tinggi dan jarak widget yang akan dibuat dan dipasang.
Baca Juga:
- Cara Membuat Widget Popular Post Berwarna Bikin Blog Lebih Menarik
- Cara Memasang Backlink Blog SEO
- Cara Ping Test Kecepatan Internet
Langkah-Langkah Memasang Widget Recent Post di Sidebar/Footer
1. Pertama tentunya sobat harus sign in dulu ke akun (bagi pengguna blog Blogger.com tentunya pake akun Google ).
2. Setelah sign in, masuk ke design, dan klik template, masuk ke edit HTML.
3. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
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}
perhatikan kode berwarna biru adalah ukuran lebar dan tinggi icon/thumbnail yang sobat inginkan tampil di blog sobat.
4. Masih dalam halaman edit HTML , cari kode </head> dengan menggunakan tombol F3 di keyboard komputer atau laptop sobat, dan masukkan kode berikut ini di atasnya.
<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='http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';}
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>
5. Kemudian masuk ke halaman lay out, akan muncul jendela yang berisi daftar widget yang disediakan Blogger.com. Klik Add Gadget >> HTML/Javascript.
6. Copy paste kode berikut ini ke dalamnya :
<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 = 125;</script>
<script type="text/javascript" src="/feeds/posts/default/-/budaya%20indonesia?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://teknoplug.com/feeds/posts/summary/-/Internet?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://teknoplug.com/search/label/Internet" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>
8. Klik save dan selesai.
Itu dia cara membuat recent posts unik dengan 1 thumbnail ala TeknoPlug, mudah-mudahan memiliki manfaat buat teman-teman blogger.