7/5/13

Tạo khung liên kết bạn bè cho Blogger

Đăng bởi Admin | 7/5/13 | 13 nhận xét


Tạo “Friend Connect” widget cho Blogger (Khung liên kết bạn bè)
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 để 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 không mắc các nhược điểm trên.
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">
#namknaconnect{margin:0;  padding: 0; height:238px; overflow: auto;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlTl393o_j9qApdYQD9bizW3pitYoV7S1lf18ugiq_CixwrU2RFeKxFaXJ3kVGrYRnowkouOrG3X5H5pmW2FazlyvE_rRr5z8msq9sTDR42NfFIIWQvNRlgFOnhgk848DiEq4UYFFGURkT/s1600/namkna-lien-ket-cong-dong-blogger-viet-namkna-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 -15px 0}
</style> 
<div id="namknaconnect"> 
<center  style="margin-bottom:15px"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigNvUk93J4lpTcR48xervdzWLmWYX8fLqakYV9UBe8o4-I8WCC7z5ofL87DK5apOHd1r1F5qFbHbjPNIQ8mXOOW8dOB6YsoomOgtzkPUaVJfZLjHHq0rWtBnnQkZ8dwNBXJssKj_7v5jIV/s1600/namkna-connect-blogspot.png"  class="connect"/><a href="http://thuthuatvitinhaz.blogspot.com/">KẾT NỐI BẠN BÈ</a></center> 
<p> <img src="YOUR FAVICON" class="favicon" /> <a href="       
http://thuthuatvitinhaz.blogspot.com/" target="_blank">Thủ thuật vi tính</a></p> 
<p> <img src="YOUR FAVICON" 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlTl393o_j9qApdYQD9bizW3pitYoV7S1lf18ugiq_CixwrU2RFeKxFaXJ3kVGrYRnowkouOrG3X5H5pmW2FazlyvE_rRr5z8msq9sTDR42NfFIIWQvNRlgFOnhgk848DiEq4UYFFGURkT/s1600/namkna-lien-ket-cong-dong-blogger-viet-namkna-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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigNvUk93J4lpTcR48xervdzWLmWYX8fLqakYV9UBe8o4-I8WCC7z5ofL87DK5apOHd1r1F5qFbHbjPNIQ8mXOOW8dOB6YsoomOgtzkPUaVJfZLjHHq0rWtBnnQkZ8dwNBXJssKj_7v5jIV/s1600/namkna-connect-blogspot.png"  class="connect"/><a href="http://thuthuatvitinhaz.blogspot.com/">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="YOUR FAVICON" class="favicon" /> <a href="       
http://thuthuatvitinhaz.blogspot.com/" target="_blank">Thủ thuật vi tính</a></p>       
<p> <img src="YOUR FAVICON" 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 !

                                                                                                                 Theo Namkna
                                                                                                              Thu thuat vi tinh

13 nhận xét:

  1. Cho mình xin cái Link liên kết nhé bạn, mình đã add link của bạn rồi đó, trang bạn rất hay đấy
    Trang của mình tintuyensinh365.com

    Trả lờiXóa
  2. add mình với nhé !
    seowario.blogspot.com
    ttps://lh5.googleusercontent.com/-CLhnSr0qk1Q/UepJYlvsDMI/AAAAAAAAAS4/xERESo1biTo/h120/favicon.ico
    title:SEOWARIO

    Trả lờiXóa
  3. xin hỏi bạn:
    "1. Chuẩn bị
    - Favicon của Blog bạn muốn liên kết" tại favicon blog mình muốn liên kết không có gì chỉ có mỗi cái huy hiệu thì chuẩn bị coppy cái gì bay giờ, xin giúp mình cảm ơn

    Trả lờiXóa
    Trả lời
    1. Favicom là logo của blog ấy mà. Nếu khong có cũng chẳng sao bạn ạ..

      Xóa
  4. Cảm ơn bạn đã chỉ dẫn nhưng mình muốn hỏi thêm:
    trong cách tạo liên kết với blog khác tại widget HTML\JavaScript muốn liên kết thêm với các blog khác mình
    phải thực hiện tiếp từ bước nào .
    Mình gà nên hỏi hơi kỹ bạn thông cảm, cảm ơn bạn

    Trả lờiXóa
    Trả lời
    1. Bạn chép các đoạn code như thế này trong hộp: <p> <img src="YOUR FAVICON" class="favicon" /> <a href="
      Liên kết tới blog bạn bè" target="_blank">Tên blog</a></p>
      và dán xuống ngay dưới nó , thêm bao nhiêu thì dán bấy nhiêu...
      - Dòng: Liên kết tới blog bạn bè là link liên kết của blog mình liên kết
      - Tên blog liên kết
      - YOUR FAVICON: link mã favicon ( cái này không có thì thôi, cứ mặc kệ nó)

      Xóa
  5. và mình muốn đưa Ô có chữ liên kết xuống dưới sau mục giới thiệu bản thân thì làm như thế nào. cảm ơn bạn nhiều.

    Trả lờiXóa
    Trả lời
    1. Ý bạn hỏi mình ko hiểu lắm, nhưng bạn muốn ô liên kết hiển thị ở đâu thì hãy dán vào đó là đc

      Xóa
  6. Cảm ơn bạn mình đã kết nối được với nhiều blog và thậm trí cả fabook nữa, tuy nhiên hộp kết nối bạn bè (có hình 2 người và cái xích ) hiển thị ngay vị trí trung tâm nên nhìn vào không được hợp lắm, mình muốn cái hộp này ở dưới cùng sau phân nội dung bài viết thì có lẽ đẹp hơn. Bạn chỉ giúp mình với nhé

    Trả lờiXóa
    Trả lời
    1. Mình ko để ý lắm . Hình như nó ở góc trên bên trái đấy chứ. Trong khung LK có 2 ảnh thì phải. Bạn có thể thay đổi nền ( thay link ảnh có cái đuôi là .jpg hoặc .png trong code ) hoặc vị trí ảnh (thay đổi kích thước phải (Right), trái (Left), trên (Top),dưới (Bottom)). Bạn nhìn vào code ấy, thấy chỗ nào như thế thì thay, cứ thay bừa đi, lưu lại, mở cửa sổ khác để xem trang, ưng thì để lại, không thì lại sửa như cũ. Sửa ở các ô tiện ích này chẳng lo bị lỗi gì đâu mà sợ.

      Xóa

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

Support : Trick Blogspot | Ghost win | Website Design | Seo Trick | Ghost win | Software Free | Site Map | Back Link | Contact Advertising | ↑ back to top
Ghi rõ nguồn thuthuatvitinhaz.blogspot.com dưới dạng liên kết khi phát hành lại thông tin từ trang này
Copyright © 2013. Thủ thuật Số - All Rights Reserved
Design by Ngân Giang
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Template by Dameva