Nút Pin On Pinterest Khi Rê Chuột Qua Cho Mỗi Hình Ảnh

Một cách để tăng traffic cho blog đó là thêm nút share hình ảnh lên Pintesest, người dùng dễ dàng chia sẽ hình ảnh kèm theo link blog của bạn.

Đây là công cụ khôn thể thiếu cho một blog hình ảnh.

Nếu chưa có tài khoản Pinterest các bạn Pin hình Demo và đăng ký luôn nhé, đây là một mạng xã hội chia sẽ hình ảnh.

Nếu bạn là người mới dùng chưa biết cách chỉnh sửa cơ bản thì mời bạn xem bài viết này nhé: cách dùng blogspot cơ bản

Chú ý sự xuất hiện của nút Pin ở góc trên bên trái của hình nhé.
                                            

Cách thực hiện như sau:

Cách 1: Giống như hình Demo

• Các bạn truy cập vào link này  pinterest và chọn mục Imge Hover 

• Chọn kiểu theo ý mình muốn (demo) trực tiếp ở hình đó luôn. Xong kéo xuống dưới copy code.
• Có 2 kiểu nút: nút tròn như demo hình của mình, nút chữ nhật là giống như hình chup HD bên trên.
• Hoặc các bạn copy code mình đưa bên dưới đó cũng giống vậy.

Chọn 1 kiểu và copy code bên dưới vào trên thẻ đóng </body>

1. Kiểu nút hình tròn

<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async="async" data-pin-shape="round" data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

2. Kiểu nút chữ nhật

<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async="async" data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

- Chú ý nếu copy bên trang chủ của nó thì chỉ có async nên bạn phải sửa thành async="async" mới lưu template được nhé.
- Xóa dòng data-pin-height="28" để có kích thước nhỏ hơn.

Cách 2:  Tùy biến cho nút Pin
Copy đoan code dưới đây và dán vào trên thẻ đóng </body>

<script>
//<![CDATA[
var pinButtonURLtb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqWHxQ5Nm5XEa1WqFR918OcEHeP64U1FmKNKZfBKSH-V8mn-5tdkmwhLtXxUx6AHLEnXixaLPFj1__OQbgHH8txMdWkt4yoiWvsiCMuldVDrRFHiPtOBeF0WK9RUCt4AD95CRrHEkzrVsO/s600/pinterest-button.png";
var pinButtonPostb = "bottomleft";
var pinPrefixtb = "";
var pinSuffixtb = "";
//]]>
</script>
<script id='pinOnHovertb' async="async" src='https://googledrive.com/host/0ByN7YzFVMI4MQVVsT2lDV3N6S2s' type='text/javascript'>
// This Pinterest Image Hover Button by thanksban.blogspot.com
</script> 

Các mục màu xanh bạn có thể thay đổi theo ý muốn của mình.

•  bottomleft: có thể thay lại bằng topleft ; topright  ; bottomright

- Nếu không muốn hiển thị nút Pin ở một hình ảnh nào đó thì như sau:

Sau khi tải ảnh lên xong, ở trang bài viết bạn chuyển qua chế độ soạn HTML và thêm dòng class= "nopin" như hình dưới là được.

- Nếu không muốn hiển thị nút pin trên nhiều ảnh trong 1 bài viết thì cũng chuyển qua chế độ soạn HTML và thêm dòng code bên dưới vào: 

<div class= "nopin"
Những hình ảnh của bạn ở đây
</div>

Bạn để ý trên code của Pinterest có lưu ý: <!-- Please call pinit.js only once per page -->

Tức là chỉ cho code này ở trang mình muốn Pin thôi.

Nếu bạn chưa biết cách thực hiện điều này thì mời bạn đọc bài viết: Tùy chỉnh chạy ứng dụng tại trang nhất định cho blog

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

Facebook

Google+

Tweet

Tweet

Hi! Bạn đang xem Nút Pin On Pinterest Khi Rê Chuột Qua Cho Mỗi Hình Ảnh tại blog thanksban ^_^
Chúc bạn một ngày tốt lành, hạnh phúc.
Have a beautiful day!