Thủ thuật tạo khung liên kết thanh cuộn cho blogspot

1 Khung liên kết đẹp và gọn được nhiều blogger hướng tới. Chúng ta vẫn bắt gặp những dạng khung liên kết đó xuất hiện ở những blogger khác nhau. Khung liên kết thanh cuộn với những icon bắt mắt.

- Thủ thuật hôm nay mình chia sẻ tới các bạn bằng cách sử dụng 1 đoạn CSS để làm 1 liên kết blog thật đẹp
Demo tại trang blog: Demo thủ thuật Blogspot
- Hướng dẫn thủ thuật:
1. Vào bảng điều khiển blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
2. Dán code dưới đây vào tiện ích vừa thêm:

<style type="text/css">
#itviet360{margin:0; padding: 0; height:200px;overflow: auto; background:url(Link hinh) background:#FFFF no-repeat bottom right; font-weight:bold ;}
#itviet360 p {margin:0; padding:2px 10px}
.favicon {width:16px; height:15px; margin-right:8px}
20px 0}
.tochu
{
color: red;
}
.tochu:hover
{
color:red;
padding: 0px 0px 0px 16px;
}
</style>
<div id="itviet360">

<a href="http://itviet360.com/" target="_blank" title="Thủ thuật Blogspot, Mạng máy tính, tự học SEO Web" class="tochu"><img src="http://www.itviet360.com/favicon.ico" class="favicon" align="center"/>itviet360</a>
<br />
<a href="http://shock360.blogspot.com/" target="_blank" title="Tin shock, Scandal sao Việt, lộ hàng" class="tochu"><img src="http://www.shock360.blogspot.com/favicon.ico" class="favicon" align="center"/>Tin shock, Scandal sao việt</a>
<br />
<a href="http://tieulamtruyencuoi.com/" target="_blank" title="Truyện cười tiếu lâm tổng hợp" class="tochu"><img src="http://www.tieulamtruyencuoi.com/favicon.ico" class="favicon" align="center"/>Truyện cười tiếu lâm</a>
<br />
<a href="http://anhbiafb.blogspot.com/" target="_blank" title="Thu viện ảnh bìa Facebook - Cover FB timeline" class="tochu"><img src="http://www.anhbiafb.blogspot.com/favicon.ico" class="favicon" align="center"/>Ảnh bìa FB</a>
</div>

- Trong đó:
http://www.itviet360.com/favicon.ico là phần favicon của blog. Ví dụ nếu Blog của bạn có tên là abcd.blogspot.com thì link favicon là http://abcd.blogspot.com/favicon.ico
- Mở rộng nếu các bạn muốn cái kéo cuộn là màu xanh như Demo thì các bạn thêm 1 bước sau:
Vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
Tìm tới (Ctrl + F) ]]></b:skin> và dán code dưới đây ngay trên nó:

/* lien ket blog - itviet360 */
::-webkit-scrollbar {
height: 12px;
width: 12px;
background: #dddddd;
}
::-webkit-scrollbar-thumb {
min-height: 28px;
padding-top: 100px;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
background-clip: padding-box;
background-color: #0F83A0;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
}
::-webkit-scrollbar-corner {
background: #dddddd;
}

- Lưu lại và xem kết quả nhé các bạn

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