Membuat Sebuah Thumbnail Dengan Caption (Keterangan) Menggunakan Simple JQuery -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Membuat Sebuah Thumbnail Dengan Caption (Keterangan) Menggunakan Simple JQuery, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger JQuery, Artikel Blogger Tutorials, Artikel JQuery, Artikel Tutorial Blogger, Artikel Widget, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Membuat Sebuah Thumbnail Dengan Caption (Keterangan) Menggunakan Simple JQuery
link : Membuat Sebuah Thumbnail Dengan Caption (Keterangan) Menggunakan Simple JQuery
Gambar dibawah ini

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 </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!!!

View Demo

Demikianlah Artikel Membuat Sebuah Thumbnail Dengan Caption (Keterangan) Menggunakan Simple JQuery

Sekianlah artikel Membuat Sebuah Thumbnail Dengan Caption (Keterangan) Menggunakan Simple JQuery kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Membuat Sebuah Thumbnail Dengan Caption (Keterangan) Menggunakan Simple JQuery dengan alamat link https://trikmitos.blogspot.com/2010/02/membuat-sebuah-thumbnail-dengan-caption.html