Cara Menciptakan Slide Image Description For Blogger

Cara Membuat Slide Image Description For Blogger - Ini yakni sebuah trik yang sangat unik untuk menciptakan slide image dengan deskripsi dibawahnya. Jika teman mempunyai postingan Istimewa yang ingin dishare, dapat memakai tips ini, dan letakkan di sidebar blog. Sobat dapat memakai imge dan dskripsi yang dapat diubah-ubah sesuka hati. Cara menciptakan nya pun sangatlah mudah, teman 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/AVvXsEg-3JA9z-BvDdJ4nz7eEvtY_9_-vi5Mxwxi0YMX2pXnZj7TRjaFrFL3sjEj0yYXFike5wnXqzScGaOk6bK-AhRXnPGBINJfGuE9Fj2ocXnY6qEKCOvNtOf0rTBOzLbLygDdt8bqVsKQnbE/s1600/3.jpg" alt="Cara Membuat Slide Image Description For Blogger Cara Membuat Slide Image Description For Blogger">
  </div>
  <div class="image-details">
   <div class="details">
    <h4>Lorem Ipsum</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed membisu 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/AVvXsEg-3JA9z-BvDdJ4nz7eEvtY_9_-vi5Mxwxi0YMX2pXnZj7TRjaFrFL3sjEj0yYXFike5wnXqzScGaOk6bK-AhRXnPGBINJfGuE9Fj2ocXnY6qEKCOvNtOf0rTBOzLbLygDdt8bqVsKQnbE/s1600/3.jpg = URL image yang harus teman ganti.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed membisu nonummy = Deskripsi
- Post Link = Link yang akan teman isi untuk slide 

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

Script by : www.bloggertrix.com

Share this post