Cara Membuat Recent Post 1 Thumbnail Per Label Di Sidebar Mirip TeknoPlug

02 Juni
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


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.

Cara Membuat Widget Recent Post


Memasang Widget Recent Post 1 Thumbnail Per Label Di Sidebar


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 Recent Post Satu Thumbnail Pada Setiap Halaman Label Mirip Blog TeknoPlug


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.

Langkah-Langkah Memasang Widget Recent Post 1 Thumbnail 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>


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.

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

Share this

Related Posts

Previous
Next Post »

19 Comments

Write Comments
Anonim
5/7/13 11:58

keren sob di tunggu come backnya :)

avatar
5/7/13 12:27

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

avatar
7/7/13 02:16

trims sudah berkunjung gan...

avatar
8/7/13 13:22

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

avatar
8/7/13 13:33

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

avatar
20/10/13 13:21

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

avatar
26/10/13 08:26

Ikut simak gan keren juga nih recent post nya

avatar
22/11/13 20:29 Komentar ini telah dihapus oleh administrator blog.
avatar
17/1/14 22:46

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

zie's for you - JalanJalan | Berkunjung | Silaturahmi

avatar
17/12/14 21:38

Mantap gan w coba dulu cpa tau berhasil mksh gan

http://triksgratis.blogspot.com

avatar
7/3/15 18:01

mantap ijin gunakan gan

avatar
7/3/15 18:09

ijin icip icip gan , thank buat share nya

avatar
17/3/15 08:24

Manteep sob untuk artikelnya, sangat membantu :)

avatar
28/3/15 09:29

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

avatar
9/4/15 13:24

Makasih gan untuk informasinya :)

avatar
16/4/15 08:36

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

avatar
1/2/17 07:17 Komentar ini telah dihapus oleh administrator blog.
avatar