Thêm đường viền (border) cho hình ảnh web, blog

Loading...

Trang trí hình ảnh bài viết, hình ảnh thể hiện ở trên Website, blog của bạn thêm đẹp hơn. 1 thủ thuật khá hay đó là chúng ta thêm đường viền (border) hình ảnh cho blog, web khi chúng ta rê chuột tới.
Đây là thủ thuật làm được hoàn toàn dễ dàng trên Web, blog.

DEMO

 Cách làm:
- Đăng nhập vào bảng điều khiển blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
- Dán đoạn code CSS dưới đây ngay trên thẻ </head>

<style type='text/css'>
#outer-borders a img, #outer-borders a { border: none; float: left; }
#outer-borders a { margin: 3px; }
#outer-borders a:hover { outline: 3px solid #0000ff; }
</style>

Các giá trị của thuộc tính outer các bạn có thể tùy chỉnh theo ý muốn của mình.
- Lưu Template
- Thêm hình ảnh (thêm vào bài viết hoặc vị trí trên web, blog bạn muốn) của bạn có dạng sau:

<div id="outer-borders">

<a href="#"><img src="Link ảnh 1" alt="#" /></a>

<a href="#"><img src="Link ảnh 2" alt="#" /></a>

<a href="#"><img src="Link ảnh 3" alt="#" /></a>

</div>

Xong rùi, bạn xem kết quả nhé.

---

Chúc các bạn thành công !

Loading...

Chuyên mục: html-css, Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger