Artikel copy paste berkualitas mengenai semuanya yang baru dan bermanfaat untuk di share ulang

Cara Pasang Recent Post Thumbnail Menurut Label

Recent Post Thumbnail Label

Cara memasang recent post thumbnail label di blog. Sebelumnya CPB pernah Posting Artikel tentang Cara Membuat Recent Post Jquery nah kali ini CPB akan ngasih tutorial mengenai recent post menurut label.
Sobat blogger pasti sudah tidak asing lagi mendengar kata-kata recent post atau artikel terbaru atau mungkin sudah bosen mendengar kata-kata tersebut atau mungkin sobat blogger beranggapan artikel ini sudah basi,sudah terpendam bersama artikel-artikel yang sudah basi lainnya.Tetapi apa mungkin sobat blogger yang baru ataupun newbie tahu tentang artikel semacam ini..??saya kira tidak.Oleh karena itu saya ingin memberi artikel ini buat yang masih newbie termasuk saya sebagai admin blog ini pokoknya yang baru tahu artikel kaya gini aja dech..hehe.

Recent post ini menurut saya lebih lengkap dari pada yang lainnya karena fiturnya yaitu menampilkan artikel terbaru dengan thumbnail (gambar) dan juga kita bisa mengatur artikel terbarunya berdasarkan label atau kategori artikel.saya rasa widget blog ini cocok buat template yang banyak menampilkan artikel terbaru dengan kategori yang berbeda.

Untuk lebih jelasnya cara memasang recent post dengan thumbnail berdasarkan label ini sobat bisa ikuti langkah-langkah di bawah ini.

1. LOGIN Blogger
2. Didasbor sobat pilih RANCANGAN/DESIGN >> 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>

apabila nama labels atau kategori lebih dari satu kata maka penulisannya disisipkan %20.contoh : Tutorial blog maka di label penulisannya Tutorial%20Blog dan seterusnya apabila sampai 2 kata lebih.
11. kemudian pilih SAVE

Untuk menambah artikel terbarunya berdasarkan kategori lainnya sobat cukup COPAS kode no.10 dan sesuaikan nama ketegorinya.

Selamat mencoba dan sukses selalu. Cara memasang recent post thumbnail label di blog

copy paste

Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

7 comments

  1. Anonim16.36

    wah gak bisa dicopy nie,gmna mau praktek kalau gk bisa dicopy scriptnya???gak mungkinkan diketik 1 per 1.

    BalasHapus
  2. trimakasih artikelnya sob,sangat bermanfat dan alhamdulillah berhasil saya praktekin,salm kenal and happy blogging.

    BalasHapus
  3. Bagus ini tips nya, izin copas ya,,, yang popular pos ada gk,, biar seragam heee

    BalasHapus
  4. scripnya gak bisa di copy paste....payah....

    BalasHapus
  5. yes...., matur nuwun gan...., mohon do'a restunya untuk toko online saya di www.yukitagaya.com

    mudah-mudahan laris manis dan barokah

    BalasHapus
  6. kok, gx mau,...
    apa ada yang salah, ya ,..,?

    BalasHapus
  7. Nice tutorial gaan, mantap

    BalasHapus

thx for coming... :) please leave your comment

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

Google+ Followers

 
Posts RSSComments RSSBack to top
© 2011 Copy bin Paste ∙ Designed by BlogThietKe
Released under Creative Commons 3.0 CC BY-NC 3.0 Pakar SEO | Parfum Cinta | gamis murah | Kanopi Murah Semarang

Wedding Organizer Semarang Murah