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.

,

0 nhận xét

Write Down Your Responses

Quảng Cáo/ Thông Báo của lớp báo k32

Tổng số Khách

Thứ Sáu, 27 tháng 9, 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.

Không có nhận xét nào:

Đăng nhận xét

Widget#2

Widget#5

Widget#4

primaryBottomSidebar

Footerpages

Trang

Bottom Navi

Được tạo bởi Blogger.

Người theo dõi

TIÊU ĐIỂM