Chủ Nhật, 14 tháng 7, 2013

Tạo hộp chia sẻ theo từng vị trí cho blog

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ẻ Viettin24h.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