skip to main | skip to sidebar

INFOIKI

tutorial untuk mengedit, mempercantik,membuat, dan memperindah blog template seo gratis

  • Home
  • Template
  • Ebook
  • Kata Mutiara
  • Tips Blog
  • Video
  • Umum
 

Dapatkan Update!

Dapatkan artikel terbaru dari INFOIKI yang akan dikirim ke email anda secara gratis!
Browse » Home » Ngeblog » Membuat panel deskripsi Gambar dengan CSS keren

Membuat panel deskripsi Gambar dengan CSS keren

   Pada posting kali ini, saya akan share tentang Membuat panel Deskripsi gambar dengan CSS. Maksudnya, saat mouse diarahkan ke gambar, dibawah gambar akan langsung muncul panel deskripsi gambar. Yah, seperti tooltip. Bedanya, panel deskripsi ini muncul dibawah, sedangkan tooltip muncul di setiap area. Oke, langsung saja mulai.

1. Login blog.
2. Centang Expand template widget.
3. Gunakan CTRL dan F.
4. Cari kode ]]></b:skin>.
5. Copas kode dibawah ini, lalu letakkan diatas tag ]]></b:skin> tadi.

.imagepluscontainer{  position:relative;  z-index:1;  font-family:verdana;  font-size:13px}
.imagepluscontainer img{  position:relative;  z-index:2;  -moz-transition:all 0.5s ease;   -webkit-transition:all 0.5s ease-in-out;  -o-transition:all 0.5s ease-in-out;  -ms-transition:all 0.5s ease-in-out;  transition:all 0.5s ease-in-out}
.imagepluscontainer:hover img{  -moz-box-shadow:5px 5px 5px rgba(0,0,0,0.5);  -webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.5);  box-shadow:5px 5px 5px rgba(0,0,0,0.5);  -moz-transform:scale(1.05,1.05);  -webkit-transform:scale(1.05,1.05);  -ms-transform:scale(1.05,1.05);  -o-transform:scale(1.05,1.05);  transform:scale(1.05,1.05)}
.imagepluscontainer div.desc{  position:absolute;  width:90%;  z-index:1;   bottom:0;   left:5px;  padding:8px;  background:rgba(0,0,0,0.8);   color:white;  -moz-border-radius:0 0 8px 8px;   -webkit-border-radius:0 0 8px 8px;  border-radius:0 0 8px 8px;  opacity:0;   -moz-box-shadow:0 0 6px rgba(0,0,0,0.8);   -webkit-box-shadow:0 0 6px rgba(0,0,0,0.8);  box-shadow:0 0 6px rgba(0,0,0,0.8);  -moz-transition:all 0.5s ease 0.5s;   -webkit-transition:all 0.5s ease 0.5s;  -o-transition:all 0.5s ease 0.5s;  -ms-transition:all 0.5s ease 0.5s;  transition:all 0.5s ease 0.5s}
.imagepluscontainer div.desc a{ color:white}
.imagepluscontainer:hover div.desc{  -moz-transform:translate(0,100%);  -webkit-transform:translate(0,100%);  -ms-transform:translate(0,100%);  -o-transform:translate(0,100%);  transform:translate(0,100%);  opacity:1}
.imagepluscontainer div.rightslide{ width:150px;   top:15px;  right:0;  left:auto;   bottom:auto;   padding-left:15px;  -moz-border-radius:0 8px 8px 0;  -webkit-border-radius:0 8px 8px 0;  border-radius:0 8px 8px 0}
.imagepluscontainer:hover div.rightslide{ -moz-transform:translate(100%,0);  -webkit-transform:translate(100%,0);  -ms-transform:translate(100%,0);  -o-transform:translate(100%,0);  transform:translate(100%,0)}
.imagepluscontainer div.leftslide{ width:150px;   top:15px;  left:0;  bottom:auto;   padding-left:15px;  -moz-border-radius:8px 0 0 8px;  -webkit-border-radius:8px 0 0 8px;  border-radius:8px 0 0 8px}
.imagepluscontainer:hover div.leftslide{ -moz-transform:translate(-100%,0);  -webkit-transform:translate(-100%,0);  -ms-transform:translate(-100%,0);  -o-transform:translate(-100%,0);  transform:translate(-100%,0)}
.imagepluscontainer div.upslide{ top:0;  bottom:auto;   padding-bottom:10px;  -moz-border-radius:8px 8px 0 0;  -webkit-border-radius:8px 8px 0 0;  border-radius:8px 8px 0 0}
.imagepluscontainer:hover div.upslide{ -moz-transform:translate(0,-100%);  -webkit-transform:translate(0,-100%);  -ms-transform:translate(0,-100%);  -o-transform:translate(0,-100%);  transform:translate(0,-100%)}

6. Selanjutnya, klik Save template.

   Selesai! Sekarang, anda hanya butuh script untuk menampilkan penel deskripsi tersebut di postingan blog anda. Caranya, sebagai berikut :
1. Klik Buat entri baru.
2. Ubah mode compose menjadi HTML.
3. Lalu, masukkan/paste kode seperti dibawah ini :

<center><div class="imagepluscontainer" style="width:263px;">
<img alt="JUDUL GAMBAR" src="ALAMAT/ LINK GAMBAR">
<div class="desc downslide">
MASUKKAN DESKRIPSI GAMBAR DI SINI
</div></div></center>















4. Lalu, klik pratinjau untuk melihat tampilan maksimalnya.
5. Tulis artikel dalam mode compose, lalu klik publikasikan.

 Keterangan :
a). Kode berwarna biru adalah lebar gambar.

 Jadinya akan seperti ini gan :


Accel World - INFOIKI
Accel world [INFOIKI] - [anime] Accel world adalah game online paling populer pada tahun 2049. Ini bukan sekedar game, tapi game ini sangat berpengaruh pada dunia nyata. Banyak yang perlu dikorbankan. Pokoknya seru deh! Nonton sama saya [Yustin A!] di animeindo.tv ya. :)

Posted By Efendy bloggers | -

Comments :

1
fiska mengatakan... on 
30 September 2012 pukul 03.22

yes,akhirnya nemuin juga yang saya cari"
makasih mz dah share info nya...
mampir ke gubug saya mz bila berkenan,,^^
tq b4

Posting Komentar

Aturan Berkomentar
1. No spam!
2. No live link!
3. No maho :D

←  Posting Lebih Baru Posting Lama  → Beranda
Langganan: Posting Komentar ( Atom )

Statistik

Statistic Blog:
PageRank Checking Icon
SEO Reports for infoiki.blogspot.com

Pencarian

Kategori

  • Advertiser
  • Diet
  • Ebook gratis
  • Facebook
  • Handphone
  • Jasa Like
  • Kata Kata
  • Komputer
  • Kontes SEO
  • Ngeblog
  • Review‎
  • Software
  • Template
  • tips trik ngeblog
  • Umum
  • Video

Terpopuler

  • Software Hack Wifi GRATIS [WzCook.exe]
  • Kumpulan template blog Imut dan cantik (Blogspot)
  • Download template blog Anime keren
  • Cara paling ampuh membuka situs yang diblokir telkom
  • 3 langkah mudah membuat banner sendiri
  • Software SMS gratis lewat pc/komput [free download]
  • Cara menghapus virus dengan cara manual menggunakan CMD
  • 7 Cara mudah menghafal script tanpa hafalan
  • tips Cara merawat ayam serama
  • Trik mudah membuat header blog bergerak (Gif)

Pengikut

Diberdayakan oleh Blogger.
.

Send Quick Massage

Nama

Email *

Pesan *

 
INFOIKI
Template by Infoiki | Powered by Blogger