Hướng dẫn tạo khung chứa liên kết

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&#7871;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 !!!