Widget Gambar Bergulir Keatas Dengan Deskripsi untuk Blogger

Tweet

Widget Gambar Bergulir Keatas Dengan Deskripsi untuk Blogger - Widget ini benar-benar sangat bagus untuk Anda yang sangat menyukai sliding-sliding pada blog Anda. Anda bisa memanfaatkannya untuk meningkatkan kesan pada pembaca blog Anda. Jadi tunggu apalagi? Silahkan manfaatkan widget ini sebaik mungkin.

Cara Buat Widget Gambar Bergulir Keatas Dengan Deskripsi untuk Blogger :

1. Buka akun blogger Anda
2. Masuk ke menu tata letak > edit HTML > HTML/Javascript
3. Pastekan kode berikut ini :

<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/AVvXsEg9GdZFDnvg9hLuE_iFAu7uq35l6UYmB8-NlM0YvGpwxUcOOyegFW2VtCGoMjrLuvd4GDXxROQUFd3wYI3DPzP8qN1JL_iJG_UFoFP6O26kTYm3BXmBn7HmAAPYmtRfuqzUfkb9P6Twdzo/s1600/3.jpg" alt="Food">
  </div>
  <div class="image-details">
   <div class="details">
    <h4>Judul pada postingan</h4>
    <p>Masukkan desripsi yang diinginkan disini...</p>
    <p><a class="more" href="URL Artikel">More</a></p>
   </div>
  </div>
 </div>
 <div style="clear:both;"></div>
</div>

Keterangan :

• Ganti tulisan yang diwarnai pada kode diatas.

     4.  Save widget Anda.

Maka, demikianlah artikel Widget Gambar Bergulir Keatas Dengan Deskripsi untuk Blogger semoga dapat membantu Anda untuk lebih paham. Terima kasih telah membaca artikel diatas.