Cara Membuat Deskripsi Gambar Dengan Efek Sliding di Blogger - Tempat Blogging

Cara Membuat Deskripsi Gambar Dengan Efek Sliding di Blogger

Pada artikel ini saya mas basir akan menjelaskan bagaimana Cara Membuat Deskripsi Gambar Dengan Efek Sliding di Blogger  Kamu dapat menambahkan widget ini ke sidebar Anda. Jika Anda memiliki pos khusus Anda dapat menghubungkan posting Anda dengan description ini. untuk widget ini. Anda dapat mengubah gambar. Ikuti langkah ini untuk menambah ke Blog Anda.



1. Login ke blogger.com
2. Masuk ke bagian Layout / Design
3. Klik Tambahkan Widget.
4. Pilih HTML/Javascript.
5. Copy Kode dibawah ini dan Pastekan di HTML/Javascript.

<style>
.image-box {
  width:280px;height:280px;overflow:hidden;background-color:white;
  border:1px solid #ccc;float:left;margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
}
.image-container,
.image-details {height:280px;border:5px solid white;background-color:#ffc;
  transition:margin-top .4s ease-out .4s;
}
.image-container img {
  width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
  max-height:none;
  background-color:black;
}
.image-details h4,
.image-details p {
  margin:0 0 .2em;padding:0 0;height:70px;
}
.image-details h4 {
  font-size:120%;height:auto;
}
.image-details .details {
  padding:10px 12px;overflow:hidden;
}
.image-details .more {
  color:white;text-decoration:none;display:block;
  text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;
}
.image-box:hover {border-color:#bbb; width:280px;
  height:280px;}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}
</style>
<div class="image-box-wrapper" id="image-box-wrapper">
 <div class="image-box">
  <div class="image-container">
   <img width="280" height="280" src="http://2.bp.blogspot.com/-XtTVaIhT6dE/UX9-IAg95uI/AAAAAAAAAhg/FQzPqv9htEY/s1600/3.jpg" alt="Food">
  </div>
  <div class="image-details">
   <div class="details">
    <h4>Lorem Ipsum</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
    <p><a class="more" href="Post Link ">More</a></p>
   </div>
  </div>
 </div>

 <div style="clear:both;"></div>
</div>
Informasi :

  • Ganti Post Link Dengan Link Anda


7. Save  HTML/Javascript
Selesay Dech

Sekian dulu Postingan Artikel kali ini yang membahas tentang Cara Membuat Deskripsi Gambar Dengan Efek Sliding di Blogger, semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.


Show comments
Hide comments

12 Responses to "Cara Membuat Deskripsi Gambar Dengan Efek Sliding di Blogger"

  1. wah mantep om, tapi kayak gitu apa ga ngeberatin loading blog ya?

    ReplyDelete
    Replies
    1. Enggak kog gan, karna efeknya tidak terlalu wo :xD
      hahaha

      Delete
  2. mantap gan.. semoga sukses selalu...
    bookmark!

    ReplyDelete
  3. nice info gan
    ini bisa ningkatin SEO score ?
    saya lihat di chkme.com itu ada image missing description, bisa di dikurangi dengan teknik ini ?

    ReplyDelete
  4. oke nice info brad ,jangan lupa kunjungi blog saya ya di http://iagstarter.blogspot.com/

    ReplyDelete
  5. Kalau boleh tanya, slide yang sobat paparkan berat ngak ya loadingnya, sebab jika berat tentu akan menggangu kinerja blog secara keseluruhan. Terima kasih sebelumnya dan salam kenal

    ReplyDelete
  6. makasih banyak buat ilmunya gan, sangat bermanfaat,, nice info

    http://goo.gl/J1lkST - obat kolesterol

    ReplyDelete

Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Klik subscribe by email agar Anda segera tahu balasan komentar Anda

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close