Tạo thanh trượt cho liên kết Web/Blog

Nhằm tạo điều kiện "Kết nối bạn bè, sẻ chia kinh nghiệm, đạt nhiều thành công" đồng thời cũng để cho khách tham quan dễ dàng tham khảo thêm nhiều trang Web/Blog có cùng chủ đề, một số Web/Blog thường tạo mục "Liên kết Blog" với nhiều Web/Blog khác...

Các liên kết được nằm gọn trong khung trượt có đường viền bao bọc, cạnh phải của menu có thanh trượt lên xuống, ảnh đại diện (Favicon) và các tên blog được hiển thị trên một màu nền. Khi bạn rê chuột vào thì các ảnh đại diện cũng như tên blog sẽ thay đổi màu sắc và trượt "nhẹ" ra bên phải của menu, ngoài ra một điều đặc biệt ở menu này là khi bạn click vào một trong những Web/Blog liên kết thì sẽ xuất hiện một bảng nhỏ (pop-up) ngay tại Web/Blog của bạn để bạn tham khảo mà không phải rời khỏi trang Blog của mình.

Bạn chỉ cần đăng nhập vào blog > Chọn Bố cục > Chọn thêm tiện ích HTML (nếu chưa biết cách thêm tiện ích HTML/Javacript thì mời bạn xem TẠI ĐÂY). Bây giờ bạn dán toàn bộ code phía dưới vào.

<style>

#link-cia {

width: 300px;

 border: 10px groove green;

 overflow: auto;

height: 300px;

 padding-left: 0px;

}

#link-cia ul {

display: inline;

 margin-left: 0px;

}

#link-cia ul li {

list-style: none;

 margin-left: 0px;

background: #000000;

 border: 1px solid #fff;

padding: 4px;

 padding-left: 15px;

-webkit-transition:all 3.5s ease;

-moz-transition:all 3.5s ease;

 -o-transition:all 3.5s ease;

 transition:all 3.5s ease;

}

#link-cia ul li:hover {

 background: #0638DB;

 border : 1px solid #fff;

border-right: 10px solid #fff;

-webkit-transition:all 1.5s ease;

 -moz-transition:all 1.5s ease;

-o-transition:all 1.5s ease;

 transition:all 1.5s ease;

}

#link-cia ul li a {

color: red;

 text-decoration: none;

font-family: Times new roman;

 font-size: 19px;

text-shadow: 0px 0px 1px #fff;

 -webkit-transition: padding 1.5s ease-out;

-moz-transition: padding 1.5s ease-out;

-o-transition: padding 1.5s ease-out;

 transition:all 1.5s ease;

}

#link-cia ul li a:hover {

 color: yellow;

 text-decoration: none;

 padding-left: 15px;

-webkit-transition: padding 0.5s ease-out;

-moz-transition: padding 0.5s ease-out;

-o-transition: padding 0.5s ease-out;

 transition:all 0.5s ease;

}

</style>

<script
language="JavaScript">   

function popUp(URL) {

day = new Date();

id = day.getTime();

eval("page" + id + " = window.open(URL, '" + id +
"',
'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=900,height=550,

left= 50,top = 100');");  

}   

</script>

<div id="link-cia">

<ul>

<li><a href="javascript:popUp('Link blog LK')"><img align="top" height="16px" width="16px"
src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>



<li><a href="javascript:popUp('Link blog LK')"><img align="top" height="16px" width="16px"
src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>

 
<li><a href="javascript:popUp('Link blog LK')"><img align="top" height="16px" width="16px"
src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>

<li><a href="javascript:popUp('Link blog LK')"><img align="top" height="16px" width="16px"
src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>



<li><a href="javascript:popUp('Link blog LK')"><img align="top" height="16px" width="16px"
src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>

</ul></div>

Để phù hợp theo ý thích của mình, bạn có thể thay đổi các dòng lệnh màu xanh, đỏ, vàng. Trong đó:

* Width (màu tím): Độ rộng của khung menu.

* Height (màu tím): Độ cao của khung menu.

* Green (màu tím): Màu đường viền của khung menu

* Background (màu tím): Màu nền khi chưa rê chuột.

* Color (màu tím): Màu chữ khi chưa rê chuột.

* Font family (màu tím): Font chữ của tên Blog liên kết.

* Font size (màu tím): Kích cỡ chữ của tên Blog liên kết.

- Background (màu hồng): Màu nền khi rê chuột vào.

- Color (màu hồng): Màu chữ khi rê chuột vào.

- Width (màu hồng): Độ rộng của bảng nhỏ (pop-up).

- Height (màu hồng): Chiều cao của bảng nhỏ (pop-up).

- Left (màu hồng): Khoảng cách bên trái của bảng nhỏ tính từ bên trái của Blog.

- Top (màu hồng): Khoảng cách ở trên của bảng nhỏ tính từ đầu của Blog.

+ Height (màu đỏ): Chiều cao của ảnh đại diện (Favicon).

+ Width (màu đỏ): Độ rộng của ảnh đại diện (Favicon). 

Còn các dòng lệnh màu đỏ còn lại: Link Blog liên kết, Link ảnh đại diện, Tên Blog liên kết chắc các bạn biết rồi, mình không giải thích nữa.  Sau cùng bấm Lưu rồi quay vào Blog xem kết quả nha

Mở rộng thêm:

Nếu muốn thêm nhiều liên kết nữa, bạn copy dòng lệnh này:

<li><a href="javascript:popUp('Link blog LK')"><img align="top" height="16px" width="16px"
src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>

…và dán trên dòng lệnh:

</ul></div>

Cuối cùng bấm Lưu lại là OK!!

Nguồn : dunghennessy