Thư viện

Trải nghiệm

Thứ Hai, tháng 3 25, 2013

Floating Social Bookmark trượt đẹp cho blogspot

Tiện ích (widget) này bao gồm các liên kết đến các mạng xã hội nổi tiếng hiện nay như: Facebook, Twiter, Google+, Pinterest, Youtobe và có một liên kết rss feed giúp độc giả theo dõi các bài viết của bạn. Bình thường tiện ích này ẩn chỉ hiện các button của các mạng xã hội, và các liên kết sẽ hiện ra từ từ khi ta di chuột vào các icon đó

Chia sẻ:
Floating Social Bookmark trượt đẹp cho blogspot
Tiện ích (widget) này bao gồm các liên kết đến các mạng xã hội nổi tiếng hiện nay như: Facebook, Twiter, Google+, Pinterest, Youtobe và có một liên kết rss feed giúp độc giả theo dõi các bài viết của bạn. Bình thường tiện ích này ẩn chỉ hiện các button của các mạng xã hội, và các liên kết sẽ hiện ra từ từ khi ta di chuột vào các icon đó. Để giảm thiểu tối đa việc sử dụng các file javascrip do vậy namkna sẽ sử dụng các mã CSS và hiệu ứng css spriter với một hình ảnh icon duy nhấtcho các mạng xã hội để giảm requet  kết hợp với thư viện Jquery do cậy rất mượn mà không gấy ảnh hưởng đến mức độ tương tác của trang web.

Các bạn có thể xem ảnh minh họa hoặc blog demo để thấy rõ hơn.

VIEW DEMO

» Cách thêm Floating Social Bookmark cho blogspot!

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Thêm đoạn mã bên dưới vào sau thẻ ]]></b:skin>:
.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://2.bp.blogspot.com/-ALbNFv2NJW4/UVBaiBNec-I/AAAAAAAAJec/dGtctvHdAHM/s1600/mas-icons-namkna-blogspot-com.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}
5. THêm đoạn mã bên dưới vào trước thẻ </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>
- Nếu blog của bạn đã có thư viện jquery rồi thì hãy xóa file màu xanh đi.
6. THêm mã bên dưới vào trước thẻ đóng </body> :
<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>
- Thay các phàn màu xanh thành các id của bạn tương ứng.
7. Lưu lại là oke.

80 nhận xét:

  1. MỚI HỌC THEO NAMKNA LÀM KIỂU CÓ ĐƯỜNG KẺ CHẤM XANH GIỮA LÀ TIÊU ĐỀ CON
    VD: Cách thêm Floating Social Bookmark cho blogspot!
    NHƯNG BLOG MÌNH SAO NÓ LẠI ÁP DỤNG CHO CẢ TIÊU ĐỀ CHÍNH BÀI VIẾT NHỈ?
    VÀ PHẦN BÀI VIẾT LIÊN QUAN CŨNG BỊ ĐƯỜNG KẺ XANH ĐI QUA ẢNH NHỎ NHÌN KHÔNG ĐẸP MẮT NHƯ BÊN NAMKNA..
    CHỈ MÌNH FIX VỚI NHÉ

    Trả lờiXóa
    Trả lời
    1. Bạn phải đổi thẻ

      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
      <b:if cond='data:post.url'>
      <b:if cond='data:blog.url != data:post.url'>
      <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
      <data:post.title/>
      </b:if>
      <b:else/>
      <data:post.title/>
      </b:if>
      </b:if>
      </h3 >
      </b:if>

      thành:

      <h2 class='post-title entry-title'>
      <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
      <b:if cond='data:post.url'>
      <b:if cond='data:blog.url != data:post.url'>
      <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
      <data:post.title/>
      </b:if>
      <b:else/>
      <data:post.title/>
      </b:if>
      </b:if>
      </h2>
      </b:if>

      trong mở rộng tiện ích mẫu mí được.

      - Phần bài viết liên quan bạn tìm scipt của nó và xóa cặp thẻ <h3> và </h3> đi là được.

      Xóa
    2. KHÔNG Ý MÌNH LÀ VẪN ĐỂ NGUYÊN DÒNG KẺ ĐỨT ĐOẠN CHỖ BÀI VIẾT LIÊN QUAN NHƯNG LÀM THẾ NÀO ĐỂ DÒNG KẺ ĐỨT ĐÓ KHÔNG CẮT NGANG ẢNH MÔ TẢ NHƯ HIỆN TẠI CỦA MÌNH NAMKNA AH.

      Xóa
    3. Bạn sửa:

      #related-posts img{float:left;border:4px solid #BBB;margin-right:10px;width:36px;height:36px;background:#FFF;padding:3px}

      Thành:

      #related-posts img{float:left;border:4px solid #BBB;margin-right:10px;width:36px;height:36px;background:#FFF;padding:3px;z-index:1000}

      - Trong blog của bạn có backlink chứa virus đó. ban nên check lại đi,

      Xóa
    4. CÔNG CỤ NÀO ĐỂ TÌM ĐƯỢC LINK CHỨA MÃ ĐỘC VẬY. HÔM QUA MÌNH KIỂM TRA QUA MỘT SỐ TRANG WEB ĐỀU THÔNG BÁO AN TOÀN

      Xóa
    5. vẫn không được namkna ah. mình vừa share quyền chỉnh sửa lúc nào rảnh vào fix giúp mình với

      Xóa
    6. Nhận xét này đã bị quản trị viên blog xóa.

      Xóa
    7. blog bị sao vậy nam, xóa rồi ah, ko thấy demo gì hết.

      Xóa
    8. Uk mình mới xóa nó đi. bạn có thể xem ảnh minh họa động ở trong bài mà. Mai mình sẽ làm demo mới.

      Xóa
  2. Quá đẹp anh Nam ơi chúc blog anh ngày càng phát triển

    Trả lờiXóa
    Trả lời
    1. Cảm ơn em đã ủng hộ blog anh trong xuốt thời gian qua :))

      Xóa
  3. Trả lời
    1. Đã xong rồi đó bạn. Có một mã scip bị thừa :))

      Xóa
  4. ??? bạn đã nhận lời mời quản trị đâu namkna?

    Trả lờiXóa
    Trả lời
    1. Đoạn scipt đó trên host của mình bị hack mấy hôm trước. Bị cài mã độc, vừa liên hệ để đòi lại quyền Admin . mình fix trực tiếp trên host của mình nên không cần vào blog bạn.
      Để tránh gặp lại trong tương lại bạn nên tả một số file trên host của mình về và Upload lên host riêng đi nha.

      Xóa
  5. ko mình nhờ namkna vụ này mà:
    MỚI HỌC THEO NAMKNA LÀM KIỂU CÓ ĐƯỜNG KẺ CHẤM XANH GIỮA LÀ TIÊU ĐỀ CON
    VD: Cách thêm Floating Social Bookmark cho blogspot!
    NHƯNG BLOG MÌNH SAO NÓ LẠI ÁP DỤNG CHO CẢ TIÊU ĐỀ CHÍNH BÀI VIẾT NHỈ?(mình chỉ muốn áp dụng với tiêu đề con trong bài viết)
    VÀ PHẦN BÀI VIẾT LIÊN QUAN CŨNG BỊ ĐƯỜNG KẺ XANH ĐI QUA ẢNH NHỎ NHÌN KHÔNG ĐẸP MẮT NHƯ BÊN NAMKNA..
    CHỈ MÌNH FIX VỚI NHÉ

    Trả lờiXóa
    Trả lời
    1. Mình nhớ là phàn này đã hướng dẫn bạn trong một bài nào đó rui mà :))
      Nhưng thoi nhắc lại vậy.

      - Mở rộng tiện ích mẫu.
      1- Bạn tìm 2 đoạn như sau:

      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
      <b:if cond='data:post.url'>
      <b:if cond='data:blog.url != data:post.url'>
      <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
      <data:post.title/>
      </b:if>
      <b:else/>
      <data:post.title/>
      </b:if>
      </b:if>
      </h3>

      và sửa thành:

      <h1 class='post-title entry-title'>
      <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
      <b:if cond='data:post.url'>
      <b:if cond='data:blog.url != data:post.url'>
      <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
      <data:post.title/>
      </b:if>
      <b:else/>
      <data:post.title/>
      </b:if>
      </b:if>
      </h1>

      2- Tìm tiếp:

      #related-posts img{float:left;border:1px solid #BBB;margin-right:10px;width:36px;height:36px;background:#FFF;padding:3px}

      thành:

      #related-posts img{float:left;border:1px solid #BBB;margin-right:10px;width:36px;height:36px;background:#FFF;padding:3px;z-index}

      3- Thêm đoạn sau trước ]]></bskin>

      post h3 {color:#0080ff;border-top:1px dotted #0080ff;border-bottom:1px dotted #0080ff;padding:3px;text-align:justify;font-size:20px}

      - Khi đăng bài chỉ cần bôi đen đoạn văn đó chọn tiêu đề con là được,.

      Xóa
  6. namkna ơi vừa làm như vậy xong ngoài trang chủ bây giờ 1 bài đăng xuất hiện 2 tiêu đề... 1 tiêu đề to ơi to 1 tiêu đề nhỏ

    Trả lờiXóa
  7. thôi lúc nào online chỉ mình cách loại bỏ hết dòng kẻ xanh chấm nhé..mình ko cần kiểu đó nữa giờ không nhớ trước dán code thế nào được như thế nữa rồi

    Trả lờiXóa
    Trả lời
    1. - Đoạn code của mình thực ra chỉ là thay đổi thẻ h3 thành h1. Chứ không thêm gì cả. Nếu xuất hiện tiêu đề là bạn chèn code của mình vào mà chưa xóa code cũ đi thổi :)))

      - Nếu muốn xóa đường viền border xanh thì bạn tìm và xóa đoạn code sau:

      h3,.h4 {color:#0080ff;border-top:1px dotted #0080ff;border-bottom:1px dotted #0080ff;padding:3px;text-align:justify}

      Phàn này mình tết thấy: : - Trong tiện ích HTML12 của bạn mình thấy có file ảnh tangan.gif bạn nên tải về upload lên blog để thay link ảnh cũ đi vì host backlink.vn bị google cho sách đên rùi nên nếu đẻ sẽ ảnh hưởng dến SEO.

      Xóa
  8. Johny sao mà nó lắm mẫu template thế, nhiều mẫu dùng cho blog phim thì tuyệt vời.Blog này chắc nổi tiếng vì thấy toàn trên 100 comment.hình như là blog Indonecia

    Trả lờiXóa
    Trả lời
    1. Rất khó nói đó là mẫu của ai vì nó có rất nhiều biến thể :))
      Còn blog demo bên trên là mẫu từ Malaisia.

      Xóa
  9. Mình gặp blog (VN thôi) tại khung comment chỉ cần gõ ký tự biểu cảm yahoo là nó hiện icon yahoo như chat trong yahoo,rất tiện.Đang bảo họ chia sẻ code nhưng họ cũng nhờ người khác chia sẻ ko biết còn nhớ ko.
    Khung comment ko có hình icon mà chỉ có thế này:
    Bạn có thể chèn hình ảnh vô khung comment mà không cần thẻ. Bạn chỉ cần coppy link của hình và dán vô rồi đăng lên là được (Lưu ý: Định dạng đuôi ảnh 'JPG','GIF','PNG','BMP')

    Trả lờiXóa
    Trả lời
    1. Người chia sẻ cho họ là chủ nhân blog này:
      http://petminhchinh.blogspot.com/

      Xóa
    2. Khung comment đó bên duypham.blog.info đã giwoismthieeuj rất lâu rồi :))

      Xóa
  10. Cái của DuyPham chèn ảnh vẫn còn hiện link nhìn ko thích lắm.Cái này ko thấy link.Người ta bảo chèn cái này: .comment-block img {
    max-width: 300px !important;
    } vào trước thẻ /*Header nhưng chắc ko phải

    Trả lờiXóa
  11. Trả lời
    1. Đó chính là code của duy pham - Nếu không muốn hiển link chỉ thược hiện nguyên bài này.Chèn emoticons và ảnh, Youtube, Nhaccuatui vào Thread Comment

      thẻ .comment-block img {max-width: 300px !important; } chỉ để giới hạn kích thước ảnh thôi.

      Xóa
    2. Bài viết của blog mà bạn đưa cũng sai rùi. Không phải blog nào cũng có header đâu.
      CSS người ta dán trước ]]></b:skin> chú không phải /*header.

      Xóa
  12. Thì mình muốn nói cái mới này nó vẫn còn link mà, bạn cứ thử Demo mà xem còn cái blog mình ví dụ thì thực sự chèn ảnh ko cần thẻ mà khi xuất bản ko còn link đi kèm.chủ nhân blog đó như kiểu chèn code nhưng như người mê ngủ chả nhớ cái gì.Mình hỏi họ post bài trả lời nhưng ko thu dc kết quả gì.Tưởng có cái gì hơi giống của bên duypham thì xem tẹo nhưng biết ko tìm dc gì nên ko đúng sai nữa :D

    Trả lờiXóa
    Trả lời
    1. Mình muốn tò mò vậy thôi chứ blog mình có ma nào vô đâu mà cần comment có chăng chỉ là trang hoang để dọa trẻ con thôi :D
      À mà bạn làm tẹo biểu cảm cho sinh động, sợ ảnh hưởng tới load à blog bạn load nhanh lắm đó chỉ thua vnblogspot mình thử mấy lần rồi.

      Xóa
    2. Oke đã thấy lõi bạn nói. Để hôm tơi rảnh mình sửa coi sao. bạn cũng có thể them khảo bài viết khác tại đây: XEM NGAY

      - Còn về tốc đọ lòa bạn check blog mình load chạm hơn vnblogspot vì mình dùng tên miền .blogspot.com nên bị bóp băng thông tại Việt Nam. Nếu check ở sever nước ngoài hoặc bằng D-com 3G thì cũng ngang ngửa thôi :))

      Xóa
  13. Demo: http://namkna-test.blogspot.com/2013/04/floating-social-bookmark-truot-ep-cho.html

    Trả lờiXóa
  14. Bạn Nam ơi mình lang thang và gặp tài liệu hướng dẫn:
    Gom tất cả CSS dùng cho các thủ thuật mà bạn đã thêm vào mẫu rồi up lên một host thứ 3 rồi lấy link đặt nó vào giữa 2 thẻ (HEAD) tác dụng là giúp blog load nhanh hơn.Có phải vậy ko?
    Cụ thể là mình đã thử và up lên googlecode.com/svn/truk/ mọi hoạt động vẫn ổn định còn nhanh hay ko thì ko biết :D

    Trả lờiXóa
    Trả lời
    1. Tất nhiên là sẽ nhanh hơn nếu bạn sử dụng host tốt.

      - một điểm lợi ích của việc gom CSS nữa là tăng khả năng SEO/

      Xóa
  15. Ông Nam ơi cái blog tôi bảo và ông đã vô xem tôi xem nguồn trang và thấy trong template có cái này nên biểu cảm yahoo tự nên là phải nó đây
    <script src='http://sites.google.com/site/khungcode/emo-colo-video.js' type='text/javascript'/>

    Trả lờiXóa
    Trả lời
    1. Và 3 cái nữ đều liên quan tới yahoo
      <script src="http://dl.dropbox.com/u/66348944/ya_jquery_03.js" type="text/javascript">
      </script>
      <script src="http://dl.dropbox.com/u/66348944/ya_jquery.min.js" type="text/javascript">
      </script>
      <script src="http://dl.dropbox.com/u/66348944/ya_jquery_02.js" type="text/javascript">
      </script>
      <script src="http://dl.dropbox.com/u/66348944/ya_jquery_01.js" type="text/javascript">
      </script><script type="text/javascript">
      (function() { new YAHOO.sea.fp.TodayVSet('gl2-ct1', true); })();
      (function(){YAHOO.util.Event.addListener(window,'load',function(){window.setTimeout(function(){
      },500);});})();
      </script>

      Xóa
  16. Tôi đã thử rồi chỉ cần chèn file js:http://sites.google.com/site/khungcode/emo-colo-video.js vào là hội đủ tất cả emo yahoo img nhaccuatui video ko cần thẻ.Ảnh ko còn link,vì xem file js cũng thấy vậy.Nhưng hơi nhiều icon gần như toàn bộ icon yahoo

    Trả lờiXóa
    Trả lời
    1. Hãy tải file đó về sau đó mở ra bằng Notepad. Và xóa bới mặt cười ở phần có dạng:

      theText = theText.replace(/\:\-\//ig,"<img style='border: 0; padding:0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' alt=':-C'/>")

      có rất nhiều dòng như vậy. Muốn bỏ biểu tượng nào thì xóa dòng đó đi.

      - Sau đó Lưu lại và Uploaf lên host riêng.

      và chèn trước thẻ đóng: <body> với cấu trúc:
      <script src='link js mới' type='text/javascript'></script>

      Xóa
    2. Hoặc chèn thẳng không cần host với cấu trúc:

      <script type='text/javascript'>
      //<![CDATA[
      nội dung file tải về
      //]]>
      </script>

      Xóa
  17. bạn ơi hướng dẫn mình làm mấy cái này được không ?
    http://themes.themepunch.com/?theme=showbizpro_jq

    Trả lờiXóa
    Trả lời
    1. Ở đó người ta có code rồi đó bạn. Nếu vẫn không làm được hãy chọn lấy một skin và cho mình biết mình sẽ viết bài hướng dẫn cho bạn.

      Xóa
  18. bạn hướng dẫn cho mình dạng LIGHT SKIN
    (carousel)
    nhưng dùng cho các bài đăng theo nhãn được không ?

    Trả lờiXóa
    Trả lời
    1. Dạng này chèn thủ công hình ảnh mà bạn :?

      Xóa
  19. không thấy các thẻ được nói đến
    vd: head , ]]>:

    Trả lờiXóa
    Trả lời
    1. Thẻ ]]></b:skin> blog nào cũng có hãy bấm Ctrl + F để tìm nha.

      Xóa
  20. Nó mới khó làm sao
    chịu thôi

    Trả lờiXóa
  21. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  22. cảm ơn anh về bài viết.Nó rất tuyệt

    Trả lờiXóa
  23. nó kêu:Không thể tải bản xem trước mẫu: Lỗi khi phân tích cú pháp XML, dòng 2806, cột 133: The element type "body" must be terminated by the matching end-tag body- thẻ body, viết thẻ body ra mà blog này ko cho

    Trả lờiXóa
    Trả lời
    1. Trời sao lại viết thêm vào. Blog có sẵ rùi mà nó nằm cuối danh sách HTML đó.

      Xóa
  24. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  25. Namka ơi mình thử làm theo cách trên, floating bar có hieenj ra nhưng khi rê chuột vào thì nó đứng yên, ko chuyển động như demo.

    Trả lờiXóa
    Trả lời
    1. Dán đoạn code bước 5 sau thẻ <head> :

      Nếu vẫn không được thì Điều chỉnh lại:
      width:'160'}, 500,

      {width:'43'}, 500,

      Xóa
    2. vẫn đứng yên không bật ra được như demo bạn ới

      Xóa
    3. Bạn kiểm tra lại file jquery màu xanh nếu trong blog có rồi thì xóa nó đi. Giữ lại phiên bản cao hơn nha.

      Xóa
  26. mình làm như trên nhưng cái code ở b5 nó hiện ra màn hình chủ luôn.giúp m với

    Trả lờiXóa
    Trả lời
    1. Bạn chèn code bước 5 vào giữa đoạn code sau trước khi chèn vào blog nha:


      <b:if cond='data:blog.pageType == "item"'>
      code bước 5
      </b:if>

      Xóa
  27. muốn chèn thêm 1 tiện ích floating nữa như instagram, skype thì làm sao a

    Trả lờiXóa
  28. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
    Trả lời
    1. Thêm vào code nó sau code sau:
      <div class='social-buttons button-right hidden-phone hidden-tablet'>

      Xóa
  29. muốn đổi logo RSS thành logo instagram thì sao a

    Trả lờiXóa
  30. Dùng photoshop để chỉnh link ảnh sau: http://2.bp.blogspot.com/-ALbNFv2NJW4/UVBaiBNec-I/AAAAAAAAJec/dGtctvHdAHM/s1600/mas-icons-namkna-blogspot-com.png

    Trả lờiXóa
  31. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  32. Nhờ AD xem giùm mình với, mình làm theo hướng dẫn của AD nhưng khi rơ chuột vô mấy cái icon fb.g+... nó chỉ đổi màu mà không có hiệu ứng dịch chuyển qua bên trái hic. Blog của mình http://camerahcm.blogspot.com/

    Trả lờiXóa
  33. ad cho em hỏi, khi em chèn floating vào thì slideshow bị đứng, ko hoạt động? Vậy là do sao ad?

    Trả lờiXóa
    Trả lời
    1. Anh đã kiểm tra trang tienvuong12 của e. hiện tại đã có file libs/jquery/1.8.0/jquery.min.js em hãy bỏ nó đi và thêm code này coi sao nha e,

      Xóa
  34. Anh giúp em xem tại sao em thêm mà nó không hiện trượt mà nó ở dưới cùng vậy ạ?
    Kéo mãi xuống dưới cùng mới có. Anh giúp em với ạ! Cảm ơn anh.

    Trả lờiXóa
  35. làm sao để chuyển từ bên phải sang bên trái được bây giờ ạ

    Trả lờiXóa
  36. blog bị sao vậy nam, xóa rồi ah, ko thấy demo gì hết.

    carajitumengatasiasamurat.blogspot.com

    Trả lờiXóa