[Blogspot] Tạo widget 4 label đáng chú ý nhất cho blogspot

Các bạn có để ý bên sidebar phải của blog mình có widget tên "Đáng chú ý" không?

Đó chính là nội dung của bài viết thủ thuật blogspot hôm nay mình muốn giới thiệu đến các bạn. Thực ra thì cái này chỉ tùy biến Css để có được một widget chứa 4 hình ảnh chia đều theo 4 góc thôi. Đơn giản nhưng có lẽ sẽ giúp ích gì đó cho blog của bạn.

Tạo widget 4 label đáng chú ý nhất cho blogspot

Cách thực hiện:Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.

Bước 2: Dán đoạn Css bên dưới trước thẻ ]]></b:skin> và lưu template lại.

.tsmlogo {text-align: center;}
.tsmlogo  img {margin:0px 5px 5px 0px;padding:5px;text-align:center;border:1px solid #ddd;}
.tsmlogo  img:hover {border:1px solid #43a1a0!important;}
.tsmlogo  img.noborder {border:0;}

Bước 3: Bố cục - Thêm tiện ích - HTML/Javascript - Dán toàn bộ đoạn code dưới vào khung nội dung và lưu widget lại.

<div class="tsmlogo">
<a href="http://www.tsmblogger.com/search/label/Blogspot" title="Chia sẻ thủ thuật Blogspot"><img class="noborder" src="http://i.imgur.com/XOaphwp.png" width="125" height="125" /></a>
<a href="http://www.tsmblogger.com/search/label/Facebook" title="Tin tức, thủ thuật Facebook"><img class="noborder" src="http://i.imgur.com/wBRYSoP.png" width="125" height="125" /></a>
<a href="http://www.tsmblogger.com/search/label/Templates%20Blogspot" title="Kho Template Blogspot đẹp"><img class="noborder" src="http://i.imgur.com/JCejr36.jpg" width="125" height="125" /></a> 
<a href="http://www.tsmblogger.com/search/label/Th%E1%BB%83%20thao" title="Tin tức, video thể thao"><img class="noborder" src="http://i.imgur.com/VSaBUlP.jpg" width="125" height="125" /></a> 
</div>

Tùy chỉnh: Các bạn hãy thay link ảnh, label (nhãn) và tiêu đề mô tả sao cho hợp với blog của bạn nhé.

Kết luận:

Vừa rồi mình đã giới thiệu xong cho các bạn cách làm widget 4 label đáng chú ý cho blogspot. Nếu như các bạn upload hết link ảnh lên 1 host nhất định như blogspot hoặc imgur ... thì sẽ không hề ảnh hưởng đến tốc độ tải trang đâu vì bài viết không dùng bất kì đoạn Javascript nào cả! 

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

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!