Thư viện

Trải nghiệm

Thứ Năm, tháng 11 28, 2013

Nút like ẩn hiện khi xem bài viết blogger

Tiện ích các nút like Facebook, Twitter, Google+, LinkedIn ẩn hiện khi xem bài viết. Tiện ích load nhanh và đẹp.

Chia sẻ:
Thủ thuật này sẽ giúp các bạn thêm nút chia sẻ của các mạng xã hội vào dưới mỗi bài viết trên trang blog của bạn. Khi bạn kéo thanh cuộn để dọc bài viết đến một vị trí nhất định thì Facebook, Twitter, Google+, LinkedIn, Bên cạnh đó có một nút đóng để các bạn có thể đóng nó khi thấy không cần thiết.
Floating Social Share Buttons for Blogger
Ảnh minh họa

☼ Thêm tiện ích Floating Social Share Buttons cho Blogger

» Bước 1: Thêm đoạn code trong mẫu
1.1- Đăng nhập vào Blog
1.2- Vào mẫu (Template) => Chọn Chỉnh sửa HTML (edit HTML).
1.3- Tìm đoạn mã có dạng như bên dưới:
<data:post.body/>
- Dán đoạn mã dưới đây vào ngay sau đoạn code vừa tìm được:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='md-active-share-comment-marker'/>
</b:if> 
Chú ý: Một blog có thể có nhiều đoạn code <data:post.body/> do vậy hãy chắc chắn rằng bạn chèn đúng vị trí nếu không nó sẽ không hiện thị đâu. 
1.4- Lưu mẫu lại và tiến hành bước tiếp theo nha.

» Bước 2: Thêm đoạn code trong bố cục
2.1- Vào Bố cục (layout) => Bấm chọn mục Thêm tiện ích (Add widget) => Tạo một tiện ích HTML/Javascripts và dán đoạn code bên dưới vào.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script src='https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-floating-share.js' type='text/javascript'/>
    <div id='md-share-window' style='width: 100%; display: block; position: fixed; bottom: -450px; left: 0px; background-color: rgba(128, 128, 128, 0.6); z-index: 100; padding: 0 0 10px 0;'>
    <div style='width: 800px; margin: 20px auto;'> <a class='boxclose' id='boxclose'/>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import &quot;//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css&quot;;
#share-buttons{border-radius:5px;background:#FFF;width:660px;overflow:hidden;margin-left:60px;box-shadow:0 2px 3px rgba(71,71,71,0.31);padding:14px 7px}.share-button{background:#DCE0E0!important;position:relative;display:block;float:left;height:40px;overflow:hidden;width:150px;border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0 7px}.icon{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center}.icon i{color:#fff;line-height:42px}.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin:0}.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}.share-button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.facebook iframe{display:block;position:absolute;right:16px;top:10px;z-index:1}.twitter iframe{width:90px!important;right:5px;top:10px;z-index:1;display:block;position:absolute}.google #___plusone_0{width:70px!important;top:10px;right:15px;position:absolute;display:block;z-index:1}.linkedin .IN-widget{top:10px;right:22px;position:absolute;display:block;z-index:1}.facebook:hover .slide{left:150px}.twitter:hover .slide{top:-40px}.google:hover .slide{bottom:-40px}.linkedin:hover .slide{left:-150px}.facebook .icon,.facebook .slide{background:#305c99}.twitter .icon,.twitter .slide{background:#00cdff}.google .icon,.google .slide{background:#d24228}.linkedin .icon,.linkedin .slide{background:#007bb6}</style>
<div id='share-buttons'> <div class='facebook share-button'> <i class='icon'> <i class='icon-facebook'> </i> </i> <div class='slide'> <p> facebook </p> </div> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fnamkna&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=20&amp;appId=568581339861351' style='border:none; overflow:hidden; width:80px; height:20px;'> </iframe> </div> <div class='twitter share-button'> <i class='icon'> <i class='icon-twitter'> </i> </i> <div class='slide'> <p> twitter </p> </div> <a class='twitter-share-button' data-via='AllBloggerTrick' href='https://twitter.com/share'> Tweet </a><script>
    !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
</script>
  </div> <div class='google share-button'> <i class='icon'> <i class='icon-google-plus'> </i> </i> <div class='slide'> <p> google+ </p> </div> <div class='g-plusone' data-size='medium'> </div><script type='text/javascript'>
    (function() {
      var po = document.createElement(&#39;script&#39;);
      po.type = &#39;text/javascript&#39;;
      po.async = true;
      po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
      var s = document.getElementsByTagName(&#39;script&#39;)[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
</script>
 </div> <div class='linkedin share-button'> <i class='icon'> <i class='icon-linkedin'> </i> </i> <div class='slide'> <p> linkedin </p> </div> <script data-counter='right' type='IN/Share'> </script> <script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US </script> </div></div><div style='display:block; margin: 0 200px; padding: 5px 0px 0px;font-family: Oswald; font-weight: 700;color: #000'> Don&#39;t You Think this Awesome Post should be shared ??<br/> <span style='color: #000; font-size: 18px;'>| <data:blog.pageName/> |</span> </div> </div> </div> </b:if>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
» Tùy chỉnh: 
  • Thay namkna thành facebook id của bạn và lưu lại là oke. 
  • Ở đoạn code này mình cài đặt để bài viết chỉ hiện thị khi các bạn xem bài viết, nếu bạn muốn nó hiện thị ở tất cả các trang thì bạn hãy xóa 2 đoạn code màu xanh đi nha. 
  • Thủ thuật này sử dụng hiệu ứng từ thư viện Jquery nên nếu blog của bạn đã có file Jquery rồi thì hãy xóa đoạn code màu vàng đi nha. 
  • Các bạn hãy tải file abt-floating-share.js và upload lên host riêng để sử dụng lâu dài nha.  Nếu chưa có host thì bạn có thể tham khảo sử dụng host sau đây.
Bây giờ hãy truy cập vào blog và đọc một bài viết bất kỳ để xem demo khi kéo chuột xuống dưới chân blog nha.

17 nhận xét:

  1. Mình nhớ cách đây không lâu , Namkna có hướng dẫn ấn LIke bài viết hiện nội dung ẩn. Lúc đó , bạn chỉ hướng dẫn khi nhấn LIke cho cả page , còn nếu mình chỉ muốn nhấn like hiện theo từng bài viết thì sao vậy bạn ?

    Trả lờiXóa
    Trả lời
    1. Đúng vậy mình từng giới thiệu bài viết Hiện nội dung được ẩn khi like mạng xã hội cho blogspot

      Trong bài đó có đoạn tùy chỉnh hướng dẫn này bạn có thể kiểm tra lại nha:

      Thay http://namkna.blogspot.com/ thành URL trang web hoặc bài viết của bạn. Lưu ý là nếu để URL trang web thì nó sẽ hiển thị tổng số lần +1 của trang. Còn URL bài viết thì chỉ hiện số lần +1 của bài viết.

      Và với facebook nếu muốn like cho từng bài viết thì bạn thay URL trang fanpage thành URL trang cá nhân nha bạn, :)

      Xóa
  2. anh ơi :((((( e dùng thử mấy cái code của anh, gắn vào blogspot và giờ thì blog ko vào được luôn. anh xem giiups vơi

    Trả lờiXóa
    Trả lời
    1. Không phải do code này đâu em ak. em nói rõ là không vào được trang chỉnh sửa hay trang chủ của blog để anh tìm hiểu nguyên nhân nha em.

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

    Trả lờiXóa
  4. Lên google search để làm sao đưa like vào cho mỗi bài viết trên bloa toàn gặp bài của Nam.Nhưng không hiểu sao thử mãi vẫn chưa đưa vào được.Nam xem hộ mình cái được ko?

    Trả lờiXóa
    Trả lời
    1. Bạn chọn lấy một kiểu muốn áp dụng, copy link bài viết đó và gửi kèm mẫu vào

      tavannam01@gmail.com

      để mình thêm cho nha.

      Xóa
  5. Chào Anh ! E muốn tạo nút chia sẻ giống như trang http://diendangame.org/ ở ngoài trang chủ và ở trong bài viết thì phải làm như thế nào ? Mong Anh hướng dẫn ! Thanks Anh

    Trả lờiXóa
    Trả lời
    1. bạn xem thử bài viết này xem có giúp ích gì được không nhé:http://www.tynisoft.com/2013/10/tao-hop-chia-se-mang-xa-hoi-cho-blog.html#.UtaC9PRdUS4

      Xóa
  6. Cảm ơn bạn nhiều nha! nhưng mình thích nút chia sẻ cua http://diendangame.org/ hơn !
    Mình tìm mãi mà không có ! hic mong được giúp đỡ ! Thanks

    Trả lờiXóa
  7. hi ! Thanks Anh Namka nhiều ! Chúc Anh năm mới vui vẻ nha !

    Trả lờiXóa
    Trả lời
    1. Không có gì đâu em ak. Chúc em năm mới vui vẻ :)

      Xóa
  8. &amp;amp;amp;lt;&amp;amp;amp;gt;././.../

    Trả lờiXóa
  9. tên này pro wa bái phục ^^
    http://daylaixetayho.blogspot.com

    Trả lờiXóa
  10. Hi, mình mới làm cái Blog, mình muốn tạo bộ nút like, google plus và twetter hình tròn, chạy dọc theo blog của mình. Mong bạn hướng dẫn..Thanks

    Trả lờiXóa