0 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.

All RSS Widget  Demo

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Vk5u9E_BrccOdVoVNyDoVx0FyIu-oWnmkckDNOUXyL3QV5zbQ2-LuoMW0kj7a_P191mXs57vigC2XtTu5jyN_eNGxQGkEwVLFpYf6W2Z6q49nIOuhQa_i5L-3HHV8ezudousvvoG_bY/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