Cách thêm tiện ích ảnh trượt với mô tả

Một phụ tùng có thêm một cái nhìn tuyệt vời vào trang web Blogger của bạn là trượt lên mô tả hình ảnh. Bạn có thể kết hợp phụ tùng phong cách này thông qua hướng dẫn này bởi những kẻ ở Bloggertrix. Bạn có thể thêm nó vào thanh bên và nếu bạn có một bài viết đặc biệt, bạn có thể liên kết nó là tốt. CSS và HTML cơ bản được sử dụng vì vậy nó dễ dàng tùy chỉnh nếu bạn muốn thay đổi hình ảnh.

Blogger Bảng điều khiển> Giao diện

Thêm Tiện ích> HTML / Javascript

Dán mã này

<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/AVvXsEgVjAjOSE79OsK8uKbE2nEnF-zfW4hX2xvLYxtXpKarRj77rJfr6Yc02L8V48RgQBhFfnp5TvcrfnBoocieytJYb7E1-V3KWszI9KGM1H-T6eD9XLdh9mykZxteL1JtlV939qPByUsxajA/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>

• save
• Lưu ý: Hãy sao lưu mẫu của bạn trước khi cố gắng để chỉnh sửa nó.