Chủ Nhật, 11 tháng 3, 2012

Tạo widget Box liên kết cho Blogger

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.




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">
#bachkhoamedia{margin:0; padding: 0; height:238px; overflow: auto; background:url(https://lh4.googleusercontent.com/_PAuO_he0N0k/TX3U9nzMeBI/AAAAAAAAEWQ/cwIAvkmHgkA/iTechPlusFriend.jpg) no-repeat bottom right; font-weight:bold}
#bachkhoamedia 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="bachkhoamedia">
<center style="margin-bottom:25px"><a href="
http://thuthuat-mya5class.blogspot.com/2012/03/tao-lien-ket-trong-trang-thu-thuat-cua.html ">KẾT NỐI BẠN BÈ<br /> <font size=3
color=red><bold>Đặt liên kết>>
Click here </bold></font><br />
  </a></center>



<img src="http://nd7.upanh.com/b6.s20.d1/065bf4046eaab2677a0d6b92b159d274_35894777.images.jpg" class="favicon" /> <a href="http://fandung.com/" target="_blank">BlOg FD  Tips For Blogger
</a><hr /><img src="
http://4.bp.blogspot.com/-TKpR1z2PmeY/T1Q0AOX-ttI/AAAAAAAAABw/_oufFjikblc/s1600/favicon.ico " class="favicon" /> <a href=" http://www.thuthuat-mya5class.blogspot.com/ " target="_blank">Thủ thuật cho bạn
</a><hr />


<!--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">
#bachkhoamedia{margin:0; padding: 0; height:238px; overflow: auto; background:url(https://lh4.googleusercontent.com/_PAuO_he0N0k/TX3U9nzMeBI/AAAAAAAAEWQ/cwIAvkmHgkA/iTechPlusFriend.jpg) no-repeat bottom right; font-weight:bold}
#bachkhoamedia 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="bachkhoamedia">
<center style="margin-bottom:25px"><a href="
http://thuthuat-mya5class.blogspot.com/2012/03/tao-lien-ket-trong-trang-thu-thuat-cua.html ">KẾT NỐI BẠN BÈ<br /> <font size=3
color=red><bold>Đặt liên kết>>
Click here </bold></font><br />
  </a></center>

<marquee align='left' direction='up' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' height='165' width='100%'>

<img src="http://nd7.upanh.com/b6.s20.d1/065bf4046eaab2677a0d6b92b159d274_35894777.images.jpg" class="favicon" /> <a href="http://fandung.com/" target="_blank">BlOg FD  Tips For Blogger
</a><hr /><img src="
http://4.bp.blogspot.com/-TKpR1z2PmeY/T1Q0AOX-ttI/AAAAAAAAABw/_oufFjikblc/s1600/favicon.ico " class="favicon" /> <a href=" http://thuthuat-mya5class.blogspot.com/ " target="_blank">Thủ thuật cho bạn
</a><hr />


<!--tương tự cho các liên kết khác-->
</marquee>
</div>

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 !
Nguồn:Bachkhoamedia 
Chuyên mục:

14 nhận xét:

  1. Mình muốn cho dòng chữ cố định không chạy lên chạy xuống thì làm sao bạn.

    Trả lờiXóa
  2. Thì bạn dùng code màu xanh ở trên là cố định, ở dưới là chữ chạy

    Trả lờiXóa
  3. Thank, mình đã làm được rồi.

    Trả lờiXóa
  4. Bạn ơi làm sao để chữ chỉ chạy lên cỡ 2/3 hình nền thôi?

    Trả lờiXóa
    Trả lời
    1. Mh không hiểu bạn có thể nói kĩ hơn không?

      Xóa
    2. mình muốn chũ chạy lên cỡ 2/3 hình là biến đi
      bạn vào blog mình xem, gần cuối trang ý
      http://gemini360o.blogspot.com
      cái hình nền có mấy người đang chỉ xuống link, vì vậy mình muốn link ko chạy qua mặt mấy người trên hình nền

      Xóa
    3. Cái này mh thật sự mh không biết mà cũng chưa từng thấy

      Xóa
  5. mình đang cần cái này, sẽ thử
    mời mọi người qua blog mình chơi nhé http://www.conguyet.com

    Trả lờiXóa
  6. đang kiếm 1 cái forrm đẹp đẹp làm box liên kết cho VinaPayza.com

    Trả lờiXóa

 
LÊN ĐẦU TRANG