Cara Membuat Recent Post 1 Thumbnail Ala Blog TeknoPlug

Cara Membuat Recent Post 1 Thumbnail Per Label ini sangat membantu membuat tampilan blog menjadi lebih rame dan lebih informatif. Selain itu widget recent post bisa mendorong visitor betah di blog yang dikunjungi.

Cara Membuat Widget Recent Post



Pada beberapa ulasan Googelio mengenai desain blog selalu dikatakan bahwa cara membuat blog menarik/keren bisa dilakukan dengan berbagai cara.

Ya, memang benar. Membuat desain blog sehingga membuat blog menjadi keren/menarik bisa dilakukan dengan banyak cara. Diantaranya adalah dengan membuat/memasang widget. Salah satu widget blogger/blogspot paling sering digunakan adalah widget Popular Post.

Oke, sebelumnya mari kita ulas kembali mengenai widget. Apa itu widget ? Apa fungsi dan kegunaannya ? Bagaimana cara membuatnya ?

Widget adalah sejenis aplikasi tambahan yang dibuat untuk melengkapi fitur yang belum tersedia di template blog yang digunakan. Widget ini hampir sama kegunaannya seperti aplikasi Add On atau Plug in pada web browser.


Cara Membuat Widget Blog di Blogger

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.

Penggunaan widget pada blog terpisah dari template. Artinya untuk membuat atau memasang widget harus dengan menginstal atau menambahkan kode-kode pemograman dalam blog, misalnya kode CSS, kode HTML dan kode script.

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.


Cara Membuat Recent Post 1 Thumbnail


Selain menambahkan widget Popular Post, widget lain yang bisa mempercantik tampilan blog adalah widget Recent Post.

Widget Recent Post adalah salah satu aplikasi pendukung blog yang memuat informasi tentang judul dan artikel terbaru/terkini.

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.

Kelebihan Membuat Widget Recent Post :

Membantu visitor untuk mengetahui konten/artikel/postingan terbaru dari blog yang sedang dikunjungi
Membantu meningkatkan tampilan blog sehinga lebih dekoratif, elegan dan berciri khas.

Baca Juga :

Cara Membuat Recent Post Di Blogspot Dengan Satu Thumbnail/Gambar Per Label


Membuat recent post bisa dilakukan dengan menampilkan gambar artikel berbentuk thumbnail, fungsinya untuk mewakili isi keseluruhan dari konten artikel/postingan tersebut.

Namun oleh sejumlah blogger, dengan berbagai pertimbangan maka sering memodifikasi style recent postnya per label dengan 1 thumbnail saja, lalu diikuti daftar artikel terbaru hanya berupa judul saja tanpa embel-embel gambar.

Kelebihan memasang widget recent post per label dengan 1 thumbnail yaitu :

  • Mengurangi beban/kapasitas file template
  • Mengurangi beban waktu loading
  • Membantu meningkatkan nilai SEO sebuah blog
  • Membantu membuat blog lebih keren/menarik.
  • Bisa membantu visitor lebih fokus pada topik artikel yang dicari berdasarkan label konten/related articles (kumpulan artikel terbaru terkait dalam satu tema label)


Sebagai catatan, poin nomor 3 mengenai SEO sifatnya relatif karena SEO blog dipengaruhi berbagai faktor. Postingan kali ini cukup dibatasi pada topik membuat recent post dengan gambar per label untuk membuat blog lebih menarik.

Cara Membuat Recent Post Dengan Gambar Per Label Satu Thumbnail Ala Blog Teknoplug di Blogspot

Cara membuat widget recent posts unik dengan 1 thumbnail ala blog Teknoplug ini terinspirasi dari tampilan blog Teknoplug yang sederhana namun cukup elegan menurut Googelio.

Contoh gambar recent post 1 thumbnail per label bisa di lihat pada gambar postingan di atas, dimana Googelio mengcapture widget recent post tersebut di bagian footer.

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.

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>


dan klik save.

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 &#187;</a>


perhatikan tulisan berwarna biru adalah (url) atau alamat label blog sobat yang ingin ditampilkan, ganti sesuai dengan label yang sobat miliki di blog.

8. Klik save dan selesai.

Baca Juga :


Itu dia cara membuat recent posts unik dengan 1 thumbnail ala TeknoPlug, mudah-mudahan memiliki manfaat buat teman-teman blogger.
Labels: Blogging, Tutorial

Thanks for reading Cara Membuat Recent Post 1 Thumbnail Ala Blog TeknoPlug. Please share...!

19 Comment for "Cara Membuat Recent Post 1 Thumbnail Ala Blog TeknoPlug"

keren sob di tunggu come backnya :)

trims kunjungannya gan....follow juga ya, hehe....sip segera meluncur ke TKP

trims sudah berkunjung gan...

mantap nih, ane mw coba dlu gan, izin sedot.

sip gan....jangan lupa link sumbernya ya...gak usah pake eksternal link juga gpp yang penting nama blognya, hehehe...atuuurrrr..

keren recent postnya,kalau untuk recent post bergerak,ada tutorialnya gak gan ?

Ikut simak gan keren juga nih recent post nya

Komentar ini telah dihapus oleh administrator blog. - Hapus

info yang menarik dan mudah di pahami. saya bisa memperaktekkan info dari anda ini dengan mudah. Terimakasih

zie's for you - JalanJalan | Berkunjung | Silaturahmi

Mantap gan w coba dulu cpa tau berhasil mksh gan

http://triksgratis.blogspot.com

mantap ijin gunakan gan

ijin icip icip gan , thank buat share nya

Manteep sob untuk artikelnya, sangat membantu :)

Mantaap sekali gan artikelnya, sangat membantu sekali
Izin nyimak saja ya gan :)

Keren sob artikelnya, sangat bermanfaat sekali buat saya
Ditunggu info yang lainnya, izin nyimak saja ya :)
http://goo.gl/JFjoOh

Komentar ini telah dihapus oleh administrator blog. - Hapus

"Silahkan berkomentar dengan sopan, Tidak menggunakan kata atau kalimat yang mengandung SARA dan pornografi,tidak menggunakan link aktif/hidup dan spamming"

Back To Top