47 Membuat Sebuah Thumbnail Dengan Caption (Keterangan) Menggunakan Simple JQuery

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

 Thumbnail galery with heading and caption with 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


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

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

47 komentar :

  1. hmm bagus nice posting masa? aku kasih yg itu kok edit html yg untuk koemntar rcent komnt itu ukht, masa gak ada???
    maslaahnya an suak bingung nieh,,,,, gak berhasil bikin recent komntnya

    BalasHapus
  2. @ Chomisah: Oh ukhty kirim dlm format word ya? ana g' bk itu, ana pikir kode template dlm format rar yg ukhty dah download yg dipindahin.

    ntr ana liat lg

    BalasHapus
  3. walah mba, makin bingung nih...
    gak nyampai aku...

    BalasHapus
  4. makasih tutorialnya mba.

    BalasHapus
  5. wow keren..
    terimakasih yah atas ilmunya^^

    salam blogger :D

    BalasHapus
  6. @ Narti: Wah coba aja dl ukh, Thumbnail with capion using JQuery ini lebih mudah dari tutorial sebelumnya yg membahas Featured content slider using JQuery

    @ SDA & Local Download: Terimakasih apresiasinya

    BalasHapus
  7. keren nih sob, tp blog q dah berat bgt, buat dtambahin code2 lagi

    BalasHapus
  8. @ Rizky: Iya, gpp. Ini hanya berbagi ilmu, bisa jd bahan pembelajaran tuk desain template sendiri.
    Terimakasih apresiasinya.

    BalasHapus
  9. alhamdullillah mampir kesini dapat ilmu lagi nih..makasih sob ilmunya ya semoga tambah sukses aja webnya

    BalasHapus
  10. @ master: InsyaAllah demikian jg dgn web master

    BalasHapus
  11. wah mantap sekali ,,makasih info dan tutorialnya,,
    kalau sempat main ke blog saya ya..

    BalasHapus
  12. sebenernya saya pengen bahas jquery
    tapi kalau saya pribadi menulisnya masih memilih ke penguatan traffic dan tips mungkin
    semapat juga terpikir utk mencari penulis jquery utk blog saya, tapi susah juga mencariny :D

    padaha; jquery modifnya udah banyak banget

    BalasHapus
  13. Tutorial yang sangat bermanfaat, terima kasih.

    BalasHapus
  14. wah nambah kamus lagi neh, di simpan dulu.... tar di praktekin .... siiip dah

    BalasHapus
  15. nice info sob....trimakasih dah berkunjung dan coment

    BalasHapus
  16. assalamu'alaikum kk..ana jawabnya disini aja ya.. iya kak,, tolong kalau ga keberatan, boleh kk buatin ya.. hhhe ^^, jazaakillahu khairon kak... barakallohu fiik

    sari

    BalasHapus
  17. yg empunya blog suka ma jquery nih keknya...hihihi
    sip sip sip ^_^

    BalasHapus
  18. mau tanya Query tuh apa yah?

    BalasHapus
  19. ajarin secara LIFE dong bos

    BalasHapus
  20. @ berita u/negri: terimakasih apresiasix, inyaAllah
    @ mas doyok:sebenarx pgn jg nulis ttg tips tapi sy newbi blm punya bnyk riset ttg hal itu, dan stlh berkenalan sm ngotak ngatik template, sy jd asyik dgn desain template dan JQuery
    @ seti@wan: sama-sama, terimakasih jg apresiasinya
    @ riqho: silahkan, smg berhasil
    @ epho: sama-sama
    @ Anonim: Sari, Wa'alaikumslm de', insyaAllah
    @ Beben: Benar sekali, baru kenalan langsung suka
    @ seowoeng & kosong: jQuery is new kind of JavaScript Library jd JQuery merupakan library Javascript (kumpulan code atau fungsi-fungsi yang dibuat untuk mempermudah atau mempercepat kita dalam mengerjakan sesuatuyang akan membuat aplikasi web yang kita buat menjadi lebih “waah“, baik dari sisi user-interface, proses maupun interaktivitas.

    selengkapnya kunjungi JQuery.Com

    BalasHapus
  21. Balasan
    1. :-s spertiny mas ini nggk lihat dengan detil Demo nya ada disitu... :-t

      <a href="http://www.ghalyputri.com">My Blog</a>

      Hapus
  22. @ Secangkir teh dan sekerat roti: waduh, ditulis tuh link demox diawal dan diakhir tutorial. sayang ya g' bisa lihat?

    BalasHapus
  23. Datang lagi boss,..sukses aja ya!

    BalasHapus
  24. Artikel yang sangat menarik bagi saya blogger pemula.
    Makasih ajakan tukar link, link Anda sudah saya pasang... silakan cek tukar link

    BalasHapus
  25. langsung copas ya...mantap nich

    BalasHapus
  26. nambah ilmu nambah rejeki, thanx ya mas sukses selalu

    BalasHapus
  27. wah info yang menarik nih, thanks banget nih atas info yang di berikan

    BalasHapus
  28. salam kenal....
    sebagai pemula di dunia blogger, saya ingin bertanya seusati kepada master:) ....... bagaimana sich cara membuat widget seperti ini

    BalasHapus
  29. @ dede: terimakasih, begitu jg dgn anda
    @ ☼►100ABC blog☼◄ : terimakasih, insyaAllah segera sy link back
    @ rumah blogger: silahkan, klu tdk keberatan sy berterimakasih klu anda tdk melupakan link sumber
    @ sabirinnet: terimakasih, sy wanita jd slh dgn keliru sapaan masx
    @ Alcohol: terimakasih apresiasix
    @ rizky: terimakasih dah mampir, jg link infox
    @ cool blog: sy bukan master, itu bukan widget yg bersatu tapi dua widget yg dipasangx jg satu persatu. insyaAllah akan sy posting cara pasang formulir berlangganan posting dan sexy sosial bookmark. cara anda bertanya unik :)

    BalasHapus
  30. makasih infonya.....blognya jadi bagus ya? harus sering - sering ke sini nih....biar blognya jadi indah hehe..

    BalasHapus
  31. maaf out of topic sahabatku, silahkan apabila berkenan utk memuat ulang artikel tersebut dan dibantu penyebarannya. pada dasarnya semua yang saya tulis memang bertujuan untuk saya sebarluaskan kepada masyarakat. Dan untuk masalah link ke blog saya, terserah sahabatku yang baik ini saja memutuskan, yang jelas artikel tersebut saya yang tulis sendiri meskipun mengutip dari sumber yang lebih dikenal. terima kasih

    BalasHapus
  32. @ agusta27: iya sy tertarik dengan info anda tntang "Hati-hati Apabila Makan Gorengan". Rencana ingin muat ulang untuk blog sy Lentera Ilmu u/category kesehatan. InsyaAllah tdk melupakan sumber link.

    Terimakasih

    BalasHapus
  33. wah stelah sekian lama gak buka blog karena berbagai urusan dan hambatan,alhamdulillah sekarang bisa mengunjungi kk lagi :)
    btw template tweety nya dah rampung blm kak?

    BalasHapus
  34. ngikut koment ah...oh iya tipsnya ana coba ya.. tengkyu...

    BalasHapus
  35. Wah ini yang saya cari. Tapi kok rumit banget ya. Yang jelas perlu di coba.

    BalasHapus
  36. assalamualaikum ukhty... masih ingatkan sama sya pas di KR aku minta tutorial Jquery... aku merasa kesuliatan disana karena maklum pemula .. masih banyak yang belum saya ngerti... dalam menempatkan linknya ... btw kok di posting yang saya maksud diatas aku gak bisa koment mbak yaaaaa why hehheh

    BalasHapus
  37. @ Ade: wslmun'alaik. maaf siapa ya? KR itu apa ya? maaf memang dibeberapa postingan (yg dah bnyk komentatorx & page itu berPR)saya tutup komentarx. Boleh jg tulis pertanyaan dibuku tamu!?

    BalasHapus
  38. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  39. kira-kira ada ga ya.... yg secara otomatis memberi efek ini pada tiap gambar.

    BalasHapus
  40. @ Afrizal: Maksud anda hanya dgn sdkt penambahan CSS & HTML? Mungkin bisa dengan menggunakan dua image tapi pastix tdk secantik effect yg dihasilkan JQuery.

    BalasHapus
  41. This is fantastic information for blog. I really love the way infomration presented in your post. I have added to you in my social bookmark…and i

    am w8ing ur next post.

    BalasHapus
  42. hehehe.. fungsinya buat apa ya sob.kagak ada keterangan yang mengarah ke script ni.... maap2... maklum nebi..

    BalasHapus
  43. wah asiik dapat tambahan ilmu lg nich... makasih gan tutorialnya

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!