Hướng dẫn tạo thư viện ảnh cho Blogger

LongAnIT 7/02/2019
Như chúng ta đã biết tất cả các Website và Blog hiện nay đa phần đều có chuyên mục thư viện ảnh. Với thư viện ảnh các bạn có thể tùy biến làm đẹp cho website của mình ví dụ như: Ảnh hoạt động công ty, ảnh thiên nhiên, xe, nhà... và nhiều thể loại khác. 

Gallery tạo bởi longanit.com

Trong Blogger khi bạn upload hình ảnh khi đăng bài thì mặc nhiên hình đó sẽ nằm trong server của blogger. Tuy nhiên việc sắp xếp hình ảnh mặc định trong Blogger không được đẹp cho lắm. Vì vậy trong bài viết này LongAnIT sẽ hướng dẫn các bạn tạo một thư viện ảnh ( Gallery ) với các bước thực hiện đơn giản.

Bước 1: Đăng nhập vào Blogger - Trang - Tạo trang mới
Bước 2: Chuyển sang Tab HTML và Copy đoạn code bên dưới dán vào

<style>
.gallery {
    padding: 0 5px;
    float: left;
    width: 24.99999%;
}
div.gallery img {
    width: 100%;
    height: auto;
}
div.gallery img:hover {
opacity: 0.8;
}
div.desc {
    padding: 10px;
    text-align: center;
}
* {
    box-sizing: border-box;
}
@media only screen and (max-width: 700px){
    .gallery {
        width: 49.99999%;
        margin: 6px 0;
    }
}
@media only screen and (max-width: 500px){
    .gallery {
        width: 100%;
    }
}
.image-gallery:after {
    content: "";
    display: table;
    clear: both;
}
</style>
<div class="image-gallery">
  <!-- Grid Image Gallery -->
  <div class="gallery">
      <img src="Địa chỉ ảnh 1" alt="SEO-IMAGE-CAPTION">
  </div>
  <!-- Grid Image Gallery with Caption -->
  <div class="gallery">
      <img src="Địa chỉ ảnh 2" alt="SEO-IMAGE-CAPTION">
      <div class="desc">MIÊU TẢ DƯỚI HÌNH ẢNH</div>
  </div>
  <!-- Clickable Grid Image Gallery -->
  <div class="gallery">
    <a href="LINK" target="_blank">
      <img src="Địa chỉ ảnh 3" alt="SEO-IMAGE-CAPTION">
    </a>
  </div>
  <!-- Clickable Grid Image Gallery with Caption -->
  <div class="gallery">
    <a href="LINK" target="_blank">
      <img src="Địa chỉ ảnh 4" alt="SEO-IMAGE-CAPTION">
    </a>
    <div class="desc">MIÊU TẢ DƯỚI HÌNH ẢNH</div>
  </div>
</div> 
Code trên chia làm bốn 4 cột mỗi cột 1 hình và Reponsive trên các thiết bị Smartphone. Nếu bạn muốn chia thành 3 cột hoặc 2 cột vui lòng thay đổi code sau trong CSS.

.gallery {
    padding: 0 5px;
    float: left;
    width: 24.99999%;
}

  • Thay đổi giá trị :  24.99999% thành 33.333% ( chia làm 3 cột )
  • Thay đổi giá trị :  24.99999% thành 49.999% ( chia làm 2 cột )

Chú ý: Bạn tính làm sao để khi cộng giá trị tất cả các cột lại <=100% là ok

Kết luận: Bài viết trên tôi đã hướng dẫn các bạn cơ bản tạo thư viện hình ảnh trên blogger. Mọi thắc mắc vui lòng comment ngay bên dưới.

4 nhận xét

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây