Hộp chia sẻ Facebook, Twitter, G+ cho blogger - Trang Tin tức - Giải trí - Thủ thuật tổng hợp - Download tài liệu - Game cho người Việt

Breaking

Business

BANNER 728X90

Friday, September 27, 2013

Hộp chia sẻ Facebook, Twitter, G+ cho blogger

Facebook, Twitter... là các trang mạng xã hội rất phổ biến và được nhiều người dùng hiện nay! Vì vậy việc tạo ra các nút Share là rất cần thiết cho một trang web! Thủ thuật tạo hộp chia sẻ Viettin365.com hôm nay giới thiệu cho các bạn là một thủ thuật không mới nhưng mong rằng các bạn khi xem xong bài này thì sẽ dễ dàng hơn rất nhiều trong việc chọn vị trí đặt hộp chia sẻ.

Ảnh minh họa :
Bắt đầu thủ thuật : 

1. Đăng nhập Blogger
2. Chọn mẫu --> Chỉnh sửa HTML
3.Chèn code dưới vào vị trí theo ý muốn :


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

.botpost{margin-left:-15px;width:615px;height:68px;border-top:1px solid #0443A1;border-bottom:1px solid #0443A1;background: #EDF7CD;padding-top:5px;margin-bottom:10px}

.nhan {float:left;width:160px;padding:0 10px 0 10px}

.sendmailp {float:left;width:130px}

.google {float:left;width:270px}
.wdt_button{float:left;margin:5px}
</style>
<div class='botpost'>
<div class='nhan'>
Đăng bởi <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author' rel='author' target='_blank'><data:post.author/></a>
</div>
<div class='sendmailp'>
Hãy like nếu bài viết có ích &#8594;
</div>
<div class='google'>
<div class='wdt_button'><a class='addthis_button_facebook_like' fb:like:layout='box_count'/></div>
<div class='wdt_button'><a class='addthis_button_tweet' tw:count='vertical'/></div>
<div class='wdt_button'><a class='addthis_button_google_plusone' g:plusone:size='tall'/></div>
<div class='wdt_button'><a class='addthis_counter'/></div>
</div>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d2267003d6799cf' type='text/javascript'/>
<!-- AddThis Button END -->
</b:if>

Cụ thể từng vị trí như sau: 

3.1 : Đặt dưới tiêu đề bài viết:
Tìm đến code 
<div class='post-header'>
hoặc
<div class='post-header-line-1'/>
3.2 Đặt dưới cuối bài viết:
Tìm đến code 
<div class='post-footer-line post-footer-line-1'/>
hoặc
<div class='post-footer-line post-footer-line-2'/>
hoặc
<div class='post-footer-line post-footer-line-3'/>
Chúc các bạn thành công.

No comments:

Post a Comment