Ajaib CSS3 Image Gallery

Ajaib Image Gallery adalah sebuah gallery yang dibuat hanya menggunakan kode css. Ada 2 versi dari Ajaib Image Gallery:

1. Hanya menggunakan kode CSS.
2. Menggunakan kode css dan kode css3.

Dalam demo akan kita tampilkan dua macam versi Ajaib Image Gallery dan silahkan anda bandingkan diantara keduanya.

Ajaib Image Gallery dg Kode CSS :

• Image-1
• Image-2
• Image-3
• Image-4
• Image-5

Ajaib Image Gallery dg Kode CSS3 :

• Image-1
• Image-2
• Image-3
• Image-4
• Image-5

Untuk membuat Ajaib image Gallery yang hanya menggunakan kode css (versi pertama), silahkan gunakan kode yang ada di gubhugreyot, sedang untuk membuat versi kedua (dengan kode css3) anda bisa copy kode cssnya di bawah ini.

Kode CSS Ajaib Image Gallery CSS3 :

#GRajaib_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/h400/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;
}
#GRajaib_gallery li{
        margin:0; /* original code by : gubhugreyot */
        float:left;
        margin-left:1px;
        text-align:center;
        list-style: none; 
        padding:0;
}
#GRajaib_gallery li a{
        display:inline-block;
        padding:9px 0;
        width:78px; /* original code by : http://gubhugreyot.blogspot.com  */
        background:#666 url(https://lh6.googleusercontent.com/-7an5ttHiUhw/T2Im9yow2PI/AAAAAAAAAX8/yvK75bKIKkQ/s128/GR_red-black-grad-8x41.gif) 0 100%  repeat-x;
        border:1px solid #666;
        color: #33CCFF;
        margin:2px 0 2px 1px;
        font-size:11px;
        font-family:Arial;
        font-weight:700;
        text-decoration:none;
}
#GRajaib_gallery li a,#GRajaib_gallery li a img{
        transition:1.8s ease;
        -o-transition:1.8s ease;
        -moz-transition:1.8s ease;
        -webkit-transition:1.8s ease;
        -ms-transition:1.8s ease;
}
#GRajaib_gallery li a:hover {
        background:#fff  url(https://lh6.googleusercontent.com/-7an5ttHiUhw/T2Im9yow2PI/AAAAAAAAAX8/yvK75bKIKkQ/s128/GR_red-black-grad-8x41.gif) 0 -35px  repeat-x;text-shadow:2px 2px 2px #888;
        color:red;  /* original code by : http://gubhugreyot.blogdetik.com  */
        border-bottom:5px solid red;
        opacity:1.0;
        filter:alpha(opacity=100);
        padding:9px 0 4px;
}
li#GRajaib_img a, li#GRajaib_img a:hover {
        background:#aaa;
        color: #FF9900; 
}
#GRajaib_gallery li a img{
        position:absolute;
        left:3px;
        top:38px;
        width:400px;
        height:230px;
        clear:left;
        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;
        opacity:0.0;
}
li#GRajaib_img1 a img, #GRajaib_gallery li a:hover img {
        display:block; 
        opacity:0.35;
        filter:alpha(opacity=35);
}
li#GRajaib_img1 a:hover img, li#GRajaib_img2 a:hover img, li#GRajaib_img3 a:hover img, li#GRajaib_img4 a:hover img, li#GRajaib_img5 a:hover img {
        border-color:#888; 
        opacity:1.0;
        filter:alpha(opacity=100);
}

xHTML :

<ul id="GRajaib_gallery">
<li id="GRajaib_img1"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhan83KnPQfwnABAxorYvwEhtL0I1i9gL4sEfZYx51BqaPXAANENT57TIlu6wQMB4l7RBAyTv6E6G2PTDsrVWNG0U3qDgi61h1SHGBgyCrPst3ER0C_Ori8Vj6_g7r4RmeBbIb_4Q3cZq8/s500/img_gubhugreyot_gadisku-06b.jpg">Image-1<img src="https://lh4.googleusercontent.com/-b2bwA-Uat14/T2JvIF6pCsI/AAAAAAAAAZo/sxXP2xbR81Y/h300/th_gubhugreyot-temple.jpg" /></a></li>
<li id="GRajaib_img2"><a href="http://gubhugreyot-demo-tutorial-blogger-1.blogspot.com">Image-2<img src="https://lh3.googleusercontent.com/-N2Db0y2rN5w/T2JvDLMkzsI/AAAAAAAAAZI/Sv92fEX5Y18/h300/th_gubhugreyot-blue-sky.jpg"/></a></li>
<li id="GRajaib_img3"><a href="https://lh5.googleusercontent.com/-w6VZu6vjq5U/T2Lpa_yjbAI/AAAAAAAAAZ8/ZPN32269OdU/h400/gubhugreyot-wanita-misterius.jpg">Image-3<img src="https://lh4.googleusercontent.com/-FK-_ZytynAI/T2JvFFfV-rI/AAAAAAAAAZU/45J-won1Kg0/h300/th_gubhugreyot-pantai-sore.jpg"/></a></li>
<li id="GRajaib_img4"><a href="URL-4">Image-4<img src="https://lh4.googleusercontent.com/-7Fzb-m8xyvA/T2JvMlvXX7I/AAAAAAAAAZ0/vkGaArh4kME/h300/th_suryokontho.jpg"/></a></li>
<li id="GRajaib_img5"><a href="http://gubhugreyot.blogdetik.com/">Image-5<img src="https://lh6.googleusercontent.com/-47T0FGU5C9E/T2JvF9NQaiI/AAAAAAAAAZY/ngrmrCPD8v8/h300/th_gubhugreyot-storm.jpg"/></a></li>
</ul>

1. Login ke Blogger.
2. Setelah halaman "Dasbor (Dasboard)" terbuka, cari dan klik "Rancangan (Design)".
3. Lanjutkan klik "Edit HTML".
4. Anda akan melihat sebuah box edit template yang penuh dengan kode html.
   Lakukan "Backup Template" sebelum memulai penyimpanan kode CSS.
5. Cari kode ]]></b:skin> dan letakkan kode CSS tepat di atasnya.
6. Klik "Simpan Template (Save Template)".
7. Gunakan xHTML di halaman posting atau pada Add a Gadget.

Catatan/Keterangan :

• Ukuran yang ditetapkan pada image yang digunakan pada gallery berukuran 400px (width) dan 230px (height), namun demikian anda bisa juga menggunakan ukuran berbeda, hanya saja tetap ditampilkan dengan ukuran tersebut di atas.
• Link pada xHTML (contoh: URL-4) diganti dengan alamat image, alamat blog atau alamat posting.
• Perubahan ukuran gallery harus disertai dengan beberapa perubahan width, padding, baik pada box, tab controll maupun tab image.