Hướng dẫn tạo khung chứa liên kết
Sunday, 18 July 2010
Hiện nay các Blogger chủ yếu liên kết với nhau theo hai hình thức đó là liên kết link hoặc logo.Liên kết logo được nhiều bạn Blogger ưa chuông hơn vì nó nó nhiều kiểu đặt rất đẹp như : xoay vòng , marquee ... Tuy nhiên hình thức liên kết ấy nặng, lại rất tốn thời gian load của blog nhất là đối với các blog có số lượng logo lớn .
Thay vào đó một số Blogger khác lại đặt liên kết theo kiểu link .Ưu điểm của loại hình liên kết này là nhẹ , nhờ thế blog có phần load nhanh hơn.Nhưng không giống với liên kết logo, liên kết link thường được đặt không đẹp, khó lôi cuốn người truy cập click vào. Sau đây mình sẽ hướng dẫn các bạn tạo một khung chứa các liên kết link đơn giản và đẹp
Thủ thuật này mình không có kèm hình minh họa, các bạn có thể xem demo ở:
XzipVN.Com
Để thực hiện thủ thuật này, chúng ta chỉ cần chèn 1 đoạn script nhỏ vào trong code template là xong. Bên dưới là các bước thực hiện :
1. Vào
Thiết kế
2. Vào
chỉnh sửa code HTML
3. Chèn đoạn code Javascript bên dưới vào trước thẻ đóng </head>
<link href='http://blog.xzipvn.com/file/linklist.css' media='all' rel='stylesheet' type='text/css'/>
4.Trở lại phần Thiết kế tạo một widget HTML/Javascript rồi dán code sau vào :
<div style="width:
330px; overflow: hidden;">
<div class="CPMS_2_AB" style="margin-bottom: 2px; position: relative; width:
330px;">
<div class="CPMS_2_L">
</div>
<div class="CPMS_2_C" style="width:
319px;">
<div class="CPMS_2_D"><div class="CPMS_2_SL">
</div>
<div class="CPMS_2_SC">
<a href="#">Link liên kết<div class="CPMS_2_IMG"></div></a>
</div>
<div class="CPMS_2_SR">
</div>
</div>
</div><div class="CPMS_2_R">
</div>
<div class="CPMS_2_ACB" style="width:
330px;">
<div class="CPMS_2_AC" style="width:
328px;">
<div class="CPMS_2_SA">
<!-- Bat dau link -->
<div class="CPMS_2_SAT" style="width:
329px;">
<a href="
http://mydomain.com" target="_blank">
Tiêu đề liên kết</a>
</div>
<div class="CPMS_2_SAC" style="width: 329px;">
Đoạn mô tả
</div>
<!-- Ket thuc link -->
</div>
</div>
</div>
</div>
</div>
Thay đổi các code đánh dấu màu đỏ cho phù hợp với blog của bạn ,
trong code mẫu, mình chỉ giới thiệu 1 link , nếu muốn thêm các link khác, các bạn chỉ cần thêm 1 vài code nhỏ như bên dưới :
<!-- Bat dau link -->
<div class="CPMS_2_SAT" style="width:
329px;">
<a href="
http://mydomain.com" target="_blank">
Tiêu đề liên kết</a>
</div>
<div class="CPMS_2_SAC" style="width: 329px;">
Đoạn mô tả
</div>
<!-- Ket thuc link -->
Chúc các bạn thành công !!!
Tags:
Breakingnews,
Khoi tao Blog,
Widget
Ý kiến bạn đọc [ 4 ]
Không biết bác Chinh có chỉnh sửa được cái code bài pro tabnew phong cách vnexpress ko nhĩ ? ^_^ Dạo này đợi bác Fandung lâu quá.
Các code đó chỉ add được khoảng 6 submenu (label) nếu quá 6 label hoặc tiêu đề dài quá nó ko hiển thị luôn.
Nếu bác chỉnh được thì chỉnh sao khi nhiều submenu nó tự xuống hàng dưới.
Thanks bác trước ^_^
Khôg phải vậy đâu, có thể do chiều rộng của 6 label đó dài hơn so với chiều rộng của pro tab news nên nó tràn xuống dưới thôi bạn à.
Nó ko hiển thị chứ ko phải tràn :D mình thì muốn nó tràn xuống để thành hàng thứ 2 :D
http://i630.photobucket.com/albums/uu21/vnfriends_tk1/loi.jpg
code hay lắm thank bạn nhiều nha
rảnh thì vào thăm blog mình rùi góp ýa kiến cho mình ha
Ý kiến của bạn