Thêm nút chia sẻ Facebook, Tweet và G+ nổi trên blog (Style 2)

Đăng bởi Admin | 29/10/13 | 0 nhận xét

Đã bao giờ bạn tự hỏi để tạo ra một loại phụ tùng chia sẻ nổi Mashable cho blog blogger của bạn? Bạn sẽ có nó ngay hôm nay! Đây là một phiên bản của một tiện ích nổi trong đó có các nút tốt nhất xã hội như Facebook Share / thích, Twitter và nút Google +1. Tất cả trong một tiện ích. Widget này hoạt động hoàn toàn trên CSS và HTML và hoàn toàn tương thích với tất cả các trình duyệt chính. Bạn có thể thấy được tiện ích này dính bên trái của bài viết trên blog của tôi. 

                                               

Làm thế nào để Thêm nút chia sẻ Facebook, Tweet  và G+ nổi trên blog ?

1. Về Blogger> Bố cục
2. Chọn một HTML / JavaScript phụ tùng
3. Dán đoạn mã sau bên trong nó:


<style>
/*-------MBT Floating Sharing Widget------------*/
#floatdiv {
position:fixed;
bottom:15%;
margin-left:-70px;
z-index:10;
float:left;
padding-bottom:2px;
}
#mbtsidebar {
background:#fff;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding-left:5px;
width:60px;
margin:0 0 0 5px;
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>


<div id="floatdiv">
<div id="mbtsidebar">
<table cellpadding="1px" cellspacing="0">

<tr>
<td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mybloggertricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td>
</tr>
<tr>
<td style="padding:5px 0 2px 0;">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</td>
</tr>
<tr>
<td style=" padding:5px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
<g:plusone size="Tall" expr:href="data:post.url">
</g:plusone></td>
</tr>
<tr>
<td>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://thuthuatvitinhaz.blogspot.com/2013/10/them-nut-chia-se-facebook-tweet-va-g.html">Widgets</a></p>
</td>
</tr>
</table>
</div>
</div>


4. Lưu mã của bạn.
5. Tùy biến:
Để sắp xếp các widget hơn theo hướng bên trái hoặc bên phải sau đó chỉnh sửa giá trị nàymargin-left:-70px;   Giảm giá trị số này sẽ thay đổi phụ tùng ở bên phải và làm tăng giá trị sẽ chuyển nó sang trái. 
Để thay đổi màu nền của nổi widget và sau đó thay đổi này background: # fff; 
Tham khảo Bảng mã màu tại đây
6. Nếu bạn muốn hiển thị widget trên các trang bài và không phải là trang chủ , hãy làm theo các bước sau:
Đặt cho phụ tùng nổi này một tiêu đề tạm thời ( VD: WIDGET-TITLE-HERE) sau đó làm như sau:

1. Về Blogger> Thiết kế> Chỉnh sửa HTML
2. Sao lưu mẫu của bạn
3. Mở rộng kiểm tra các Widget Templates Hộp
4. Tìm kiếm các tiêu đề của các phụ tùng
5. Các mã cho các widget sẽ tìm một cái gì đó tương tự như thế này:


<b:widget id='HTML8' locked='false' title='WIDGET-TITLE-HERE' type='HTML'>
<b:includable id='main'>
bla bla bla bla
</b:includable> </b:widget>


Một khi bạn tìm thấy những tiêu đề sau đó thêm hai  đoạn mã số in đậm màu xanh lá cây ngay bên dưới và sau các văn bản màu xanh in đậm . Ví dụ, nếu bạn muốn hiển thị một widget ở trang chủ chỉ sau đó làm điều này:



<b:widget id='HTML8' locked='false' title='WIDGET-TITLE-HERE' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
bla bla bla bla
</b:if>
</b:includable> </b:widget>


Lưu mẫu của bạn và bạn đã thành công dừng lại màn hình hiển thị widget trên trang chủ và cho phép nó trên tất cả các trang bài.

Bạn có thể tham khảo thêm các mẫu khác:

Tạo các nút Google +1, Facebook, Twitter nổi cho blog

Tạo nổi Bar Facebook & nhiều nút chia sẻ khác (Style 3)

Chúc bạn thành công !...

                                                                    Nguồn: mybloggertricks.com