Membuat Sebuah Thumbnail Dengan Caption (Keterangan) Menggunakan Simple JQuery

Membuat Sebuah Thumbnail Dengan Caption (Keterangan) Menggunakan Simple JQuery

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

  
View Demo
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

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

4. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]>

.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

atau sobat bisa menambahkan kode berikut pada bagian elemen halaman>> tambah gadget.

   

Dzikrullah

    http://i47.tinypic.com/25h3maf.jpg

" width="350px" height="186" alt="" />
   

Ingatlah bahwa hanya dengan dzikrullah hati menjadi tenang

Catatan: Yang berwarna merah adalah URL image sy, silahkan sobat ganti dgn url image sobat!
Selesai. Simpan template!
Semoga bermanfaat. jangan lupa komentar!!!
View Demo

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging