Khung Chia sẻ Facebook , Google +1 bài viết ... v2.0

Cũng như ở bài viết trước mình đã giới thiệu với các bạn Button Chia sẻ Facebook , Google +1 ... Đẹp Cho Blogger . Hôm nay mình xẽ giới thiệu với các bạn khung chia sẻ & like bài viết Facebook, Google +1, Tweet .

Ảnh minh họa khung chia sẻ bài Viết iChiaSe.Biz

Ở Bài viết này mình cũng không sử dụng JavaScript. Vì vậy tốc độ load trang của Blog vẫn không bị thay đổi. Điểm mới trong Khung Chia sẻ Facebook , Google +1 bài viết ... v2.0 là có hiệu ứng trượt sang bên phải khi dê chuật vào, và cũng giúp phần trang trí Blog thêm sinh động và tương thích với người dùng.

Demo

Để thêm Khung Chia sẻ Facebook , Google +1 vào bài viết các bạn làm theo các bước sau đây:
Bước 1: Đăng nhập vào blogger.com
Bước 2: Vào Bố cục >> Bài đăng trên blog >> Chỉnh sửa cụ thể như hình bên dưới
Bước 3: Tiếp tục các bạn chọn mẫu >> chỉnh sửa HTML >> Ctrl+F tìm đến thẻ ]]></b:skin>  và dán đoạn CSS sau trước nó:

/* CSS  Share Button iChiaSe.Biz V2.0 */
#button-count-share{width:100%;overflow:hidden;background:#fff;margin:0 auto;padding:3px;margin-top:15px;margin-bottom:15px;}
#button-count-share span{float:left;position:relative;font-size:13px;color:#fff;margin:12px 5px 12px 5px}
.button-share{background:#FFFFFF;position:relative;display:block;float:left;height:40px;overflow:hidden;width:125px;margin:4px;}
.slide-share{z-index:2;display:block;height:100%;left:0;position:absolute;width:125px;margin:0}
.slide-share p{font-family:'Roboto';font-weight:400;color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}
.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:#4f79bc}
.twitter .slide-share{background:#63cef2}
.google .slide-share{background:#f36261}
.facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share{left:125px;opacity:0.6;}
.buttonx{background: #54C0D1;
padding: 8px 15px 8px 14px;
font-weight: bold;
border: 0px;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-size: 14px;font-width: 14px
outline: medium none;
text-align: center;
text-decoration: none;
box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;}
.buttonx:hover{background: #333333;color:#fff !important;}

Sau khi đã thêm CSS các bạn tìm đến thẻ sau:
<div class='post-footer'> thứ 2 nếu không có thì tìm đoạn <b:includable id='post' var='post'>...</b:includable> nếu có đoạn <div class='post-footer'>  thì code bên dưới dưới nó hoặc có thể chèn trong đoạn này <b:includable id='post' var='post'>...</b:includable> tùy theo mỗi template mà bạn đang sử dụng
Hoặc các bạn có thể chèn ngay bên dưới  <data:post.body/>. Nói chung là nơi bạn cần hiển thị khung chia sẻ trong bài viết.

     <div id='button-count-share'>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<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'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<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'><i class='ikons'><i class='icon-google-plus icon-large'/></i>
<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'/>
</div>
<div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i>
<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>
</div>
<div class='clear'/>
</div>

Cuối cùng save lại và xem kết quả Khung chia sẻ có hoạt động tốt không?

Chúc các bạn thành công

Nguồn : iChiaSe.Biz

Tag : Thủ Thuật Blogger