Membuat Sebuah Thumbnail Dengan Caption (Keterangan) Menggunakan Simple JQuery

Tutorial kali ini kita akan belajar membuat image dengen caption (keterangan) menggunakan script simple JQuery, turorial ini saya pelajari dari Queness. Disini saya ingin berbagi kepada teman-teman cara menerapkan jquery pada template blogger.

Berikut tutorial membuat thumbnail with caption using simple JQuery

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan Script JQuery berikut sebelum tag </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>


catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja

3. Tambahkan juga script berikut setelah script JQuery tadi

<script>$(document).ready(function () {

        // transition effect
        style = 'easeOutQuart';

        // if the mouse hover the image
        $('.photo').hover(
            function() {
                //display heading and caption
                $(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
                $(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
            },

            function() {
                //hide heading and caption
                $(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
                $(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
            }
        );

    });</script>
 

4. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]></b:skin>
.photo {
        /* relative position, so that objects in it can be positioned inside this container */
        position:relative;
        font-family:arial;    
        /* hide those extra height that goes beyong the size of this container */
        overflow:hidden;
        border:5px solid #000;
        width:350px;
        height:186px;
    }    
        .photo .heading, .photo .caption {
            /* position inside the container */
            position:absolute;
            background:#000;
            height:50px;
            width:350px;
            /* transparency for different browsers */
            /* i have shared this in my CSS tips post too */
            opacity:0.6;
            filter:alpha(opacity=60);  
             -moz-opacity:0.6;    
            -khtml-opacity: 0.6;  

        }
        .photo .heading {
            /* hide it with negative value */
            /* it's the height of heading class */
            top:-50px;
        }

        .photo .caption {         
            /* hide it with negative value */
            /* it's the height of bottom class */
            bottom:-50px;        
        }

        /* styling of the classes*/
        .photo .heading span {

            color:#26c3e5;    
            top:-50px;
            font-weight:bold;
            display:block;
            padding:5px 0 0 10px;
        }
        .photo .caption span{
            color:#999;    
            font-size:12px;
            display:block;
            padding:5px 10px 0 10px;
        }


Catatan: sobat masih bisa mengedit CSSdiatas, misalnya jika sobat ingin mengganti lebar dan tinggi dari image dll

5. Terakhir tambahkan kode HTML berikut dibawah <div id='sidebar-wrapper'> atau sobat bisa menambahkan kode berikut pada bagian elemen halaman>> tambah gadget.

<div class="photo">
    <div class="heading"><span>Dzikrullah</span></div>
    <img src="http://i47.tinypic.com/25h3maf.jpg" width="350px" height="186" alt="" />
    <div class="caption"><span>Ingatlah bahwa hanya dengan dzikrullah hati menjadi tenang</span></div>
</div>

Catatan: Yang berwarna merah adalah URL image sy, silahkan sobat ganti dgn url image sobat!

Selesai. Simpan template!

Semoga bermanfaat. jangan lupa komentar!!!

Sumber