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

Nguồn: Satoh Yasuko - NASS

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.

» 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://ift.tt/1aut3St") 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://ift.tt/1aut3St") 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://ift.tt/1aut3St") 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://ift.tt/1aut3St") 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="http://ift.tt/1cy9iG8namkna.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">
     <iframe style="width: 58px; height: 62px;" data-twttr-rendered="true" title="Twitter Tweet Button" class="twitter-share-button twitter-tweet-button twitter-count-vertical" src="http://ift.tt/1aut6xKnamkna.blogspot.com &amp;size=m&amp;text=Gi%E1%BB%9Bi%20thi%E1%BB%87u%20Webgame%20chi%E1%BA%BFn%20thu%E1%BA%ADt%20Chi%E1%BA%BFn%20Tranh%20C%C3%A1c%20V%C3%AC%20Sao%20%7C%20Di%E1%BB%85n%20%C4%91%C3%A0n%20game%20l%E1%BB%9Bn%20nh%E1%BA%A5t%20Vi%E1%BB%87t%20Nam&amp;url=https%253A%252F%252Ftwitter.com%252Fshare" allowtransparency="true" id="twitter-widget-2" frameborder="0" scrolling="no"></iframe>
    </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://ift.tt/1aut6O0"></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>

Đăng ký: Viet Blogs

Nguồn tin