Hình ảnh minh họa
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
.image-box {
width:320px;height:320px;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:310px;border:5px solid white;background-color:#eee;
transition:margin-top .4s ease-out .4s;
}
.image-container img {
width:310px;height:310px;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:320px;
height:320px;}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}
5. Save template lại và trở về phần bố cục (Layout)width:320px;height:320px;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:310px;border:5px solid white;background-color:#eee;
transition:margin-top .4s ease-out .4s;
}
.image-container img {
width:310px;height:310px;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:320px;
height:320px;}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<div class="image-box-wrapper" id="image-box-wrapper">
<div class="image-box">
<div class="image-container">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHnk5RfU95SELH4diZavaCERnx3Jd0QsvhkHPueePuh4jvFrw6fWR-k4a8H7gvx-h9yZd5DIZXVWIJ9Q1EPxD1Aica8fIvx1WKLtkKQddBDM_kxJHq0p2EPC8-oitG4A1Mji4_yluIoM/" alt="Food">
</div>
<div class="image-details">
<div class="details">
<h4>Tiêu đề</h4>
<p>Ở đây sẽ là nội dung mô tả cho hình ảnh của bạn</p>
<p>
<a class="more" href="# ">Đọc tiếp...</a></p>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
<div class="image-box">
<div class="image-container">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHnk5RfU95SELH4diZavaCERnx3Jd0QsvhkHPueePuh4jvFrw6fWR-k4a8H7gvx-h9yZd5DIZXVWIJ9Q1EPxD1Aica8fIvx1WKLtkKQddBDM_kxJHq0p2EPC8-oitG4A1Mji4_yluIoM/" alt="Food">
</div>
<div class="image-details">
<div class="details">
<h4>Tiêu đề</h4>
<p>Ở đây sẽ là nội dung mô tả cho hình ảnh của bạn</p>
<p>
<a class="more" href="# ">Đọc tiếp...</a></p>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
Bạn thay link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHnk5RfU95SELH4diZavaCERnx3Jd0QsvhkHPueePuh4jvFrw6fWR-k4a8H7gvx-h9yZd5DIZXVWIJ9Q1EPxD1Aica8fIvx1WKLtkKQddBDM_kxJHq0p2EPC8-oitG4A1Mji4_yluIoM/ thành link ảnh của bạn và tiêu đề nội dung của bạn.
7. Cuối cùng là save tiện ích lại.
Chúc bạn thành công!
Nguồn : traidatmui.com
Copy : CGC Blog
Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!

0 Bình Luận:
Đăng nhận xét
☺ Nội quy comments của CGC Forum :
1. Comments không được sử dụng lời lẽ thiếu văn hóa, ảnh hưởng xấu đến chính trị, tổ chức, cá nhân.
2. Không được sử dụng comments với mục đích spam.
Những comments làm trái quy định sẽ bị xóa...!
Xin cảm ơn các bạn đã đóng góp comments và tuân thủ nội quy của blog !
Notice by Admin