Blogspot yang membahas tentang Tutorial Blogger, Animasi Blogger, Google Adsense, Game Blogger, Seo Blogger, Template Blogger, TV Online, Dan Tools Blogger

Saturday, 8 February 2014

Cara Membuat Label Tertentu Dengan Thumbnail

Cara Membuat Label Tertentu Dengan Thumbnail - Blogger Update. Asslamualaikum wr.wb. Tadi saya sudah posting mengenai Template Fastest Magz V3, tapi anda pasti kebingung membuat label tertentu nah saya akan membagikannya disini. Membuat Label Tertentu Dengan Thumbnail memperindah tampilan blog anda, karena itu saya juga memakainya untuk memperindah tampilan blog saya. Yuk lihat screenshoot Label Tertentu Dengan Thumbnail

Langkah-Langkah Membuat Label Tertentu Dengan Thumbnail
1. Buka Blog Anda >> Edit Tempalate.
2. Cari kode ]]></b:skin>, lalu masukan kode dibawah ini diatas kode ]]></b:skin>.

/*** Featured Categories ***/
     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 {} 
3. Cari kode </head>, lalu masukan kode dibawah ini diatas kode </head>.

<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>&#160;
4. Simpan template.
5. Pilih tata letak >> tambahkan gadget >> HTML/javascript.
6. Masukan script dibawah ini ke dalam gadget HTML/javascript.

<script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = true;var displayseparator = false;var showcommentnum = false;var showpostdate = true;var showpostsummary = false;var numchars = 80;</script>


<script type="text/javascript" src="/feeds/posts/default/-/Tutorial%20Blogger?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Note :
var numposts = Berepa banyak post yang ditampilkan.
var showpostthumbnails = Menampilkan gambar.
var displaymore = Menampilkan fitur baca selengkapnya.
var displayseparator = Menampilkan pemirsa.
var showcommentnum = Menampilkan berepa banyak komentar.
var showpostdate = Menampilkan waktu kapan posting.
var showpostsummary = Menampilkan ringkasan posting.
var numchars = 80 >>  Berapa banyak kata ringakasan posting.

Ganti tulisan merah dengan label anda sendiri. (contoh : Tutorial%20Blogger )

7. Simpan dan selesai.

Jika ada pertanyaan silahkan ditanya dikotak komentar saya akan menjawab pertanyaan sobat blogger sebisa saya. Sekian dari saya Mochammad Fikri yang menuliskan artikel tentang Cara Membuat Label Tertentu Dengan ThumbnailSimak juga artikel saya yang lainnya : Cara Membuat Emoticon Di Komentar Blogger, Cara Memasang Iklan Disamping Kiri dan Kanan Blog MelayangCara Membuat Iklan Melayang Di Bawah Blogger Dengan Tombol Close, dan Cara Membuat Artikel Yang Berkualitas SEO FriendlyTerima kasih sudah berkunjung.

Dilarang untuk meng-copas artikel ini kecuali menuliskan sumbernya
DMCA.com

Cara Membuat Label Tertentu Dengan Thumbnail Rating: 4.5 Diposkan Oleh: Mochammad Fikri

26 komentar:

  1. keren gan, nice post,,.. thanks infonya!!

    ReplyDelete
    Replies
    1. Emang keren ini memperindah tampilan blog kita.

      Delete
  2. dari pada penasaran langsung ke TKP aja, caranya mudah tuh kayanya..
    follback jng lpa sob..

    ReplyDelete
  3. sukses banget, tapi ada yang kaga bisa di klik linknya, bisa bantu gak?
    http://tutorial4yu.blogspot.com/

    ReplyDelete
    Replies
    1. Kurang tau gan mungkin struktur templatenya lain tapi banyak yang berhasil pakai cara ini :D

      Delete
  4. ane terimakasih gan mampir gan udah saya coba sukses
    http://situsgaruda.blogspot.com/

    ReplyDelete
    Replies
    1. Senang bisa berbagi, sering-sering yah mempir ke blog kecil ini :D

      Delete
  5. keren gan mampir di blog Q,,
    http://artikeloppowae.blogspot.com/

    ReplyDelete
    Replies
    1. Iyah kalau pasang ini blog kita tambah keren pastinya, sering-sering yah mampir ke blog kecil ini :D

      Delete
  6. tambah keren sob di tambah widget ini....
    cek http://serupting.blogspot.com

    ReplyDelete
  7. punya saya gk bisa muncul2 labelnya pusiang......

    ReplyDelete
    Replies
    1. Coba lebih teliti dan coba ulang atau taruh nama blog anda, nanti saya bantu

      Delete
    2. iya ni kk mohon bntuanx...ni email aq : saty.laras@gmail.com
      ntu jg email fb aq
      thx

      Delete
  8. siip mas bermanfaat it's work form my blog

    http://www.multi-tutor.tk/

    ReplyDelete
  9. mantap nih tutorialnya, sangat membantu. pas banget lagi oprek template

    ReplyDelete
  10. mampir juga di sini mass http://sonytutorial.blogspot.com/

    ReplyDelete
  11. Kalau cara membuat Label 2 kolom seperti gambar di atas, bagaman caranya mas? soalnya saya sudah ikuti tutorilnya, tapi masih 1 kolom...

    ReplyDelete
  12. klo membuat halaman yg isinya postingan artikel untuk label tertentu gmn caranya mas? mohon pencerahan :)

    ReplyDelete
  13. oh jadi kayak punyanya mas sugeng ya gan.. trima kasih gan

    ReplyDelete
  14. beberapa properti Bentrok dengan jquery mas, sehingga script ini tidak berjalan dengan baik. Saya harapkan author bisa mengembangkannya lagi ._.

    ReplyDelete
  15. Keren gan hasilnya, terimakasih sukses terus

    ReplyDelete

 
notifikasi
close