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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbEeiU6V-N3a_lCvV86kzJnSiPWAu8TIdpxPV9sIZc6GTj1S50KySkIoUoNdacguAmXCjfSwNDCXCg9j7NUvOGKVtJMxorFWRki22OgXc3Vsv8fv6f578HDGZhqsn90VRqgw7QQSZTrGs/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbEeiU6V-N3a_lCvV86kzJnSiPWAu8TIdpxPV9sIZc6GTj1S50KySkIoUoNdacguAmXCjfSwNDCXCg9j7NUvOGKVtJMxorFWRki22OgXc3Vsv8fv6f578HDGZhqsn90VRqgw7QQSZTrGs/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbEeiU6V-N3a_lCvV86kzJnSiPWAu8TIdpxPV9sIZc6GTj1S50KySkIoUoNdacguAmXCjfSwNDCXCg9j7NUvOGKVtJMxorFWRki22OgXc3Vsv8fv6f578HDGZhqsn90VRqgw7QQSZTrGs/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbEeiU6V-N3a_lCvV86kzJnSiPWAu8TIdpxPV9sIZc6GTj1S50KySkIoUoNdacguAmXCjfSwNDCXCg9j7NUvOGKVtJMxorFWRki22OgXc3Vsv8fv6f578HDGZhqsn90VRqgw7QQSZTrGs/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ợ.