Kategori Otomatis hanya Thumbnail Kategori Otomatis hanya Thumbnail | Belajar Komputer Melalui Internet
News Update :
Blog ini doFollow Loh !

Kategori Otomatis hanya Thumbnail

Selasa, 05 Juli 2011

Dalam posting sebelumnya mengenai fitur Kategori Otomatis Dengan Thumbnail ada yang request, bagaimana jika yang tampil adalah hanya thumbnail saja dan berderet ke samping? ini bisa saja di lakukan, namun tentu dengan sedikit modifikasi.
Contoh screenshot dari kategori otomatis hanya menampilkan thumbnail:

kategori otomatis hanya thumbnail

Berikut adalah langkah-langkahnya :
 

Langkah pertama

  1. Login ke blogger dengan ID anda.
  2. Klik Rancangan.
    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>
    /*** Labels Thumbs ***/
    img.label_thumb{
    float:left;
    border:1px solid #ccc;
    width:85px;
    height:70px;
    margin-right:10px;
    margin-bottom:10px;
    }
  6. Carilah kode </head>, copy lalu paste kode berikut persis diatas kode </head><script type='text/javascript'>
    //<![CDATA[
    function labelthumbs(json){document.write
    ('<div>');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='';}
    document.write('<a href="'+posturl+'" title
    "'+posttitle+'"><img class=
    "label_thumb" src="'+thumburl+'"/></a>');
    if(i!=(numposts-1))
    document.write('');}
    document.write('</div>');}
    //]]>
    </script>
  7. Klik tombol SIMPAN TEMPLATE.
  8. Langkah pertama selesai.

Langkah kedua

  1. Klik tab Rancangan.
    rancangan
  2. Jika masih dalam posisi tab Elemen Laman, silahkan klik terlebih dahulu tab menu Elemen Laman.
    elemen laman
  3. Klik Tambah Gadget untuk menambahkan gadget baru.
    tambah gadget
  4. Setelah muncul jendela baru, klik tanda plus untuk HTML/JavaScript
    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;</script>
    <script type="text/javascript" src="/feeds/posts/default/-/namalabelmu?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

     script label
  6. Klik tombol SIMPAN
  7. Langkah kedua Selesai.
Jika anda ingin menambahkan widget lain untuk nama kategori yang lain, anda hanya melakukan hal yang sama dengan urutan Langkah Kedua.
Untuk pengaturan custom seperti mengubah ukuran thumbnail, border dan lainnya, anda dapat mengubah pengaturan di bagian CSS, silahkan kreasikan sendiri :


/*** Labels Thumbs ***/
img.label_thumb{
float:left;
border:1px solid #ccc;
width:85px;
height:70px;
margin-right:10px;
margin-bottom:10px;
}
Untuk mengatur jumlah thumbnail yang ingin tampil anda tinggal mengubah angka 6 dengan nilai angka yang lain.

<script type='text/javascript'>var numposts = 6;</script>
Manampilkan kategori hanya thumbnail, mungkin cocok untuk blog yang bersifat gallery template, gallery photo dan sejenisnya.

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Artikel tentang Kategori Otomatis hanya Thumbnail
Judul: Kategori Otomatis hanya Thumbnail

Rating: 10 out of 10 based on 24 ratings. 155 user reviews.
Tulisan ini menarik? Copas permalink ini blogmu donk!

:: Get this widget ! ::

- Reviewer: Unknown - ItemReviewed: Kategori Otomatis hanya Thumbnail
Share this article :

No Responses to "Kategori Otomatis hanya Thumbnail"

Posting Komentar

 
Raden Ansori - All right reserved
Raden Ansori | Personal Blogging Free Sharing Inform
© Template by :Raden Ansori 2011 - 2012
Copyright © 2011 - 2012 Raden Ansori - All rights reserved