Chèn nút Share, Like, G+, Tweet cho blogspot với hiệu ứng đẹp

By Unknown

Thứ Tư, 27 tháng 8, 2014

Tiếp tục bài viết về chèn mạng xã hội dười bài viết để khách truy cập vào blog bạn khi khách thích và hài lòng về một bài viết nào đó của bạn có thể chia sẻ bài viết bằng cách Share, Like, G+ hoặc Tweet điều này giúp blog bạn có thêm lượng truy cập và củng có lợi cho SEO rất nhiều.

DEMO

Ở bài viết này Tuấn Phan hướng dẫn chèn nút  Share, Like, G+, Tweet dưới bài viết cho blogger/blogspot với hiệu ứng CSS3 đẹp mắt cho template của bạn.

Chèn nút Share, Like, G+, Tweet cho blogspot với hiệu ứng đẹp

Với hiệu ứng đóng mở khi chúng ta re chuột vào biểu tượng  Share, Like, G+, Tweet rất đẹp làm cho template blog bạn cá tính hơn.
Cách tiến hành chèn Share, Like, G+, Tweet dưới bài viết:
Bước 1: Đăng nhập vào tài khoản blogger của bạn
Bước 2: Chọn Mẫu
Bước 3: Chỉnh sửa HTML >> Nhấn Ctrl+F tìm đến thẻ ]]></b:skin> thêm đoạn CSS bên dưới trước nó

CSS3 Share, Like, G+, Tweet

/* CSS Slide Share Button */
#button-count-share{float:none;width:100%;overflow:hidden;background:rgba(12, 12, 12, 0.35);text-align:center;margin:15px auto;padding:0;padding-top:7px;padding-bottom:2px;}
#button-count-share span{float:none;position:relative;font-size:13px;color:#fff;margin:12px}
.button-share{background:#f9f9f9;position:relative;display:inline-block;float:none;height:40px;line-height:40px;overflow:hidden;width:140px;margin:0 auto;box-shadow:inset 0 0 5px rgba(0,0,0,0.1);}
.slide-share{z-index:2;display:inline-block;height:40px;line-height:40px;left:0;position:absolute;width:140px;margin:0 auto}
.slide-share p{font-family:'Roboto';font-weight:700;color:#fff;font-size:15px;left:0;position:absolute;text-align:center;width:100%;margin:0 auto}
.button-share .slide-share{transition:all 0.4s ease-in-out}
.facebook .fb_iframe_widget{display:block;position:absolute;right:15px;top:0;z-index:1}
.twitter iframe{right:10px;top:10px;z-index:1;display:block;position:absolute}
.google #___plusone_0{width:90px!important;top:10px;right:10px;position:absolute;display:block;z-index:1}
.facebook .slide-share{background:#3b5998}
.twitter .slide-share{background:#4099ff}
.google .slide-share{background:#E41B17}
.facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share{left:140px;opacity:0.6;}

Sau khi chèn CSS xong chúng ta tìm đến thẻ <div class='post-footer'> thứ 2 và chèn đoạn Code bên dưới dưới nó

Code Share, Like, G+, Tweet cho blogspot

<div id='button-count-share'>
<div class='facebook button-share'>
<div class='slide-share'>
<p>Share</p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
</div>
<div class='facebook button-share'>
<div class='slide-share'>
<p>Like</p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='google button-share'>
<div class='slide-share'>
<p>G+</p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
<script type='text/javascript'>
  window.___gcfg = {lang: &#39;id&#39;};

  (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='twitter button-share'>
<div class='slide-share'>
<p>Tweet</p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='clear'/>
</div>

Tiếp tục chúng ta tìm đến thẻ </body> chèn đoạn JS bên dưới trên nó

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
    <script>
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = &quot;//connect.facebook.net/vi_VN/all.js#xfbml=1&quot;;
        fjs.parentNode.insertBefore(js, fjs);
      }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
</b:if>

Bước 4 : Lưu lại và xem kết quả
Chúc các bạn thành công

Tag : Chia sẻ, CSS, HTML5