Navbar AutoHide

Standarnya, setiap blog yang dibuat melalui blogspot mempunyai tampilan NavBar atau navigatorbar dibagian posisi atas.

Namun dengan sedikit trik, maka NavBar ini dapat sobat atur. Salah satunya adalah membuat NavBar tersebut autohide yaitu pada saat mouse berada pada posisi atas, maka NavBar akan tampil. Adapun langkahnya adalah sebagai berikut :

Read More

Kategori Otomatis hanya Thumbnail

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:



Berikut adalah langkah-langkahnya :
Langkah pertama
Login ke blogger dengan ID anda.
Klik Rancangan.


Klik tab Edit HTML.


Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.

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

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,cb5);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>

Klik tombol SIMPAN TEMPLATE.
Langkah pertama selesai.
Langkah kedua
Klik tab Rancangan.


Jika masih dalam posisi tab Elemen Laman, silahkan klik terlebih dahulu tab menu Elemen Laman.


Klik Tambah Gadget untuk menambahkan gadget baru.


Setelah muncul jendela baru, klik tanda plus untuk HTML/JavaScript


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>

Klik tombol SIMPAN
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.

Sumber : http://kolom-tutorial.blogspot.com/

Read More

Menampilkan Kategori Berdasarkan Nama Label

Umumnya untuk menammpilkan kategori atau label, yang ditampilkan adalah semua nama kategori atau labelnya. Lalu, adakah cara untuk untuk menampilkan kategori atau label berdasarkan nama kategori atau label? jawabannya ada.

Read More

Batasi label Yang Tampil Di Blogger

Sebuah label, apabila diklik memang akan menampilkan seluruh label tersebut, namun kita bisa saja membatasi berapa jumlah yang ingin ditampilkan dalam satu halaman, akan tetapi anda harus menyisipkan sedikit kode tambahan dalam label tersebut. Kode tersebut adalah seperti berikut :

?max-results=5

Angka 5 adalah jumlah label yang ingin di tampilkan, angka tersebut tentu saja harus di ganti dengan angka yang anda inginkan. namun, itu berlaku apabila memunculkan label secara manual.
Format dasar alamat sebuah label adalah seperti ini :
http://namablogmu.blogspot.com/search/label/namalabel

Misal kang rohman mempunyai label dengan nama blog tutorial, maka alamatnya seperti ini :

http://kolom-tutorial.blogspot.com/search/label/blog%20tutorial

Posting yang ber label blog tutorial sangat banyak sekali, sehingga apabila ada pengunjung yang mengakses alamat tersebut akan di tampilkan semua postingnya. Apabila label tersebut ingin di batasi, cukup menambahkan kode pembatasnya, misal :

http://kolom-tutorial.blogspot.com/search/label/blog%20tutorial?max-results=5

Namun, untuk menambahkan kode pembatas yang mengambil dari database blogger, maka kode yang di tambahkan adalah seperti ini :
+ &quot;?max-results=5&quot;

Misalkan seperti ini :

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

Maka kodenya jadi seperti ini?

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>

Ah kang Rohman bikin bingung nih . hehehe emang itu bagi yang sudah sedikit mengerti akan kode template blogger. bagi yang masih bingung mungkin bisa langsung praktik cara berikut. Namun, pastikan anda sebelumnya telah memasang gadget Label atau Kategori, baik itu label dalam bentuk List ataupun dalam bentuk Label Cloud.

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
   
3. Klik tab Edit HTML.
   
4. Biasakan untuk melakukan backup, klik pada tulisan Download Template Lengkap.
   
5. Klik kotak kecil di samping tulisan Expand Template Widget.
   
6. Carilah kode yang mirip seperti berikut : <ul>
         <b:loop values='data:labels' var='label'>
           <li>
             <b:if cond='data:blog.url == data:label.url'>
               <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
             <b:else/>
               <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
             </b:if>
             <b:if cond='data:showFreqNumbers'>
               <span dir='ltr'>(<data:label.count/>)</span>
             </b:if>
           </li>
         </b:loop>
         </ul>
7. Tambahkan kode pembatasnya, sehingga menjadi seperti berikut :
   <ul>
         <b:loop values='data:labels' var='label'>
           <li>
             <b:if cond='data:blog.url == data:label.url'>
               <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
             <b:else/>
               <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
             </b:if>
             <b:if cond='data:showFreqNumbers'>
               <span dir='ltr'>(<data:label.count/>)</span>
             </b:if>
           </li>
         </b:loop>
         </ul>
8. Itu adalah untuk yang label dalam bentuk list, untuk yang label cloud anda tinggal menggeser sedikit ke bagian bawahnya, dan nanti akan ditemui kode mirip seperti berikut :
   <b:loop values='data:labels' var='label'>
           <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
             <b:if cond='data:blog.url == data:label.url'>
               <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
             <b:else/>
               <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
             </b:if>
             <b:if cond='data:showFreqNumbers'>
               <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
             </b:if>
           </span>
         </b:loop>
       
9. Tambahkan kode pembatasnya sehingga kodenya jadi seperti berikut : <b:loop values='data:labels' var='label'>
           <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
             <b:if cond='data:blog.url == data:label.url'>
               <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
             <b:else/>
               <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
             </b:if>
             <b:if cond='data:showFreqNumbers'>
               <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
             </b:if>
           </span>
         </b:loop>
10. Klik tombol SIMPAN TEMPLATE.
11. Selesai.

Selamat mencoba!

Read More