Tạo “Friend Connect” widget cho Blogger

Chắc hẳn bạn đã từng thấy tiện ích Friend Connect – Kết nối bạn bè trên một blog nào đó. Đây là một khung chứa liên kết đến các trang blog cá nhân của những người bạn của chủ Blog.

Tiện ích này không những có thể giúp chủ blog liên kết dễ dàng đến các Blog khác, mà đây còn là một hình thức để quảng bá lẫn nhau giúp tăng Pageview cho những blog được liên kết.
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 ).
• Đ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. Chi tiết bạn có thể xem tại đây.

Chính vì lý do đó, và cũng theo yêu cầu của bạn Trung, hôm nay iTechPlus sẽ giới thiệu đến các bạn từng bước để tạo tiện ích này một cách dễ nhất.

Hình minh họa

1. Chuẩn bị
- Favicon của Blog bạn muốn liên kết
- Link đến Blog bạn muốn liên kết
2. Thực hiện
- Vào Thiết kế > Phần tử trang
- 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">
#itechconnect{margin:0; padding: 0; height:238px; overflow: auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi3xMEvHtoOdrWmuuO1BDrKveF5QpO3664ENAnq1GLqWo9zgTw8dx-HxuLU_NbhVWqykxYHGgVtzAlpqnICaWa7M2RBNwHOQxOpJeskAIsSzgmj1zoenIHIh1BKbvhXqmk0Y3YjOyPcuM/) no-repeat bottom right; font-weight:bold}
#itechconnect 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="itechconnect">
<center style="margin-bottom:15px"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQD5ARKMD2rEeEpH78u1NYylVGQGYnD9nBeLE0fucd8gqjMOBbVGLI24z62Sfrc8FIQTRQ7H1xRCBtH1w9uuALdmX-Yw4L_a5MT4PDw7esckYrubDynHGnWWQYgFLaxXddfLaDLrB0Rw8/" class="connect"/><a href="http://www.itechplus.info/">KẾT NỐI BẠN BÈ</a></center>
<p> <img src="YOUR FAVICON" class="favicon" /> <a href="
http://www.itechplus.info/" target="_blank">iTechPlus.info</a></p>
<p> <img src="YOUR FAVICON" class="favicon" /> <a href="
http://www.itechplus.info/" target="_blank">VNPCTech</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.
Như vậy là bạn đã có tiện ích “Liên kết bạn bè” đơn giản mà
Thất Tình.Biz | Phần mềm | Tin tức | Thủ Thuật | Phim | Game|Teen Sock| Scandan