Chèn chia sẻ facebook, tweet, G+, share cho Web, blog, blogger

Loading...

Chắc hẳn các bạn ghé thăm website hay blog nào đó bắt gặp Web của họ có những nút (button) chia sẻ hoặc like facebook, G+ rất đẹp. Nếu Blog, Website của bạn chưa có và bạn muốn có những chia sẻ facebook, Tweet, G+, Share...và nhiều hơn thế nữa thì hãy chú ý bài viết này, các bạn sẽ chèn những chia sẻ đó rất đơn giản và đẹp mắt, với nhiều mẫu khác nhau.

Ở bài viết này, mình giới thiệu chèn chia sẻ đang được thông dụng nhất đối với người dùng đó là Addthis. Có nhiều mẫu khác nhau cho bạn chọn.
Và mình giới thiệu trên Blogger. Đối với Website các bạn cũng chèn tương tự.
DEMO SHARE BUTTON 1
Có 2 cách sử dụng Addthis cho Blogger.
Cách 1: Dán Code dưới thẻ (Cách này dùng cho Website nhưng mình giới thiệu chung cho cả Blogger). Mình lưu ý ưu tiên dùng cách này

CODE mẫu DEMO 1:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_floating_style addthis_counter_style' style='left:1px;top:250px;'>
<a class='addthis_button_facebook_like' fb:like:layout='box_count'/>
<a class='addthis_button_tweet' tw:count='vertical'/>
<a class='addthis_button_google_plusone' g:plusone:size='tall'/>
<a class='addthis_counter'/>
</div>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-50dd91bc3816efd5' type='text/javascript'/>
<!-- AddThis Button END -->

Giá trị left và top các bạn có thể thay đổi để hiển thị.
Ở đây mình để left: 1px là để khung chia sẻ đó ép vào màn hình sát phía trái
Giá trị top: 250px; ứng với độ dài từ phía trên màn hình tới khung.
Mẫu 2: Đối với dạng mẫu 2 này thích hợp cho các bạn chèn vào bài viết.

Hiện bài viết của mình cũng sử dụng mẫu này. Vị trí đặt Code mẫu này các bạn phải lưu ý, muốn đặt hiển thị ở vị trí nào thì các bạn tìm tới vị trí đó để đặt
CODE mẫu DEMO 2:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-50dd9bfe1dd52869"></script>
<!-- AddThis Button END -->

Cách 2:
Các bạn có thể copy code ở trên và thêm vào 1 tiện ích (Widget) HTML/Javascript.
Hoặc có 1 số mẫu các bạn có thể cài trực tiếp bằng cách dưới đây:

Và nhiễu mẫu khác tại trang https://www.addthis.com cho các bạn lựa chọn.
----------------------------
Bài viết sau mình sẽ hướng dẫn các bạn chèn chia sẻ bài viết, chèn chia sẻ có nguồn từ 1 số trang khác, vì mình thấy nó cũng rất đẹp và nhiều chức năng chia sẻ.
--------------------------
Chúc các bạn thành công !

Loading...

Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger