Cara Membuat Slide Image Description For Blogger

Cara Membuat Slide Image Description For Blogger - Ini adalah sebuah trik yang sangat unik untuk membuat slide image dengan deskripsi dibawahnya. Jika sobat memiliki postingan spesial yang ingin dishare, bisa menggunakan tips ini, dan letakkan di sidebar blog. Sobat bisa menggunakan imge dan dskripsi yang bisa diubah-ubah sesuka hati. Cara membuat nya pun sangatlah mudah, sobat tinggal tambahkan script berikut ke Add Gadget HTML.

<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/AVvXsEgPO8mW_3NzUcJKYjfn0U7kn8q5PlzHh-Q36Pw05XU2tg3QdYDZex3IE151ugAYCLj5v_L7pTLlIKVQAVCAYTcgjffMh5DXOm2rH74RQ-mIFjsqlbjugHugXjpLGu-7WQUTBrq4Hm-QhXc/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>

Cara edit :  
- width="280" height="280" = ini untuk mengatur lebar dan tinggi slide
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPO8mW_3NzUcJKYjfn0U7kn8q5PlzHh-Q36Pw05XU2tg3QdYDZex3IE151ugAYCLj5v_L7pTLlIKVQAVCAYTcgjffMh5DXOm2rH74RQ-mIFjsqlbjugHugXjpLGu-7WQUTBrq4Hm-QhXc/s1600/3.jpg = URL image yang harus sobat ganti.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy = Deskripsi
- Post Link = Link yang akan sobat isi untuk slide 

Okey, cukup sekian sob  Cara Membuat Slide Image Description For Blogger. Semoga bermanfaat

Script by : www.bloggertrix.com

Share this post