Untuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh sobat blogger pada kolom shout box beberapa minggu yang lalu tentang bagaimana cara membuat menu yang bisa memuat banyak judul, mungkin menu tab view ini yang dimaksud ya.

Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik – baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu.

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Oke sob, sudah mengerti toh…mantaabbbbb kita langsung ke TKP.

1. Silahkan login ke blogger dengan ID sobat tentunya.

2. Tuju Tata Letak.

3. Klik Edit HTML.

4. Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.

5. Kemudian letakkan kode javascript berikut sebelum kode

6. Setelah itu letakkan kode berikut di atas kode ]]>

   div.TabView div.Tabs
   {
   height: 30px;
   overflow: hidden;
   }
   div.TabView div.Tabs a
   {
   float: left;
   display: block;
   width: 98px; /* Lebar Menu Utama Atas */

   text-align: center;
   height: 30px; /* Tinggi Menu Utama Atas */
   padding-top: 3px;
   vertical-align: middle;
   border: 1px solid #BDBDBD; /* Warna border Menu Atas */
   border-bottom-width: 0;
   text-decoration: none;
   font-family: "Verdana", Serif; /* Font Menu Utama Atas */
   font-weight: bold;
   color: #000; /* Warna Font Menu Utama Atas */
   -moz-border-radius-topleft:10px;
   -moz-border-radius-topright:10px;
   }
   div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
   {
   background-color: #E6E6E6; /* Warna background Menu Utama Atas */
   }
   div.TabView div.Pages
   {
   clear: both;
   border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
   overflow: hidden;
   background-color: #E6E6E6; /* Warna background Kotak Utama */
   }
   div.TabView div.Pages div.Page
   {
   height: 100%;
   padding: 0px;
   overflow: hidden;
   }
   div.TabView div.Pages div.Page div.Pad
   {
   padding: 3px 5px;
   }

7. Kemudian Simpan Template.

8. Langkah selanjutnya, silahkan sobat klik Tata Letak.

9. Klik Elemen Halaman dan tambahkan Gadget.

10. Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.

    
    

    
    

    300px;">
    Tab 1
    Tab 2
    Tab 3
    

    
    

    300px; height: 250px;">

    
    

    
    Tab 1.1
    
    Tab 1.2
    
    Tab 1.3
    
    

    
    

    
    

    
    Tab 2.1
    
    Tab 2.2
    
    Tab 2.3
    
    

    
    

    
    

    
    Tab 3.1
    
    Tab 3.2
    
    Tab 3.3
    
    

    
    

    
    

    
    

11. Kemudian Simpan.

Keterangan :

• Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.

• Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.

• Dan yang berwarna ungu, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.

Oke sobat, selamat mencoba.

Untuk mengetahui Ip Address yang sekarang kita gunakan, sobat bisa mencoba memasang widget Ip Address di blog sobat. Fungsi IP address tentu sobat sudah mengerti dan tidak perlu saya jelaskan. Widget IP address ini sangat menarik, selain bentuknya yang bagus, juga dapat menunjukkan flatform yang kita gunakan (versi windows yang di gunakan), asal negara dan browser yang di gunakan.

Untuk memasangnya sangat mudah, sobat cukup kunjungi situs www.wieistmeineip.de. Pada halaman depan akan ada gambar seperti dibawah ini :

Klik gambar tersebut dan kemudian sobat akan dibawa ke halaman pilihan model IP address beserta kode HTML-nya, contohnya seperti ini :



Copy kode HTML-nya dan masukkan ke blog sobat. Bagi sobat blogger baru yang belum tau cara pasang kode HTML di blog :

1. Login ke blogger
   
   
2. kemudian klik Tata Letak
   
   
3. Klik Elemen Halaman
   
   
4. Klik Tambah Gadget
   
   
5. Pilih yang HTML/Javascript
   
   
6. Masukkan kode HTML-nya kedalam kolom kosong yang tersedia
   
   
7. Lalu Simpan.

Baiklah, selamat Mencoba ya, semoga berhasil

Mengganti Background Blog Dengan Gambar

Sebuah blog yang cantik dan enak dilihat tentu akan sangat membantu dalam meningkatkan traffic blog kita, karena saya sendiri lebih tertarik mengunjungi sebuah blog yang warnanya cerah dan enak dilihat, daripada blog yang warnanya gelap dan bentuknya tidak karuan alias acak kadut. Walaupun postingannya menarik tetapi membuat sakit mata, lebih baik saya pelototi blog saya selama berjam - jam.

Saya akan berbagi tips sedikit yang saya tahu tentang merubah warna background blog atau mengganti background dengan gambar yang sudah sobat upload ke tempat penyimpanan online, misalnya di Google Sites atau Photobucket.

Berikut langkah - langkahnya :

• Login ke Blogger.
  
• Klik Tata Letak --> Edit HTML.
  
• Kemudian cari kode yang mirip seperti ini :

  body { background: #FFFFFF;
  margin:0; color:#000000;
  font:12px trebuchet ms;
  text-align: center }
  

  
  Atau jika bingung silahkan klik Ctrl + F kemudian ketikkan body {, biasanya letaknya diatas.
  

• Untuk mengganti background dengan warna lain tinggal mengganti kode #FFFFFF dengan kode lain, untuk kode warna bisa dilihat disini. Contoh saya mengganti background dengan warna abu - abu, hasilnya akan menjadi seperti berikut :

  body { background: #D8D8D8;
  margin:0; color:#000000;
  font:12px trebuchet ms;
  text-align: justify }
  

• Untuk mengganti background dengan image atau gambar, misalnya gambar yang sudah saya simpan di blogger, kode url-nya seperti ini :
  
  http://lh4.ggpht.com/_7Y9pl24WpQY/StGOm72nY7I/AAAAAAAAB4c/mWg4brKUK4Q/body_thumb%5B4%5D.jpg?imgmax=800
  
• Sehingga hasilnya menjadi seperti berikut ini :
  

  body { background:#FFFFFF url(http://lh4.ggpht.com/_7Y9pl24WpQY/StGOm72nY7I/AAAAAAAAB4c/mWg4brKUK4Q/body_thumb%5B4%5D.jpg?imgmax=800) repeat-x;
  margin:0; color:#000000; font:12px trebuchet ms;
  text-align: justify}
  

• Jika sudah selesai kemudian Simpan Template sobat.

Untuk gambar yang continuous sobat tambahkan repeat-x setelah kode url gambar. Lebih jelasnya sobat bisa baca postingan saya tentang cara mengganti backgroud blog dengan gradient image disini.