mas template

Memasang Kategori tententu dengan Thumbnail di Blog

Selamat sore temen-temen blogger, tidak terasa postingan saya kali ini adalah postingan saya yang ke-100 untuk kategori Tutorial Blog. Ngomong-omong tentang kategori, artikel kali ini berhubungan dengan kategori, yaitu cara memasang kategori tertentu dengan thumbnail atau gambar. Tips memasang kategori tertentu plus thumbnail ini baru saja saya dapat dari blognya Kang Rohman dan sudah saya praktekkan di blog saya yang lain dan berhasil. Kang Rohman memang hebat ya, bisa nulis artikel sebanyak itu, bisa bikin template lagi. 


Biasanya fitur yang muncul disertai thumbnail adalah related post atau recent post dan itu tutorialnya sudah banyak banget beredar di kalangan blogger, tapi kali ini adalah fitur kategori tertentu, misalnya kalau di blog ini kategori tutorial blog, wordpress, joomla, dan lain-lain. Jika temen-temen penasaran, bisa dilihat disini. Baiklah, kita langsung saja pada langkah-langkah pembuatannya :

  1. Login ke blogger dengan ID anda.
  2. Klik Rancangan.
  3. Klik tab Edit HTML.
  4. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
  5. Carilah kode ]]></b:skin>, copy lalu paste kode berikut persis 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 {}
  6. Carilah kode </head>, copy lalu paste kode berikut persis 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>
  7. Klik tombol SIMPAN TEMPLATE.
  8. Langkah pertama selesai.
  1. Klik tab Rancangan/Design.
  2. Jika masih dalam posisi tab Elemen Laman, silahkan klik terlebih dahulu tab menu Elemen Laman.
  3. Klik Tambah Gadget untuk menambahkan gadget baru.
  4. Setelah muncul jendela baru, klik tanda plus untuk HTML/JavaScript  
  5. Copy script dibawah ini, lalu paste pada kolom yang tersedia. Beri juga judul yang sesuai dengan yang anda inginkan. Namun sebelumnya anda harus mengubah tulisan yang di beri warna merah dengan nama kategori yang di inginkan.
    <script type='text/javascript'>var numposts = 6;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

    <script type="text/javascript" src="/feeds/posts/default/-/Top Lyrics?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

    maskolis 
  6. Klik tombol SIMPAN
  7. Langkah kedua Selesai.
Keterangan :
  • var numposts = 6;
  • var showpostthumbnails = true;
  • var displaymore = false;
  • var showcommentnum = false;
  • var showcommentnum = false;
  • var showpostdate = false;
  • var showpostsummary = true;
  • var numchars = 60;
Kode berwarna merah adalah kode yang bisa temen-temen edit, true berarti tampilkan, false berarti jangan di tampilkan, 60 adalah jumlah karakter, dan 6 adalah jumlah thumbnail yang ditampilkan Anda bisa ganti sesuai keinginan.

Terima kasih kepada Kang Rohman yang telah memberikan tutorial gratisnya, semoga Kang Rohman tambah laris manis dan terus menulis untuk blogger pemula seperti saya ini, ya Kang? Selamat mencoba dan semoga bermanfaat.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

29 comments:

  1. Gimana caranya biar jadi horisontal mas?

    ReplyDelete
  2. keren,,,,, tp giman cara nya di bikin 1 gambar aja trus di bawahnya cuma judul2 aja.............. saya sudah coba dan berhasil.... tp saya ingin tampilanya diatas cuma muncul 1 gambar trus diikuti dibawahnya hanya jusul2 materi/posting
    ..
    mungiin contohnya serperti http://johnysimple-magazine2.blogspot.com/

    pada witget Entertainmet... 1 gambar dibwahanya judul postingan yg mengikuti

    ReplyDelete
  3. Mantap2...!!
    Ane suka bgt...
    makasie ya mas...

    ReplyDelete
  4. Hi,

    I want to use this but is it possible to add facebook recommend button below each post thumbnails?

    ReplyDelete
  5. Hi,

    I want to use this but is it possible to add facebook recommend button below each post thumbnails? Can you share the code on how to do it?

    ReplyDelete
  6. thanks materinya bermanfaat banget..

    ReplyDelete
  7. akhirnye nyang gw cari" nyelip disini....., ijin sedot gan....tengkyu.

    cekidot: www.shoesshopgalery.com

    ReplyDelete
  8. Waduh sayangnya gak ada versi yang horizontal nya ya?

    ReplyDelete
  9. iyaa gimana nih caranya mas biar tampilannya horzontal

    ReplyDelete
  10. jika tanpa thumbnail gimana mas caranya?

    ReplyDelete
  11. Langsung praktek dan... walaa.. jadi deh.. Terima kasih informasinya mas, sangat bermanfaat..

    ReplyDelete
  12. trimakasih ya brow ilmunya udah dishare

    ReplyDelete
  13. Ehh ya buat sahabat blogger yang lain :

    Bisa dilihat hasilnya diblog saya setelah saya coba :
    http://monitoringilmu.blogspot.com/

    Matur suwun : ( http://www.maskolis.com/ )

    ReplyDelete
  14. Artikelnya sangat bermanfaat sekali gan, terima kasih telah membagi ilmunya. Semua yang anda jelaskan sangat rapi dan detail, oh ya gan jangan lupa kunjungi situs resmi saya juga gan www.indonesianhamsterlovers.blogspot.com
    dan www.indobazz.blogspot.com
    semoga kita bisa menjalin hubungan antar sesama bloger dengan baik

    ReplyDelete
  15. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam

    1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK

    BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete
  16. kalau untuk post terbaru, labelnya diganti dengan tulisan apa mas kolis?terima kasih.salam blogger Blogger WongJatim

    ReplyDelete
  17. makasih informasinya, kunjungi juga:

    Situs dewasa http://www.kis33.net
    Situs Bola http://www.prediksibola888.com

    ReplyDelete
  18. terimaka kasih mas nunpang belajar dah saya coba walau dah sama persis salam dari newbie http://noteblogeko.blogspot.com

    ReplyDelete
  19. terimaka kasih mas nunpang belajar dah saya coba walau dah sama persis salam dari newbie http://noteblogeko.blogspot.com

    ReplyDelete
  20. Tengkyu broh, nais inpoh (y)
    Sukses selalu

    ReplyDelete
  21. Sehat itu murah, sehat itu milik kita semua. Bagi sebagian orang sehat itu mahal, memerlukan banyak biaya dan perawatan, tetapi bila anda rajin dan sering menggunakan alat Terapi Ion elektrik rendam kaki, sehat itu murah dan mudah. Oleh karena itu penting bagi anda untuk menjaga kesehatan semenjak dini dengan secara rutin membuang racun dan toksin dari tubuh anda dengan menggunakan alat terapi ion elektrik rendam kaki.
    Terapi Ion
    Terapi Ion Rendam Kaki Air Garam
    Peluang Usaha Rumahan
    Terapi Ion Elektrik Rendam Kaki Detox
    Manfaat Terapi Ion Elektrik
    Terapi Ion Elektrik
    Terapi Kesehatan Murah
    Peluang Usaha Modal Kecil
    Harga Paket Alat Terapi Ion Elektrik
    Pengedar Alat Terapi Ion Di Malaysia

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. saya sebetulnya masih bingung tutorialnya karena saya coba otak atik ke wp.

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger