Cara Membuat Recent Post Berdasarkan Label dan Thumbnail



Cara Membuat Recent Post Berdasarkan Label dan Thumbnail
Cara Membuat Recent Post Berdasarkan Label dan Thumbnail - Pada tutorial kali ini, Saya akan berbagi cara membuat recent post berdasarkan label dan thumbnail. Widget ini akan otomatis menampilkan update posting kita hanya pada label/kategori yang tentunya bisa sobat pilih sendiri. Contoh bisa sobat lihat pada gambar di samping ini.

Nah kalo sobat blogger tertarik buat masang widget ini, gampang koq. Tinggal ikuti tutorial berikut ini…

1. Seperti biasa, login ke akun blogger sobat
2. Pergi ke tab rancangan >> edit html
3. EXPAND TEMPLATE WIDGET
4. cari kode ]]></b:skin>.

(*Gunakan F3 di keyboard untuk mempermudah pencarian)
5. Copy paste kode di bawah ini sebelum kode No.4

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. Scroll ke bawah dan temukan kode </head>
7. Copy paste kode di bawah ini sebelum kode No.5

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

8. SAVE template.sampai disini belum selesai.
9. masih di menu DESIGN >> PAGE ELEMENTS >> ADD GADGET >> HMTL/javaScript
10. Masukkan kode di bawah ini kedalam contents


<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/-/NAMA LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
11. Untuk kategori/label yang berspasi seperti Belajar SEO Blogspot, Blog SEO dsb, ganti lah spasi dengan kode %20. Contoh penulisan lengkap:
http://daw-xp.blogspot.com/feeds/posts/default/-/Belajar%20SEO%20Blogspot
atau,
http://daw-xp.blogspot.com/feeds/posts/default/-/Blog%20SEO
12. Jika sudah selesai masukkan kodenya, jangan lupa sobat blogger masukkin judul/title widgetnya.
13. Klik Save / Simpan.
14. Selesai! Semoga bermanfaat…


Jika ada yang kurang dimengerti, silahkan tanyakan dengan tinggalkan komentar.

Selayaknya Dibaca:

Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

Tidak tahu cara berlangganan? Klik disini

Related Post:

Anda sedang membaca artikel tentang Cara Membuat Recent Post Berdasarkan Label dan Thumbnail dan anda bisa menemukan artikel Cara Membuat Recent Post Berdasarkan Label dan Thumbnail ini dengan url http://daw-xp.blogspot.com/2011/04/cara-membuat-recent-post-berdasarkan.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Recent Post Berdasarkan Label dan Thumbnail ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Recent Post Berdasarkan Label dan Thumbnail sumbernya.


28 comments

zugamedia.blogspot.com July 9, 2011 at 10:46 PM

bos scripnya g bekerja

Reply delete
Deny Arya Wiranata August 30, 2011 at 7:14 PM

@zugamedia.blogspot.com : sudah saya edit sob kodenya, silakan dicoba lagi. :)

Reply delete
TV Bunda September 16, 2011 at 10:37 PM

Thanks Info yang Bagus saya sudah cobanya,,http://tvbunda-go.blogspot.com/

Reply delete
download-31.blogspot.com October 27, 2011 at 2:36 PM

ini yang saya cari2,,,,,

tp untuk menampilkan label secara random gmn caranya ia mas admin,,,????


makasi sebelumnya

salam,,,,,,

Reply delete
Dimas November 10, 2011 at 6:07 PM

Sayangnya Cuma Gak Auto...!!!

Reply delete
Deny Arya Wiranata November 10, 2011 at 6:19 PM

@download-31.blogspot.com oh itu mending langsung saja menggunakan random post, silakan klik disini

Reply delete
Deny Arya Wiranata November 10, 2011 at 6:19 PM

@Dimas kalau mau auto lebih baik ke artikel saya satunya klik disini.

Reply delete
Yan Chriestiano November 20, 2011 at 2:57 AM

mksh bossku sukses www.radiohotstation.com

Reply delete
download-31.blogspot.com December 6, 2011 at 4:48 PM

@Deny Arya Wiranata

wah,,,keren nie gan,,,!

mampir ke blog ane ea,,,hehehehee
makasi dah buat tutorialnya,,,,

Reply delete
My Blogs|D'roni December 31, 2011 at 5:58 PM

Makasih Tutor nya Sob..
Akhir nya ketemu juga di Lapak Sobat..
oh,iya..Izin Copas ya..akan Saya Link balik kok..
Kunjungi balik Blog Saya yang sederhana ini ya...

Reply delete
Clommot Fatan January 25, 2012 at 11:26 AM

Thanks, Scrip ini membantu saya membuat blog kelihatan lebih oke.

Reply delete
Haji dan Umroh Murah Gratis March 19, 2012 at 3:15 PM

Alhamdulillah sekarang blog saya tambah keren jadi mirip seperti website pro.
Makasih banget infonya. Semoga mas terus sukse dengan blog nya. Amin

Reply delete
Zamrud Hijau March 24, 2012 at 11:47 PM

Info yang baguz sekali utuk disimak.....
Bermanfaat sekali untuk saya....

Mohon kunjungan baliknya yaa....
Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

( http://zamrudhijau.blogspot.com/ )

Reply delete
kaos couple June 16, 2012 at 11:58 PM

uda coba n berhasil. tq gan. kalo mau ubah menjadi tampil link tanpa gambar dan ringkasan gimana ya gan?

Reply delete
weome August 17, 2012 at 10:28 AM

author: tolong liat tulisannya. yg salah adalah poin ke 7, mohon koreksi lagi

Reply delete
SEBARBOLA.net October 4, 2012 at 9:19 PM

TQ YA SOB..UDAH ANE COBA DAN BERHASILL

Reply delete
LaNo Saputra October 4, 2012 at 9:19 PM

ini dia yang ane cari tq ya sob..

Reply delete
IniKabarKu March 15, 2013 at 1:06 PM

Nice article.. thanks for sharing..

Reply delete
Rizabler March 28, 2013 at 9:02 PM

kok gak work gan?
cek rizabler.blogspot.com

Reply delete
vina May 30, 2013 at 11:29 PM

mantap gan,

Reply delete
Andi May 30, 2013 at 11:30 PM

Perlu dicoba nihh

Reply delete
Ryandra November 19, 2013 at 11:30 PM

mantab

Reply delete
hezty tatawarna December 25, 2013 at 5:46 PM

yay , makasii infonya ... :D

Reply delete
hezty tatawarna December 25, 2013 at 5:47 PM

wow , bisa ya ternya berdasarkan label , hoho

Reply delete
Gudang Game PS2 ISO | PS3 | PC January 15, 2014 at 6:14 AM

terima kasih tutorial nya
http://www.duniagame.info/2014/01/winning-eleven-2014-extrime-season.html

Reply delete
agung April 6, 2014 at 9:23 PM

nanti kalo sudah jadi warnanya biru gitu ya gan kayak digambar, kalo warna yang lain gan ada gak? warna putih yang simple gitu gan.

Reply delete
Masterz Datz August 15, 2014 at 4:20 AM

Thx for share..

Game, Software, Internet Gratis www.master-datz.com

Reply delete
rename setiadi August 26, 2014 at 2:12 PM

We are the World's Largest Online Football Agent and Trusted. The transaction process is safe, fast and comfortable is our commitment to make our loyal customers even more pleased to recommend our services to their fellow colleagues. Agen Bola Casino Poker Togel Online Terpercaya | Agen Casino Online

Reply delete

Post a Comment

Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).

 

Site Info

  • Fortuner SUV Terbaik
  • Commonwealth Life Perusahaan Asuransi Jiwa Terbaik Indonesia
  • Cincin Kawin
  • PageRank

    Followers

    back to topReturn to top of page Copyright © 2012 | Blog SEO DAW - XP | Tutorial Blogspot | Belajar SEO Blogspot - Privacy Policy Template by Hack Tutors