13.8.14
16
Menampilkan Teks Pada Gambar Dengan Slide Efek.
Cara Membuat Gambar Pada Blog Dengan Tampilan Efek Slideshow Description Text.
4 Variasi Slide Teks Pada Gambar - Membuat tampilan gambar di Blog menjadi lebih menarik dan cantik akan dapat memberikan kesan tersendiri bagi pengunjung, terlebih gambar di blog Anda diberikan beberapa variasi seperti ini:




DEMO SHOW




Hover image slide text


Memanfaatkan 4 sisi pada gambar, sisi atas, sisi bawah, sisi kiri, dan sisi kanan. Kesempatan kali ini SAHABAT BLOGGER 77 akan memberikan trik sederhana cara menampilkan descripsi teks pada gambar dengan 4 variasi seperti ini:


//slide text of left style
.slide-left figcaption {bottom: 0; right: 55%;}
.slide-left:hover figcaption {right: 0;}

//slide text of right style
.slide-right figcaption {bottom: 0; left: 55%;}
.slide-right:hover figcaption {left: 0;}

//slide text of top style
.slide-top figcaption {left: 0; top: 90%;}
.slide-top:hover figcaption {top: 0;}

//slide text of bottom style
.slide-bottom figcaption {left: 0; bottom: 90%;}
.slide-bottom:hover figcaption {bottom: 0;}


Anda bisa membuat beberapa variasi tampilan slide teks, misalnya dari mana awal teks akan Anda tampilkan pada saat gambar di hover.

Berikut Cara menampilkan teks pada Gambar hover
Pada Template - temukan kode ]]></b:skin>
Letakkan CSS berikut ini diatasnya:

//* variation slide text description show with css3
sumber:'http://sahabatblogger77.blogspot.com/'
post on (august 13, 2014)
author: devy indriyani
*/
figure {
  float: left;
  display: block;
  position: relative;
  overflow: hidden;
  margin: -2em 15px 50px auto;
  width:350px;
  height:220px;
  border:2px solid #e06666;}

figure:hover figcaption {opacity: 1;}
figcaption {
  position: absolute;
  background: #111;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 10px 20px;
  opacity: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  margin:0 auto;}

//slide text of left style
.slide-left figcaption {bottom: 0; right: 55%;}
.slide-left:hover figcaption {right: 0;}

//slide text of right style
.slide-right figcaption {bottom: 0; left: 55%;}
.slide-right:hover figcaption {left: 0;}

//slide text of top style
.slide-top figcaption {left: 0; top: 90%;}
.slide-top:hover figcaption {top: 0;}

//slide text of bottom style
.slide-bottom figcaption {left: 0; bottom: 90%;}
.slide-bottom:hover figcaption {bottom: 0;}



Pada tahapan selanjutnya, letakkan HTML di bawah ini saat Anda membuat postingan baru pada formulir HTML (bukan Compose), namun gunakan 1 variasi slide yang Anda inginkan seperti ini:

<figure class="slide-bottom">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPU6aU6CMiKnzoYyBGgAtSVRYJgl-ARLDKU2x-bZ9qZvAcEqIqmi56GE-ChoigcvFpyHiNn_RnulNlhLVEI7qAumXsBDVL-YTPDQc03UEReggadHf8ivONne7Ka9wIB-fiFyGrlIxO0lY/s1600/sb77-file1.jpg">
      <figcaption>Dari Atas Ke bawah</figcaption>
</figure>

<figure class="slide-top">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBWdOPDyrTi587vAAgmdm0EpJgE1UjGuaK1PIAdcnbdmkQKRQZz68o4UqNjQC2Usb4RZbi3PcYA8FBFfqrTSSw3OUD4vKcPFDLnWrAVzYVE3aUJ5PCKX44mpeKz2_mh-wpO1CPjg8pmWc/s400/gambar.jpg">
      <figcaption>Dari Bawah Ke Atas</figcaption>
</figure>

<figure class="slide-left">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg51YhUtqLdg1lfukM-xhIUtJiW7LvZwp9JHlQb9Mc7CoA9mMQq5GfI5zQnytte0GR0x0sqIMuk_JK7FERtFsL7BtDjhW2rG_nxxcKfNvtBWwSkj9LZVkGwcUSiIgKqIbXScIKcEmf6iSM/s380/124.jpg">
      <figcaption>Dari Kiri Ke Kanan</figcaption>
</figure>

<figure class="slide-right">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ZgRvcybXdg1-hMP0Frvf3jAd3p2Btgs4YG-gyhPpe62veKslmzQFcIR3RpmorBW50yzHVGbxQ7HJeBfXObqJ2FmBLQlZCStKyQYWxMSIN4OqmZJNWVenLuueyqj1pMoSN9qosOO7bNk/s500/bbg.jpg">
      <figcaption>Dari Kanan Ke Kiri</figcaption>
</figure>


Cukup mudah dan praktis bukan.! Dengan pengembangan beberapa variasi efek slide, Anda bisa membuat variasi-variasi yang berbeda atau bahkan yang lebih menarik lagi dari ini, misalnya seperti ini -

Perpindahan Slide Gambar Tanpa Lompatan  ► DEMO SHOW
Katakan Cinta Dengan Tampilan Gambar Efek Rotate  ► DEMO SHOW
Efek Zoom Gambar Mode Slide Teks  ► DEMO SHOW
Membuat Koleksi Gambar Hover Efek Zoom Right  ► DEMO SHOW
Cara Membuat Efek Remote Link Pada Gambar  ► DEMO SHOW

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= 4 Variasi Slide Teks Pada Gambar
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

16 komentar

  1. (o) tinggl menunggu rangkuman dari efek2 dalam blog ini..!, bagaimana jadinya kalau dituangkan ke dalam satu wadah ..!

    TERUS BERKREASI..!

    sdh dicoba tadi mba..!,,,sepertinya kode template sy kacau,..jd penerapannya jg lucu.. ;-(


    suka sama gambar gunungnya Mba..! dari kiri ke kanan,.kalau liat langsung ingin bersyair.. :-#
    seperti 2 sisi mata koin yg tdk terpisahkan dari yg punya gambar

    BalasHapus
    Balasan
    1. tidak semua template menggunakan versi yang responsive pada struktur tata-letak widget blognya mas, jadi kalau hasil diatas tidak sesuai setelah diterapkan coba ubah pada kode ini:
      [pre]
      figure {
      float: left;
      display: block;
      position: relative;
      overflow: hidden;
      margin: -2em 15px 50px auto;
      width:350px;
      height:220px;
      border:2px solid #e06666;
      }
      [/pre]

      silahkan sesuaikan dengan template mas, pada kode yang saya cetak tebal

      Hapus
  2. Wah teksnya menarik juga nh Hieehiheie. Aseli. Baru tau saya kalau ada script kayak gini. Mau juga dipasang di edit HTML blog saya. Keren keren. Izi sedot ya

    BalasHapus
    Balasan
    1. saya hanya menggunakan pengembang efek dengan kode CSS mas (CSS Only) tanpa script.

      jadi saya membuat teksnya saja yang diberi efek transisi, jadi tampilan gambar diam (tidak bergerak)

      Hapus
  3. inovasi yang luar biasa ya mbak, luar biasa dan luar biasa, ndak bisa komen lagi selain luar biasa :D

    BalasHapus
  4. jadi...slide itu gambar yang suka nongol-nongla gituh kan?

    BalasHapus
  5. banyak juga yah kodingnya,, duh repot nih heheh,,,, ;-(

    BalasHapus
  6. keren mba , jadi pingin nyiba di blog

    BalasHapus
  7. gua gak mudeng mbak hehehe soalnya saya bloger baru... baru 2 hari nge blog
    ngeramein komentar aja gak pa2 ya mbak salam kenal mbak :D

    BalasHapus
    Balasan
    1. saya juga masih newbie kok mas, belum tahu banyak tentang ngeblog, hehe

      Hapus
  8. ayoo kasih tips yang lain lagi mbak :)))

    BalasHapus
  9. Senang sekali di sini bisa belajar banyak hal tentang blog. Sangat bermanfaat

    BalasHapus
  10. keren sekali bos, baru pernah variasi slide teks pada gambar, ijin menanamkan kodenya yia bos....

    BalasHapus
  11. Iya mas silahkan... diobral- diobral ayo-ayo... haha piz :>) .. si mbak hebat. :)

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK