Tạo “Friend Connect” - widget Khung liên kết bạn bè

Dĩ nhiên Google cũng đã cung cấp cho các Blogger một tiện ích tương tự là Google Friend Connect hay Followers, nhưng tiện ích này có một vài nhược điểm như :

• Phải sử dụng 1 file JavaScript để thực thi. Điều này xem ra không ổn vì sẽ ảnh hưởng đôi chút đến tốc độ tải trang của Blog, cho nên nó thường được các Blogger đặt ở Footer (bên ngoài content-wrapper để tiện ích tải sau cùng).
• Đoạn code để tạo nên tiện ích không hợp chuẩn W3C Validator - Điều này sẽ ảnh hưởng đến nhiều thứ khác như khả năng seo của chính blog bạn.

Hôm nay namkna sẽ giới thiệu đến các bạn cách tạo cho mình khung liên kết phần nào khắc phục và hạn chế được các nhược điểm chết người trên. Các bạn có thể xem hình ảnh demo bên dưới:

Hoặc bạn cũng có thể bấm vào link bên dưới để xem các demo của mình.

 Demo for Post

Để thêm tiện ích này cho blog của mình bạn hãy thực hiện theo các bước sau nha:

» Trang trí tiện ích liên kết bạn bè cho blog

1- Vào bố cục (Layout)

2- Tạo một widget HTML\JavaScript và dán vào đoạn code bên dưới ( không cần tạo tiêu đề cho widget)

<style type="text/css">
#namknaconnect{margin:0;  padding: 0; height:238px; overflow: auto;  background:url(http://4.bp.blogspot.com/-RupnFFbY4O8/UosIINNeoMI/AAAAAAAAAD0/zcf_pMQmBJw/s1600/minhnhut027-lien-ket-cong-dong-blogger-viet-minhnhut027.blogspot.com.jpg)  no-repeat bottom right; font-weight:bold} 
#minhnhut027connect p {margin:0; padding:2px 10px} 
.favicon {width:16px; height:16px; margin-right:5px} 
.connect {width:48px; height:48px; margin:5px 10px -15px 0}
</style> 
<div id="minhnhut027connect"> 
<center  style="margin-bottom:15px"><img  src="http://2.bp.blogspot.com/-uo53Gq8tg04/UosL-3PvKmI/AAAAAAAAAEI/rK67CsY7EXs/s1600/minhnhut027-connect-blogspot.png"  class="connect"/><a href="http://minhnhut027.blogspot.com/2013/11/ket-noi-blogger.html">KẾT NỐI BẠN BÈ</a></center> 
<p> <img src="icon" class="favicon" /> <a href="http://minhnhut027.blogspot.com" target="_blank">minhnhut027</a></p> 
<p> <img src="icon" class="favicon" /> <a href=" Liên kết tới blog bạn bè" target="_blank">Tên blog</a></p> 
<!—tương tự cho các liên kết khác -->
</div>

Thay đoạn code được in đậm cho phù hợp.

* Update : do có bạn yêu cầu làm cho danh sách liên kết chuyển động từ dưới lên ( hoặc từ trên xuống ) để làm cho Blog trông đỡ “tĩnh lặng” hơn. Để làm điều đó, các bạn chỉ việc thay đoạn code bên trên bằng đoạn code sau :

<style type="text/css">      
#namknaconnect{margin:0;  padding: 0; border:double #ccc;  background:url(http://4.bp.blogspot.com/-RupnFFbY4O8/UosIINNeoMI/AAAAAAAAAD0/zcf_pMQmBJw/s1600/minhnhut027-lien-ket-cong-dong-blogger-viet-minhnhut027.blogspot.com.jpg)  no-repeat bottom right; font-weight:bold}       
#namknaconnect p {margin:0; padding:2px 10px}       
.favicon {width:16px; height:16px; margin-right:5px}       
.connect {width:48px; height:48px; margin:5px 10px 0 0}       
</style>       
<div id="namknaconnect">       
<center  style="margin-bottom:25px"><img  src="http://2.bp.blogspot.com/-uo53Gq8tg04/UosL-3PvKmI/AAAAAAAAAEI/rK67CsY7EXs/s1600/minhnhut027-connect-blogspot.png"  class="connect"/><a href="http://minhnhut027.blogspot.com/2013/11/ket-noi-blogger.html">KẾT NỐI BẠN BÈ</a></center> 

<marquee align='left' direction='up' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' height='165' width='100%'>       
<p> <img src="icon của bạn" class="favicon" /> <a href="http://minhnhut027.blogspot.com" target="_blank">minhnhut027</a></p>       
<p> <img src="icon của bạn" class="favicon" /> <a href="Liên kết tới blog bạn bè" target="_blank">Tên blog</a></p>       
<!--tương tự cho các liên kết khác-->       
</marquee>       
</div>

<<<>>>

- Thay đổi Up thành down nếu bạn muốn trôi từ trên xuống.
Như vậy là bạn đã có tiện ích “Liên kết bạn bè” đơn giản mà đẹp mắt rồi đó.

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

http://namkna.blogspot.com