TẠO MENU DỌC LIÊN KẾT 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...

dunghennessy tình cờ "dạo quanh" trang Blog của bạn Buivansum thấy có bài đăng về "Tạo menu dọc để liên kết blog", thấy cũng "hay hay" và có copy code lại đem về chỉnh sửa đôi chút cho hoàn thiện hơn, nay đem chia sẻ với các bạn.

Menu dọc này được nằm gọn trong khung có đường viền màu 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 bấm vào "Xem thử" để xem trước menu này.

Xem thử

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('http://www.dunghennessy.blogspot.com')"><img align="top" height="16px" width="16px" src="http://dungheineken.blogspot.com/favicon.ico"/> Thủ thuật Computer</a></li>
 <li><a href="javascript:popUp('http://anhdepblog.blogspot.com')"><img align="top" height="16px" width="16px" src="http://anhdepblog.blogspot.com/favicon.ico"/> Ảnh đẹp cho Blog</a></li>
 <li><a href="javascript:popUp('Link blog liên kết')"><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 liên kết')"><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 liên kết')"><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 liên kết')"><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 liên kết')"><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 liên kết')"><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 liên kết')"><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 liên kết')"><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 liên kết')"><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 liên kết')"><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 liên kết')"><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 liên kết')"><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 liên kết')"><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 xanh): Độ rộng của khung menu.

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

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

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

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

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

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

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

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

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

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

- Left (màu và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 và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 liên kết')"><img align="top" height="16px" width="16px" src="Link ảnh đại diện (Favicon)"/> Tên blog liên kết</a></li>

Dán trên dòng lệnh  </ul></div> cuối cùng.

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