Bây giờ bạn thử ngắm 2 hình ở trang DEMO này. Lưu ý: không thấy hiệu ứng khi xem ở IE.
Bạn thích kiểu ghi chú của hình 1 hay hình 2, nếu thích hình 1 thì bạn làm theo cách bình thường, upload ảnh lên xong thì viết ghi chú bên dưới nó. Nhưng nếu bạn thích kiểu ghi chú ở hình 2 thì sao?
Thủ thuật đơn giản sau sẽ giúp bạn có kiểu ghi chú ấn tượng này.
Các bạn đặt code này vào trướcdòng ]]></b:skin>.
.imgcaption {Xong rồi bạn lưu template lại.
padding-bottom:10px;
padding-top:30px;
position:relative;
}
.imgcaption cap {
position:absolute;
left:0%;
right:0%;
padding:10px;
background:#dddddd;
color:ffffff;
opacity:0.8 !important;
bottom:6%;
}
Trong bài đăng, khi bạn upload ảnh thì ảnh thường có dạng như thế này:
<div class="separator" style="clear: both; text-align: center;"
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYRi-DqGGpcobZt1VyXQUQQq9MG2CExed_OvWvOfAgjWB57Lov-ZEpWNYjx4nYp78NNqW_rLce1ZCEgv3850Lck0IZbSl2VmzHT0TkPsYWnhQLc047Rrd9rLCIYMsXey8V4wUfJV9j41K0/s1600/Nha+hat+Opera.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYRi-DqGGpcobZt1VyXQUQQq9MG2CExed_OvWvOfAgjWB57Lov-ZEpWNYjx4nYp78NNqW_rLce1ZCEgv3850Lck0IZbSl2VmzHT0TkPsYWnhQLc047Rrd9rLCIYMsXey8V4wUfJV9j41K0/s1600/Nha+hat+Opera.jpg" /></a></div>
Bây giờ bạn chỉ cần nhìn vào code bên dưới, lưu ý "seperator" đã được thay bằng "imgcaption" và trước thẻ </div> chúng ta thêm vào dòng code màu đỏ là OK.
<div class="imgcaption" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYRi-DqGGpcobZt1VyXQUQQq9MG2CExed_OvWvOfAgjWB57Lov-ZEpWNYjx4nYp78NNqW_rLce1ZCEgv3850Lck0IZbSl2VmzHT0TkPsYWnhQLc047Rrd9rLCIYMsXey8V4wUfJV9j41K0/s1600/Nha+hat+Opera.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYRi-DqGGpcobZt1VyXQUQQq9MG2CExed_OvWvOfAgjWB57Lov-ZEpWNYjx4nYp78NNqW_rLce1ZCEgv3850Lck0IZbSl2VmzHT0TkPsYWnhQLc047Rrd9rLCIYMsXey8V4wUfJV9j41K0/s1600/Nha+hat+Opera.jpg" /></a><cap>Nhà hát Opera Sydney</cap></div>
Chúc các bạn thành công.
{ 0 nhận xét... read them below or add one }
Đăng nhận xét