14.11.14
88
Memberi Tanggal Terbit Pada Gambar Saat Hover - Salah satu hal termudah dalam mengubah tampilan blog agar terlihat menarik adalah dengan cara mengubah tampilan gambar pada postingan. Seperti pertemuan kali ini SAHABAT BLOGGER 77 kembali menyapa sahabat semua dengan tutorial sederhana tentang cara memberi tanda pada gambar postingan dengan tanggal terbit, judul gambar dengan efek hover.

Tampilan gambar akan terlihat wajarnya saat Anda menyisipkan gambar pada postingan, namun tanggal terbit pada gambar akan ditampilkan hanya jika gambar dilintasi oleh mouse seperti ini:

Gambar hover


Seperti Efek Hover Gambar Dengan Desain Buka Tutup untuk menampilkan descripsi keterangan gambar, efek gambar kali ini saya memberi efek background blur-transparent pada gambarnya dengan kode pembentuk CSS seperti ini:

.info {width: 300px;height: 225px;}
.img-line .item-hover .mask {
  background-color:#000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);        
  opacity:0.5;
  z-index:0;}

Hasilnya :




DEMO SHOW




Inspirasi ini saya desain ulang karena beberapa waktu lalu saya pernah melihat gallery Template buatan Kate Michelin, dimana setiap gallery gambar beliau diberikan efek seperti ini saat akan mereview tampilan templatenya sebelum menekan tombol link download. Mungkin dengan efek seperti ini, akan memberikan sentuhan menarik jika Anda ingin membuat beberapa gallery gambar dengan memberi judul pada gambar, tanggal gambar diterbitkan, sehingga setiap masing-masing gambar akan memiliki keterangan.

Bagaimana, sahabat mau mencoba?
Berikut kode lengkapnya:



<style type='text/css'>
//* Image hover effect on dates show with css
input data: no javascript
visit: http://sahabatblogger77.blogspot.com
published on November 14, 2014
modified by. Devy Indiyani */
.stage {margin:0 auto;position:relative;padding:5px;text-align:center;}
.stage,.item-hover,.item-hover .mask,.item-img,
.info {width: 300px;height: 225px;}
.item-hover,.item-hover .mask,
.img-line .item-hover:hover .line {width:90%;}
.img-line .item-hover:hover {opacity:1;}
.item-img {
  background-color:#7a548f;
  z-index:0;
  position:absolute;
  top:0;left:0;}

.img-line .item-hover {
  z-index:100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity:0;
  cursor:pointer;     
  display:block;
  text-decoration:underline;
  text-align:center;}
  
.img-line .info {
  z-index:10;
  color:#00ff00;
  display:table-cell;
  vertical-align:middle;
  position:relative;
  z-index:5;}
  
.img-line .info .text {font-size:18px;}
.img-line .info .line {
  height:1px;
  width:0%;
  margin:5px auto;
  background-color:#ffffff;
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;}
  
.img-line .info .date {font-size:12px;}
.img-line .item-hover .mask {
  background-color:#000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity:0.5;
  z-index:0;}
</style>


Cukup copy kode CSS diatas, lalu temukan kode ]]></b:skin> pada Template Anda, selanjutnya letakkan kode tersebut diatasnya. Selanjutnya tempatkan kode HTML berikut pada formulir postingan Anda mode tulis HTML bukan yang Compose, seperti ini:


<div class="stage">
   <div class="stage img-line">
     <a class="item-hover" href="">
       <div class="info">
         <div class="text">
            Sahabat Blogger 77
         </div>
       <div class="line"></div>
         <div class="date">
            November 14, 2014
         </div>
       </div> <!..ending info..!>
     <div class="mask"></div>
     </a>
       <div class="item-img">
        <img alt="" src="Url-Gambar Anda.jpg"/>
       </div>
   </div> <!..ending img-line..!>
</div> <!..ending stage..!>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Memberi Tanggal Terbit Pada Gambar Saat Hover
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 =

88 komentar

  1. capluk dulu nih mumpung belum ada yg datang ..... :)

    BalasHapus
    Balasan
    1. sudah kayak king Cobra saja mas Fiu ini, maen capluk bae, hehe..
      sikat mas..!!

      Hapus
    2. klo yg dicapluk devy sih gpp deh mw king cobra atau king anakonda .... hehehehe :-)

      Hapus
    3. kalau Anaconda kan cuma bisa melilit-lilit mas, seperti kata kang jum kalau berhadapan dengan kode seperti ini suka membuat pikiran kang jum melilit-lilit juga, hehe..

      caplok Kang Jum, hehe..

      Hapus
    4. hehehehe, cuma bisa lilit yah ,,,,, klo gtu ntr yg sy lilit duluan devy loh ya ,,, :)

      Hapus
    5. kalau devy mati gimana.? hayooo....

      Hapus
    6. waduh...lagi berduaan nih, mbicarain lilit-lilit...kabur ah takut ngganggu :D

      Hapus
    7. kn melilitnya devy nya pake perasaan bukan pake kekerasan jdi gak bakalan mati ,, hayooo .... hehehe :)

      Hapus
    8. Ikut nyapluk Mas Fiu deh... biar pinter kaya Mbak Devy

      Hapus
    9. ikutan nyapluk adminnya aja dch daripada nyapluk kode juga ga mudeng, riweuh uey :p

      Hapus
    10. apaan sih koq capluk-caplukan

      Hapus
    11. ikut-ikutan mas fiu, kang cungkup :)

      Hapus
    12. mas Fiu nyapluk, mas saud juga ikutan nyapluk, terus kang jum juga mau nyapluk, wadduh,,,devy kabur saja dech,,hehehe..!!

      Hapus
    13. kau lari daku kejar :p

      Hapus
    14. haduuuuh ,,,, tuh kan devy nya kbur ,,,,, haaaaaaaaaaaaaa.....

      Hapus
    15. Ngemeng ngemeng saya pernah baca tulisan blogger yang menulis tentang Teh Devy, sebagai blogger tercantik menurut artikelnya Saya sudah baca tulisan beliau. Katanya Teh Devy dulu seorang Model ya. uHuii pantes cakep . Mojang Bandung ya

      Hapus
  2. kode css nya gak bikin lola kan yah ???

    oya .. itu kode HTML nya di letakkan di menu compose setiap kali mw publish artikel yah ? hehe

    BalasHapus
    Balasan
    1. bukan yang compose mas Fiu. S, tetapi HTML formulir seperti ini:

      https://4.bp.blogspot.com/-HMcbVbxLetE/VGVvdsJXz_I/AAAAAAAABZ8/tENqGqkZAXg/s1600/formulir%2BHTML.jpg

      Hapus
    2. eh salah ,,,hehehe,,, mksd pertnyaan sy brrti setiap publish artikle html tsb hrus diletakan jg kn ?

      atau ada yg bsa auto dengan ckup meletakan css pada template blog ? :)

      Hapus
    3. hihihi aku nyimak deh..

      Hapus
    4. tuh mas Fiu, teh santika jadi terkesimak sama mas, hehehe...

      Hapus
    5. apanya yg terkesima sihccoba ???? hehe

      Hapus
    6. uhukk... mas fiu pura-pura tapi mau ne... :))

      Hapus
  3. Menarik nih Mbak Devy,, bisa saya coba pada setiap artikel saya publikasi
    Makasih ya Mbak sudah berbagi. sukses selalu buat Mbak Devy

    BalasHapus
    Balasan
    1. mbak devy emang top markotop ya kang :p

      Hapus
  4. kalau diterapkan pada wordpress bisa ga mbak
    :p (c)

    BalasHapus
  5. boleh nih praktekin, ijin book mark ya

    BalasHapus
  6. kalau kode nggak banyak gini keknya muat diotak saya deh mbak

    BalasHapus
  7. pokokna mah teh Devy paling indehoy dch kalau soal kode-kode (c)

    BalasHapus
    Balasan
    1. pak ustadz mau ngerayu siapa yah hehe..

      Hapus
    2. ustadz juga manusia teh santika :p

      Hapus
    3. ngrayu kang jum

      Nadya: ustad gadungan :D

      Hapus
    4. hahayy dah pak ustadz mah :p

      Hapus
  8. Saat melihat gambar pertama, kurang ngerti juga tanggal yang dimaksud kaya gimana.
    tapi pas lihat demo nya, langsung ngerti, keren banget... nanti di praktkan... trimakasih salam kenal... :)

    BalasHapus
  9. mbak devi bisa bantu saya ndak, itu kok di blog saya gambar postingannya kok nggak muncul ya...gimana caranya bisa memunculkanny lagi > makasih..saya tunggu apabila berkenan

    BalasHapus
    Balasan
    1. <img src='//2.bp.blogspot.com/AAA.....jpg/>

      pembaharuan yang dilakukan oleh blogger flat Blogspot gak tahu atau hanya pak Ustad saja yang terkena atau yang lain, teapi saat ini thumbanail gambar tidak akan ditampilkan lagi. karena belum ada pemberitahuan oleh pihak blogspot sebelumnya.

      bukan saya yang punya blogger, jadi saya tidak tahu bagaimana memperbaikinya.

      Hapus
    2. [blockquote]Saat ini pihak blogger sedang melakukan perbaikan demi kepuasan dan keamanan pelanggan, salah satunya adalah dengan melindungi keamanan thumbanail gambar posting.
      tadinya bentuk Url-gambar menggunakan http://...jpg, untuk melindungi keamanan gambar diganti menjadi https://...jpg[/blockquote]

      bahkan untuk saat ini tanpa kita menyisipkan http atau https pada url, gambar sudah bisa tampil seperti ini misalnya:
      <img src='//2.bp.blogspot.com/AAA.....jpg'/>

      sekarang coba pak ustad lihat url-gambarnya menggunakan http atau http, jika https yang digunakan, maka thumbanail tidak tampil, Coba hapus s pada akhir https. Semoga berhasil.

      Hapus
    3. punya saya tadi http mbak, jadi g tampil..lalu sayan ganti jadi https, saya tambahin s jadi tampil...alhamdulillaah...trimakasih mbak devy cantik :)

      Hapus
    4. terimakasih kembali pak Us, kan tinggal sebaliknya saja.

      nah kalau bisa perlahan ganti semua url gambar pada posting pak ustad dengan https. hal ini agar bukan hanya conten saja yang terlindingi, tetapi gambar juga.

      Hapus
    5. oh begitu to mbak...oke nanti saya cek satu persatu.... :)

      Hapus
  10. Keren yaa mas, kalo kena kursor ada tanggalnya hehehe. Minta follback boleh nggak?

    BalasHapus
    Balasan
    1. masa follback diminta sih mbak. hmmm..boleh dech..

      Hapus
    2. Mbak Devy udah cantik begini masih dipanggil mas :p
      ternyata, kecantikan Mbak Devy masih perlu di pertanyakan :p
      xixixixh

      Hapus
    3. kelihatan ya kang jum, cuma ingin meramaikan komentar saja, padahal dalam komentar juga sudah devy buat tag teks Penulis terus pada permalink sudah devy sisipkan gambar adminnya, masih saja ada yang panggil mas.

      tolong kang jum lihat donk, emang Devy ada kumisnya gitu..!!? hehe..

      Hapus
    4. kasih tau ga yaaaaaa :p

      Hapus
  11. keren mbak efeknya,, :-d

    BalasHapus
  12. Aduhhh... Botak ni ntar klo aq maen kode html...hehe... Tapi kliatannya kok mudah to...ntar tak cari buku diary buat nyimpen catetan...xixi

    BalasHapus
    Balasan
    1. mau pinjem diary kang marnes kagak mas..? hehe

      Hapus
  13. waduuuh kode-kodenya banyak banget lagi, bisa kagak nie saya ngikutin ya? Da saya mah kalo dah utak-atik kode beginian langsung rarieut sirah neng, pelan-pelan aja kali ya, makasi atas hare ilmunya :)

    BalasHapus
  14. tadi saya lihat Demonya dan hasilnya juga keren banget mbak saya jadi kpingin nyomot nih ilmunya hehe boleh kah ? :)

    BalasHapus
    Balasan
    1. tetapi ntar habis dicomot , dibalikin ya..

      Hapus
    2. hei jangan cumat comot, sekali comot neng devy 100 ribu hehe

      demonya memang bagus mba, tp narapinnya takut salah..

      Hapus
    3. yg mw comot devy langkahin dulu kaki saya dulu nih ,,,,, :-d

      Hapus
    4. waduh ada arjunanya mbak devy :p
      mending kabur dulu aja dech sebelum kena tendangan kaki mas fiu :p

      Hapus
  15. Wah sangat unik sekali dan keren :) sangat bermanfaat nih.. trimakasih :) :))

    BalasHapus
  16. wah keren tuh, bisa untuk memberi informasi lainnya gak selain tanggal terbit?

    BalasHapus
  17. Kalau tips ini untuk mempercantik tampilan blog, aku gak mau lah blog aku tampilannya cantik. Uda cukup adminya aja yg cantik, blog aku gak usah ikutan cantik. Hahaha :-D

    BalasHapus
  18. Kalau tips ini untuk mempercantik tampilan blog, aku gak mau lah blog aku tampilannya cantik. Uda cukup admin blog ini aja yg cantik, blog aku gak usah ikutan cantik. Hahaha :-D

    BalasHapus
  19. Hidup BOBOTOH
    Hidup Persib Juara
    Iyesssssssssssssssssssssssssssssssssss Mba Devy

    *kagak nyambung sama artikel Abaikan

    BalasHapus
  20. Balasan
    1. podo wae karo aku kang :p
      sirahku juga sering nyut-nyutan :p

      Hapus
  21. untuk memberi tanggal pada gambar ternyata bisa pakai script ya kak, wah jadi tambah keren nih :)

    BalasHapus
  22. Assalaamu 'alaikum..!
    Selamat beraktifitas saja Vy..!

    BalasHapus
  23. cukup menarik dan atrakstif juga tampilan hovernyanya. saya bookmark dulu ya mbak. makasih atas tutorialnya dan salam sahabat blogger

    BalasHapus
  24. apa cara ini juga bisa di pergunakan untuk memprotek gambar yang di posting sehingga kita dapat mengclaim hak gambar tersebut dari waktu terbitnya karena di terbitkan duluan dari pada yang lain

    BalasHapus
    Balasan
    1. ini hanya merupakan efek bunda, yang mana tanggal terbit gambar kita sisipkan secara manual, kalau untuk memberi hak cipta kepada gambar, bunda bisa claim URL-nya untuk diberi licensi.

      karena kita tidak akan pernah tahu, mana gambar yang asli atau yang hasil copy, masalah ptotek, itu trgantung google-image yang menilai.

      Hapus
  25. senang banget datang kesini selalu di suguhi cara-cara yang kreatif... kasih bunga deh buat mbak devy nya... x-)

    BalasHapus
  26. Mba devy memang jago soal css ya.. saya malah gaptek soal efek-efek diblog ;((
    soalnya takut bentrok sama kode lainnya...

    BalasHapus
  27. gmn mba devi, ane mw belajar css?

    BalasHapus
    Balasan
    1. silahkan mas, apa yang dapat Devy bantu, pasti devy bagikan..

      Hapus
  28. kereeeeeeeennnn.. top markotop!!

    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