Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «

2 komentar:

  1. Bos klo lgi buka demo kok kluarnya djati.net,cara liat demonya gmna kok muter2?

    BalasHapus
    Balasan
    1. saya ingin berbagi cerita kepada semua teman-teman bahwa saya yg dulunya orang yg paling tersusah,walaupun mau makan itu pun harus hutang dulu sama tetangga dan syukur kalau ada yg mau kasi,semakin aku berusaha semakin jauh juga pekerjaan dan selama aku ingin berbuat baik kepada orang lain semakin banyak pula yg membenci saya karna saya cuma dianggap rendah sama orang lain karna saya tidak punya apa-apa,dan akhirnya saya berencana untuk pergi mencari dukun yg bisa menembus nomor dan disuatu hari saya bertemu sama orang yg pernah dibantu sama MBAH KABOIRENG dan dia memberikan nomor MBAH KABOIRENG,dia bilan kepada saya kalau MBAH KABOIRENG bisa membantu orang yg lagi kesusahan dan tidak berpikir panjang lebar lagi saya langsun menghubungi MBAH KABOIRENG dan dengan senan hati MBAH KABOIRENG ingin membantu saya,,alhamdulillah saya sudah menang togel yg ke5 kalinya dan rencana saya bersama keluarga ingin membuka usaha dan para teman-teman diluar sana yg ingin seperti saya silahkan hubungi MBAH KABOIRENG di 085=260=482=111 saya sangat bersyukur kepada allah karna melalui bantuan MBAH KABOIRENG dan kini kehidupan saya sudah jauh lebih baik dari sebelumnya,ingat kesempatan tdk akan datan untuk yg kedua kalinya.. KLIK TOGEL 2D 3D 4D 6D DISINI













      saya ingin berbagi cerita kepada semua teman-teman bahwa saya yg dulunya orang yg paling tersusah,walaupun mau makan itu pun harus hutang dulu sama tetangga dan syukur kalau ada yg mau kasi,semakin aku berusaha semakin jauh juga pekerjaan dan selama aku ingin berbuat baik kepada orang lain semakin banyak pula yg membenci saya karna saya cuma dianggap rendah sama orang lain karna saya tidak punya apa-apa,dan akhirnya saya berencana untuk pergi mencari dukun yg bisa menembus nomor dan disuatu hari saya bertemu sama orang yg pernah dibantu sama MBAH KABOIRENG dan dia memberikan nomor MBAH KABOIRENG,dia bilan kepada saya kalau MBAH KABOIRENG bisa membantu orang yg lagi kesusahan dan tidak berpikir panjang lebar lagi saya langsun menghubungi MBAH KABOIRENG dan dengan senan hati MBAH KABOIRENG ingin membantu saya,,alhamdulillah saya sudah menang togel yg ke5 kalinya dan rencana saya bersama keluarga ingin membuka usaha dan para teman-teman diluar sana yg ingin seperti saya silahkan hubungi MBAH KABOIRENG di 085=260=482=111 saya sangat bersyukur kepada allah karna melalui bantuan MBAH KABOIRENG dan kini kehidupan saya sudah jauh lebih baik dari sebelumnya,ingat kesempatan tdk akan datan untuk yg kedua kalinya.. KLIK TOGEL 2D 3D 4D 6D DISINI



      Hapus

 
GR | Edited by | gubhug reyot