Tạo nút like và share cho blogspot, website với AddThis - Social

Khi chúng ta tạo một blog, website thì cần có những nút like + share để kết nối người đọc và chúng ta lại gần nhau hơn và nó sẽ giúp cho blog, website của bạn dễ dàng đến với người đọc dễ dàng nhất. Vậy thì chúng ta sẽ thêm nút share và like cho blogspot, website với AddThis.

Tạo nút like + share với AddThis

Bước 1: Truy cập vào địa chỉ: https://www.addthis.com/get/sharing và click vào Create Account.
Bước 2: Điền mail và pass hoặc có thể đăng nhập bằng các tài khoản mạng xã hội khác.

Bước 3: Chọn kiểu social phù hợp với web, blog của bạn. Nhớ là có chữ Free nha hoặc bạn có thể trả tiền để lấy code bản Pro.

Bước 4: Click vào social đó rồi kéo xuống khung code, copy code và chèn vào vị trí thích hợp của web, blog.

Tạo nút like trên hoặc dưới bài viết cho blog:

Bước 1: Vào Template > Mẫu > Chỉnh sửa HTML và tìm kiếm code sau:

Đây là gần tiêu đề bài viết.

<div class='post-header'>

Đây là cuối bài viết.

<div class='post-footer'>

Bước 2: Chọn được vị trí thích hợp thì chúng ta chèn code sau vào vị trí đó:

Mội số button khác bạn có thể thêm vào code trên trong thẻ div <div class="addthis_toolbox addthis_default_style ">...</div>

<a class="addthis_button_linkedin"></a> /* linkedin button */
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> /*google plus button */
<a class="addthis_button_digg"></a> /* digg button */
<a class="addthis_button_stumbleupon"></a> /* stumbleupon button */
<a class="addthis_button_print"></a> /* print button */

Sử dụng CSS3 để làm đẹp AddThis Share Buttons.

Xem demo

Bước 1: Vào Template > Mẫu > Chỉnh sửa HTML và tìm kiếm dòng sau:

<b:skin><![

Và thêm code CSS sau:

.addthis_share_btn a, .addthis_share_btn a:visited {
background: #FF5C00; /* background color of the button */
display: inline-block;
padding: 6px 12px;
font-family: arial,helvetica,lucida,verdana,sans-serif;
font-size: 12px;
line-height: 1em;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.addthis_share_btn a:hover {
background: #D45500; /* background color on mouse hover */
color: #fff;
}
.addthis_share_btn a:active { top: 1px; }
.addthis_share_btn a span, .addthis_share_btn:visited a span {
background: url(http://www.addthis.com/cms-content/images/gallery/icon-addthis.gif) no-repeat left;
padding: 1px 0 1px 18px;
}

Bước 2: Muốn đặt nó ở đâu thì tìm code dưới:
Đây là gần tiêu đề bài viết.

<div class='post-header'>

Đây là cuối bài viết.

<div class='post-footer'>

Chọn được vị trí thích hợp rồi chúng ta chèn code dưới vào:

Share


 

Lưu Template lại và xem kết quả.

Tham khảo tại helplogger.blogspot.com

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

Jakub BB