Thư viện

Trải nghiệm

Thứ Năm, tháng 1 16, 2014

Nút like với hiệu ứng ẩn hiện trên sidebar cho blogspot

Tiện ích nút like facebook, google+, Twiter và nút share ẩn đằng sau lá cờ. Hiển thị khi bạn dê chuột lên lá cờ đó.

Chia sẻ:
Bài viết này hướng dẫn các bạn tạo các nút like ẩn đằng sau các lá cờ trên sidebar. Điểm đặc biệt là khi dê chuột lên lá cờ này thì các nút like đó sẽ hiển thị để cho độc giả click vào đó + 1 cho bài viết hoặc chia sẻ bài viết của bạn lên mạng xã hội. Bạn có thể xem ảnh minh họa bên dưới:


Namkna từng giới thiệu cho các bạn rất nhiều mẫu nút like và chia sẻ bài viết lên các mạng xã hội. Mỗi các có một điểm đặc biệt khác nhau nhưng tất cả đều nhằm một mục đích là SEO blog hoặc bài viết của bạn tốt hơn. Tạo ra sự tò mò và kích thích +1 của độc giả trên blog của bạn.

» XEM DEMO


» Thêm tiện ích Nút like với hiệu ứng ẩn hiện sau lá cờ trên sidebar cho blogspot

Để thêm nó vào blog bạn chỉ cần làm theo một số bước đơn giản sau:

1. Dăng nhập vào blog.
2. Chọn thẻ Bố cục (Layout).
3. Chọn Thêm tiện ích => Tạo một tiện ích HTML/Javascripts và dán đoạn code bên dưới vào.
<h3>+ 1 để ủng hộ diễn đàn</h3>
     <style>
.social-share-top {
    background: none repeat scroll 0 0 #CCCCCC;
    float: left;
    height: 62px;
    margin: 0 3px;
    width: 62px;
}
.social-share-top .soc-item {
    margin-top: 11px;
    opacity: 0;
}
.twitter-top-share {
    background: url("http://4.bp.blogspot.com/-ceXA-cQLXPo/UtzDYKYqWsI/AAAAAAAABsQ/jAX5pMgn8Hk/s1600/social-icon-namkna-blog.png") no-repeat scroll 0 0 transparent;
}
.twitter-top-share:hover .soc-item {
    opacity: 1;
}
.twitter-top-share:hover {
    background: none repeat scroll 0 0 transparent;
}
.facebook-top-share {
    background: url("http://4.bp.blogspot.com/-ceXA-cQLXPo/UtzDYKYqWsI/AAAAAAAABsQ/jAX5pMgn8Hk/s1600/social-icon-namkna-blog.png") no-repeat scroll -134px 0 transparent;
}
.facebook-top-share:hover .soc-item {
    opacity: 1;
}
.facebook-top-share:hover {
    background: none repeat scroll 0 0 transparent;
}
.google-top-share {
    background: url("http://4.bp.blogspot.com/-ceXA-cQLXPo/UtzDYKYqWsI/AAAAAAAABsQ/jAX5pMgn8Hk/s1600/social-icon-namkna-blog.png") no-repeat scroll -68px 0 transparent;
}
.google-top-share:hover .soc-item {
    opacity: 1;
}
.google-top-share:hover {
    background: none repeat scroll 0 0 transparent;
}
.share-top-share {
    background: url("http://4.bp.blogspot.com/-ceXA-cQLXPo/UtzDYKYqWsI/AAAAAAAABsQ/jAX5pMgn8Hk/s1600/social-icon-namkna-blog.png") no-repeat scroll -270px 0 transparent;
}
.share-top-share:hover .soc-item {
    opacity: 1;
}
.share-top-share:hover {
    background: none repeat scroll 0 0 transparent;
}
.addthis_floating_style.addthis_counter_style {
    padding: 0 !important;
}
</style>
<div style="display:block; width: 300px; height:69px; border-bottom: 3px solid #ff6a40; margin-top:15px;" class="sectionAd">
<div style="margin: -12px 14px 2px">
<div class="social-share-top facebook-top-share"><div class="soc-item">
<iframe src="//www.facebook.com/plugins/like.php?href=http://namkna.blogspot.com&amp;send=false&amp;layout=box_count&amp;width=44&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90&amp;appId=294310977347137" style="border:none; overflow:hidden; width:54px; height:60px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
</div></div>
<div class="social-share-top google-top-share"><div class="soc-item">
    <xen:if is="{$xenOptions.plusone}">
        <div class="plusone shareControl">
            <div id="___plusone_2" style="text-indent: 0px; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 50px; height: 60px;"><iframe title="+1" data-gapiattached="true" src="https://apis.google.com/u/0/_/+1/fastbutton?usegapi=1&amp;bsv=o&amp;count=true&amp;size=tall&amp;hl=vi-VN&amp;origin=http%3A%2F%2Fnamkna.blogspot.com&amp;url=http%3A%2F%2Fnamkna.blogspot.com%2F&amp;gsrc=3p&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.vi.Qdj2g3tOcX8.O%2Fm%3D__features__%2Fam%3DIQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAItRSTPKKLYAlxtiNS76Jw9oophWOmv-3Q#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&amp;id=I2_1389940686204&amp;parent=http%3A%2F%2Fnamkna.blogspot.com&amp;pfname=&amp;rpctoken=10456990" name="I2_1389940686204" id="I2_1389940686204" vspace="0" tabindex="0" style="position: static; top: 0px; width: 50px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 60px;" marginwidth="0" marginheight="0" hspace="0" frameborder="0" scrolling="no" width="100%"></iframe></div>
        </div>
    </xen:if>
</div></div>
<div class="social-share-top twitter-top-share"><div class="soc-item">
   <xen:if is="{$xenOptions.tweet.enabled}">
    <div class="tweet shareControl">
      <a class="addthis_button_tweet" tw:count="vertical"></a>>

    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>
   </xen:if>
</div></div>
<div class="social-share-top share-top-share">
<div class="soc-item">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a href="#" style="display: block;" class="addthis_counter"><a href="#" title="View more services" target="_blank" class="addthis_button_expanded">0</a><a class="atc_s addthis_button_compact"><span></span></a></a>
<div class="atclear"></div></div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fcc0e503f99ef6b"></script>
</div>
</div>
</div>
</div>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fnamkna.blogspot&amp;width=300&amp;height=80&amp;colorscheme=light&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;send=false&amp;appId=340580066059320" style="border:none; overflow:hidden; width:300px; height:80px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe>

Các bạn hãy chỉnh lại những phần mình tô màu đỏ và in đậm cho phù hợp với trang của bạn nha.

Nếu có bất cứ khó khăn gì khi áp dụng thủ thuật này đừng ngần ngại hãy comment bên dưới mình sẽ hỗ trợ.

40 nhận xét:

  1. E bóc tem--). A Nam e hỏi tý ạ. E đã làm theo bài này a hướng dẫn: http://namkna.blogspot.com/2011/12/sua-loi-khong-phan-trang-khi-xem-theo.html
    nhưng số bài viết theo nhãn vẫn hiện mặc định là 20.
    A xem cho e ak, vd nhãn truyện cười: http://www.cuois2.com/search/label/truyen%20cuoi
    Cảm ơn a!

    Trả lờiXóa
    Trả lời
    1. Theo như anh quan sát thì hiện tại trang nhãn của em đang để hiện thị là 15 bài ở mỗi trang. Nên em có thể chỉnh lại số lượng ở phần perPage: 15

      Ngoài ra làm như Bài hướng dẫn trên mà em nói chỉnh các con số trùng với đoạn trên là được e ak.

      Xóa
  2. A Nam chưa hiểu ý e rùi. E phân ở trang chủ là 15 bài thì hiện đúng nhưng theo nhãn lại là 20 mặc định của blogger. E đã làm như bài a hướng dẫn ở trên và cũng đã chèn dấu ngắt vào tất cả bài viết nhưng vẫn hiện 20 ak--). A xem giúp e ạ!

    Trả lờiXóa
  3. Ak quên e muốn để ở nhãn là 15 bài giống như trang chủ cho đẹp. Hi

    Trả lờiXóa
    Trả lời
    1. Nếu muốn như thế em phải chính sửa toàn bộ những link cố địnhc ảu nhãn như sau: max-results=5"'

      Trông <a href="http://bài này</a> anh đã nói đến ngay đầu rồi đó nếu dùng link rỗng không có phần đó nó sẽ hiện 20 bài mặc định blig nào cũng thế.

      Xóa
    2. E chưa hiểu, a viết vội quá sai lung tung beng hết. Bài nào a hướng dẫn khác ko ah?. E đã thay tất cả 'expr:href='data:label.url + "?&max-results=15"' rùi ak.

      Xóa
    3. Như thế là được rồi lúc này tất cả các link nhãn của em khi bấm vào nó đều có dạng /search/label/truyen cuoi?&max-results=15 thì nó sẽ hiển thị tối đa 15 bài thôi.

      Bởi sau khi đã thay như em nói các link liên kết của nhãn trên trang của em không còn dạng ban đầu là /search/label/truyen cuoi nữa. Tất cả chúng đều có đuôi giới hạn số bài viết trên một trang như sau: ?&max-results=15

      Em hãy thêm đoạn ?&max-results=15 vào link nhãn của em bên trên và truy cập sẽ thấy nó có 15 bài thôi.

      Xóa
    4. E hiểu rùi. Cảm ơn a ak!

      Xóa
  4. Anh Nam cho em hỏi ngoài lề tí : làm sao cho ảnh thumnail của mỗi bài viết hiển thị bên cạnh kết quả Google vậy như trang youtube ý

    Trả lờiXóa
  5. ảnh của bài viết chứ ko phải cái arvartar author nha

    Trả lờiXóa
    Trả lời
    1. Video của Youtobe khác so với blog và web em ak. Vì google họ chỉ index thumb video của họ mà. Nó là độc quyền. Blog em có thể cho ảnh đại diện theo cách sau:

      http://namkna.blogspot.com/2013/01/hien-thi-profile-google-tren-ket-qua.html

      Xóa
  6. cô gửi tin nhắn trong mail cháu xem giúp cô nhé.

    Trả lờiXóa
    Trả lời
    1. Cháu nhận lời mời rồi cô cấp quyền quản trị cho cháu nha cô :)

      Xóa
  7. Ak a Nam cho e trao đổi link với nhé. Key của e truyện cười : http://www.cuois2.com/. Key của a Nam là?? để e liên kết ạ.

    Trả lờiXóa
    Trả lời
    1. Anh đã liên kết với e rồi đó. E kiểm tra nếu cần thay đổi gì thì Pm với anh nha.

      Xóa
  8. anh share cái công cụ này giúp em với :
    http://namkna.blogspot.com/p/code-convert-for-blogspot-chuyen-doi.html

    Trả lờiXóa
  9. bên anh có bài này không :
    http://truyen-phutvui.blogspot.com/2012/07/widget-hien-thi-bai-viet-trong-mot-nhan.html

    em làm không đc - nhờ anh hướng dẫn giúp em vơi

    Trả lờiXóa
    Trả lời
    1. Bài viết đó copy nhưng thiếu phần hướng dẫn. Em có thể xem bài viết này nha: Liệt kê tiêu đề bài viết gần đây theo nhãn - Recent Posts for laber

      Lưu ý để tiện ích này hoạt động thì trang của em phải đăng ký FEEDBUNNER nha, Sau khi đăng ký rồi thì phải KÍCH HOẠT nó lên nha em.

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

    Trả lờiXóa
  11. kích hoạt nó như thế nào anh

    Trả lờiXóa
  12. bạn ơi cho mình hỏi làm sao để đặt nút like này ở vị trí trên khung comments như của bạn được vậy, và mình mới làm nút này thì đã thấy thông báo đã có gần 4 triệu người thích nội dung này là sao vậy mình nghĩ chắc là do ID ở gần cuối đoạn code phải không nhỉ, nếu đúng hì phải sửa ID thế nào bạn nhỉ? cảm ơn bạn.

    Trả lờiXóa
    Trả lời
    1. Bạn phải thay đổi những phần in đậm cho thích hợp với trang của bạn chứ :)

      Khung link như của mình thì bạn xem bài viết này nha: Khung Author box có nút like cho blogger ves 2

      Xóa
    2. cảm ơn bạn nhiều để mình làm rồi nhưng nó vẫn thế để mình làm theo cái của bạn xem sao, tiện thể cho mình hỏi mình muốn làm thêm cái hướng dẫn comments như của bạn đây thì phải làm thế nào nhỉ, thanks bạn nhiều, ah đầu năm mới cũng chúc bạn mạnh khỏe....và có nhiều bài viết hay nữa nhé

      Xóa
    3. . Đăng nhập Blogger, vào Settings (Cài đặt) >> Comments (Nhận xét) kéo xuống mục Comment Form Message (Thư thông báo mẫu nhận xét)rồi dán vào đó đoạn văn bản nội quy nhận xét, sau đó nhấn SAVE SETTINGS (Lưu cài đặt) để lưu cài đặt.

      Tiếp theo bạn chỉ cần dán đoạn code bên dưới vào trước thẻ ]]></b:skin>

      .comment-form p {background-image: url(http://1.bp.blogspot.com/-3UWB4yhuSFA/UbsdUdxBD-I/AAAAAAAAKRE/VmycOK9dj0Y/s1600/warning_namkna-blogspot-com.png);background-position: 12px 27px;background-repeat: no-repeat;background-color: #FFF799;border: #EE9D00 solid thin;padding: 1em;padding-left: 70px;color: #000;margin:30px 12px 20px 0}

      Ngoài ra bạn có thể xem bài này nha: Tạo khung nội quy nhận xét đóng tự động

      Xóa
    4. vẫn không được bạn à, mình làm như thế rồi mà vẫn không thấy gì cả.chổ nội quy nhận xét đó

      Xóa
    5. vẫn không được bạn à, mình làm như thế rồi mà vẫn không thấy gì cả.chổ nội quy nhận xét đó

      Xóa
    6. Mình đã vào trang của bạn, hiện bạn đang dùng mẫu của blogger bạn có thể áp dụng thủ thuật Di chuyển ghi chú nhận xét của thread comment theo khung nhận xét khi reply trong blogspot để phần ghi chú không bị chạy cuối bài viết.

      Về phần màu khung ghi chú, Mình đã test rất oke có thẻ do mẫu của bạn xung khắc ở đoạn code nào đó, bạn vui lòng gửi mẫu vào tavannam01@gmail.com mình sẽ chỉnh sửa giúp cho.

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

    Trả lờiXóa
  14. Anh Nam ơi, anh có thể cho em xin code hộp like giống như Blog của anh không ạ?

    Trả lờiXóa
    Trả lời
    1. Đây nha e:

      <div class='subicons'>
      <!-- AddThis Button BEGIN -->
      <div class='wdt_button'><div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='true' data-width='44'></div>
      </div>
      <div class='wdt_button'><a class='twitter-share-button' data-count='vertical' data-via='namkna' href='http://twitter.com/share'>Tweet</a></div>
      <div class='wdt_button'><div class='g-plusone' data-size='tall'></div></div>
      <div class='wdt_button'><a class='addthis_counter'></a></div>
      <!-- AddThis Button END -->
      </div>
      <div style='clear:both;'></div>
      <div class='emailicon'>Đăng ký ngay để nhận bài mới hoàn toàn miễn phí qua email của bạn</div>
      <div class='count'>
      Có<a href='http://feeds.feedburner.com/Namkna'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/Namkna?bg=00CC33&amp;fg=0033FF&amp;anim=0' style='border:0' width='88'/></a> người đăng ký Namkna
      </div>
      <div style='clear:both;'></div>
      <div class='emailsub'>
      <div class='emailupdatesform left'>
      <form action='http://feedburner.google.com/fb/a/mailverify' class='right' id='newsletter' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=namkna","popupwindow","scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
      <input class='text' name='email' onblur='if(this.value==""){this.value=this.defaultValue}' onfocus='if(this.value==this.defaultValue){this.value=""}' type='text' value='Enter your Email address...'/>
      <input class='submit' type='submit' value='Đăng ký'/>
      <input name='uri' type='hidden' value='namkna'/>
      <input name='loc' type='hidden' value='en_US'/>
      </form>
      </div></div>

      <style>

      /* email susbrice */
      #newsletter .text,#newsletter .submit{float:left;background:#5C5959;font-size:12px;line-height:16px}
      #newsletter .text{border-top:0;border-right:1px solid #3e3e3e;border-bottom:0;border-left:0;border-radius:7px 0 0 7px;padding:9px 10px;width:170px;height:16px;color:#eee}
      #newsletter .text:hover,#newsletter .text:focus,#newsletter .submit:hover{box-shadow:0 1px rgba(255,255,255,.2) inset;background:#066}
      #newsletter .text:focus{outline:0}
      #newsletter .submit{margin:0;border:0;border-radius:0 7px 7px 0;padding:9px 0;width:65px;height:34px;color:#999;cursor:pointer}
      #newsletter .submit:hover{color:#eee}
      .wdt_button{float:left;margin:5px}
      .count{font-size:14px;font-weight: bold;vertical-align:middle}
      .subicons{background:#F0F2F3;border:1px solid #ddd;height:80px}
      .emailsub{padding:0; float: left; margin-left:10px}
      .emailicon{background: url(http://1.bp.blogspot.com/-Vf_GGb7b_PE/UzfWM3c6rQI/AAAAAAAAMb0/jpCvtYCJKCw/s1600/email-icon.png) no-repeat left center; float: left; padding: 5px 0px 0px 35px;line-height: 15px; vertical-align:middle; font-size:14px; color:#333;}
      .emailupdatesform{margin:0;width:100%;margin:10px 0 10px}
      </style>

      Xóa
    2. Anh ơi tuy nhiên trang chủ của anh Like Facebook là like Fanpage ạ, anh có thể chỉ dẫn cho em cách làm được không ạ?

      Xóa
    3. Nó là like face không phải like fan e ak. Like fanpage thì em có thể xem bài hướng dẫn này: Tạo Facebook Like Box chuẩn HTML5 cho blogspot

      Xóa
  15. Nam ơi, cho mình hỏi là cái hình mình làm sao để nó hiện giống social sharing của bạn được ko, ý mình là cho nó hiện luôn, ko cần hình ảnh khi rê chuột vào nó mới hiện.
    và subscribe phía dưới đó là đi chung luôn 1 widget đó hay là riêng vậy Nam?

    Trả lờiXóa
    Trả lời
    1. Bạn có thể xem comment mình trả lời Văn việt ngay bên trên comment của bạn có đoạn code bạn cần đó.

      Xóa
  16. Anh Nam, cho em hỏi
    Làm thế nào để có mỗi bài có mỗi nút like share ở ngoài. Chứ không phải kích vào mỗi bài mới có.
    Như trang này : http://danhngoncuocsong.vn/
    Trả lời hộ em, em cảm ơn ạ

    Trả lờiXóa
  17. Đẹp lắm, thanks nhiều.Mà Sao nút thứ 2 là nút G+ ko có tác dụng vậy AD, giúp mình được chứ?

    Trả lờiXóa
  18. Bài viết rất hữu ích
    Mới lập blog mong mọi người ghé thăm: http://doquocanh-it.blogspot.com/

    Trả lờiXóa