How to Add a Pinterest Hover Button Blogger

How to Add a Pinterest Hover Button Blogger

How to Add a Pinterest Hover Button Blogger
How to Add a Pinterest Hover Button Blogger

Pinterest is a digital web browser providing recipes, home, and fashion inspiration, and other ideas.

It’s a photo-sharing and social media tool that allows you to save and find information on the internet.

What is Pinterest Hover Button?

What is Pinterest save button?

A Pinterest hover button is a button that allows a user to save an image from a page.

When users, browse on a website and find a picture to their interest, they can click the Pinterest button to save any image from that website.

Pinterest Hover Button Blogger- Pin It Plugin

By adding a Pinterest hover button to your Blogger images, you can make it simple for your website visitors to pin your pictures.

This will necessitate making changes to your Blogger template. I recommend backing up your Blogger template before you continue with the procedures below.

This is how you do it if you have a website and you would like to add this feature to your images.

How to Add Pinterest Images to WordPress

  1. Go to Pinterest Pin It Button For Images to download the zip file.

2. Next, go to your WordPress Dashboard.

3. Select Add New from the Plugins menu.

4. After that, upload the zip file.

5. To use the plugin, go to your WordPress Dashboard and activate it.

6. Next, go to Settings and choose Pinterest Pin It from the drop-down menu.

7. Click All Pages under the heading Show “Pin It” button on subsequent pages.

8. Save the file.

The default “Pin It” feature is included with this plugin.

How to Customize Pinterest Hover Button You can use these methods to adjust your button or just use the one that arrives with the plugin.

To design your Pinterest Button, go to free Pinterest buttons

Be certain that everything you select has a transparent background.

Save it as a PNG file.

After that, open the file you downloaded and click the Pinterest pin it button.

Drag the new Pinterest Pin It button into the Pinterest Pin It Button for Images folder.

In a Notepad or Text Editor, open the ppibfi pinterest.css file and locate the following code at the top.

.xc pin.pibfi Pinterest

80px width

50px in height

Background-image: URL (‘ppibfi_button.png‘)

If your button is a different size, adjust the width and height of the code.

Then update the name and the file type of your image where it says ppibfi button.png.

After that, save the file.

Change the top and margin numbers to shift your button to a different location if you want it to be in a different place.

Save the ppibfi pinterest.css file once you’ve finished adjusting it.

Then, in the Pinterest pin it button for the images folder, zip it up.

For a Mac, right-click the folder and select Compress.

On a Windows PC, right-click the folder on and select Add to zipping.

Finally, to install the Plugin in WordPress, follow the procedures outlined above.

How to Add a Pinterest Hover Button to your Blogger Images- Add Pinterest Button to Blog Image
  1. Select Edit HTML from the Template menu in your website Dashboard.

2. Scroll to the bottom of the code to find the following line: </body>

3. Go to the website

4. Copy the code and put it above the </body> code in your template code.

5. Select “Save Template”

6. Close the session by clicking the “Close” button.

The button will show in the center of your image by default.

Pinterest Pin It Button For Images- How to Add a Pin It Button to Pictures on Your Blog
  1. How to customize the button on your image?

2. Follow these steps if you want it to appear in the corner of your picture instead:

3. First, find the line of HTML code in your template.

4. Select Edit HTML from the Template menu.

5. This is where you’ll find it: var bs pinButtonPos = “center”

6. Change the word “center” to one of the following:

·     Top left

·     Topright

·     Bottom left

·     Bottom right

Pinterest Widget Builder

You can quickly add a Pinterest hover button to your pictures by copying and pasting Pinterest’s javascript code to your website.

Click on the Pinterest Widget Builder page, and select “Image Hover”.

Type on the As the top of your blog, paste the code.

Elementor Pinterest Button- How to Use a Pinterest Button
  1. Make a new blog article.

2. Include the link to your Pinterest profile in the post.

3. When you see the pictures in your article, go to the upper left corner and click the HTML button.

The post’s HTML code will be visible.  

4. After that, search for the picture code. It will begin with an image and include src= before a URL enclosed in quotes.

5. To see a larger version of the image, click on it. After src=, copy the URL that is enclosed in quotes.

Note: Do not publish this post; instead, save it as a draft, to keep track of the URL.

This new post’s main goal is to save your image on your website.

6.Go to Template and click Edit HTML, you will find this code:

var bs_pinButtonURL = “”;

7. Substitute your image’s URL for the URL in the quotations.

8. Select “Save Template”

9. Close the session by selecting the “Close” button.


Leave a Reply

Your email address will not be published. Required fields are marked *