Hover Tab Image Gallery

Meskipun hanya menggunakan KODE CSS, Hover Tab Image mempunyai tampilan yang sangat menarik. Nilai lebih yang dimiliki tab ini adalah sedikitnya KODE yang digunakan sehingga sangat mempengaruhi kecepatan loadingnya. Untuk menampilkan image/gambar kamu juga tidak perlu susah-susah untuk merubah ukuran gambar karena image akan secara otomatis ditampilkan sesuai ukuran tab. Yang penting bahwa image yang akan ditampilkan harus mempunyai perbandingan ukuran gambar 400 x 230 (lebar:tinggi » pixel). Sangat praktis dan tentu saja mudah untuk membuatnya. O..., ya...Hover Tab Image ini di desain untuk menampilkan 5 buah image. Sangat tepat sekali karena tidak terlalu banyak untuk setiap kali posting. Penasaran untuk melihat seperti apa penampilan Hover Tab Image ? Silahkan lihat melalui DEMO yang sudah tersedia!

D E M O

Langkah untuk membuat Hover Tab Image :

1. Login ke Blogger.
2. Setelah halaman Dasbor (Dasboard) terbuka, klik "Design (Rancangan)".
3. Lanjutkan dengan klik "Edit HTML".
4. Amankan Template (Backup Template) terlebih dahulu!
5. Tetap di Edit HTML kemudian cari KODE ]]></b:skin>.
6. Copy paste KODE CSS di bawah ini dan letakkan persis di atasnya.
   

   Kode CSS Hover Tab Image Gallery :

   #GRtab_gallery{
           border:3px solid #333;
           position:relative;
           padding:0;
           margin:20px auto;
           width:412px;
           height:285px;
           background:#ccc url(https://lh5.googleusercontent.com/-w6VZu6vjq5U/T2Lpa_yjbAI/AAAAAAAAAZ8/ZPN32269OdU/h120/gubhugreyot-wanita-misterius.jpg) 6px 83% no-repeat;
           background-size:400px 230px;
           border-radius:3px;
           border-bottom-left-radius:9px;
           border-bottom-right-radius:9px;
           box-shadow:0 0 6px #000;
   }
   #GRtab_gallery li{
           margin:0;
           float:left;
           margin-left:1px;
           text-align:center;
           list-style:none;
           padding:0;
   }
   #GRtab_gallery li a{
           display:inline-block;
           padding:9px 0;
           width:78px;
           background:url(https://lh6.googleusercontent.com/-7an5ttHiUhw/T2Im9yow2PI/AAAAAAAAAX8/yvK75bKIKkQ/s128/GR_red-black-grad-8x41.gif) center left repeat-x;
           border:1px solid #666;
           color: #33CCFF;
           margin:2px 0 2px 1px;
           font-size:11px;
           font-family:Arial;
           font-weight:700;
           text-align:center;
           text-decoration:none;
   }
   #GRtab_gallery li a:hover{
           background:red  url(https://lh5.googleusercontent.com/-0qkGnFmOfKk/T2IorNwGvsI/AAAAAAAAAYI/odVOS7-OdC4/s128/GR-black-grad-5x31.gif) 0 5px   repeat-x;
           color:#FF9900;
   }
   li#GRtab_image a, li#GRtab_image a:hover{
           background:#aaa;
           color:#FF9900;
   }
   #GRtab_gallery li a img{
           position:absolute;
           left:3px;
           top:38px;
           width:400px;
           height:230px;
           clear:left;
           display:none;
           padding:2px;
           border:1px solid #444;
           border-bottom:5px solid #444;
           border-top:5px solid #222;
           border-bottom-left-radius:8px;
           border-bottom-right-radius:8px;
   }
   li#GRtab_image1 a img, #GRtap_gallery li a:hover img{
           display:block;
           opacity:0.35;
           filter:alpha(opacity=35);
   }
   li#GRtab_image1 a:hover img, li#GRtab_image2 a:hover img, li#GRtab_image3 a:hover img, li#GRtab_image4 a:hover img, liGRtab_image5 a:hover img{
           border-color:#888;
           opacity:1.0;
           filter:alpha(opacity=100); 
   }

7. KLIK Simpan Template
8. Gunakan KODE HTML berikut di bagian body atau saat posting.
   

   xHTML Hover Tab Image :

   <ul id="#GRtab_gallery">
        <li id="GRtab_image1"><a href="URL-1">Img-1<img src="image1.jpg" /></a></li>
        <li id="GRtab_image2"><a href="URL-2">Img-2<img src="image2.jpg"/></a></li>
        <li id="GRtab_image3"><a href="URL-3">Img-3<img src="image3.jpg"/></a></li>
        <li id="GRtab_image4"><a href="URL-4">Img-4<img src="image4.jpg"/></a></li>
        <li id="GRtab_image5"><a href="URL-5">Img-5<img src="image5.jpg"/></a></li>
   </ul>

Keterangan/Catatan :

1. Anda bisa mengganti tiap2 URL dengan alamat blog/web, alamat posting, alamat label atau alamat image.
2. image1.jpg s/d image5.jpg merupakan URL gambar/image 1 s/d gambar 5.
3. Sebaiknya gunakan image dengan ukuran 400 x 230 (pixel).
4. Image gallery ini bisa digabungkan dengan fungsi lightbox.
5. Bagi yang membutuhkan panduan cara Backup Template cara mencari kode dan berbagai cara simpan kode silahkan buka Special Tutorials di bagian kiri halaman.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Setu    KLIWON, Maret, 16, 2012

» Happy Blogging - gubhugreyot «