Blogger: Simple method to include pinit (Pinterest) hover button

"Develop a passion for learning. If you do, you will never cease to grow." - Anthony J.D'Angelo

Hello Blogger friends!! Hope you have great week.


If you want to promote your blog, the first step is your presentation and photos. Photos are awesome stuff which you deliver your messages better than words. Next step we need to promote on social media. That's the best option if you already decided. So today we going to meet the both in same. Yes, in your blog images try to connect the social media. Now i am going to explain the steps how to hover the pinit button on the blog images. Its really simple with the pinterest. Just follow the steps and let me know your comments. All the best Blogger friends and have fun.

Step 1 - Get the Code

To get your own button code, go to Pinterest Widget Builder. Select the "Button Type" option is set to "Image Hover", then choose your favorite button style.


Image Hover Option

You'll get a choice of Round or large buttons. You can preview each button style to choose the right one for your blog. Once you have chosen your button style, copy the generated code in the below grey box. Refer the below image.


Pinterest hover generated code

Step 2 -  Paste the code

For paste the code, we have two options here.
  • Option 1:
    • Login to Blogger and navigate to Layout. Click Add a Gadget and select HTML/JavaScript. Paste the copied code and save arrangement. I suggest to place that code in footer.
Blogger HTML/JS page
  • Option 2:
    • Login to Blogger and navigate to Themes > Edit HTML. Paste the code just above the closing </body> tag of each page where you want the button to show up on your site.
Blogger Edit HTML page


The Final Output of you blog
Final Outcome of your Blog

1 comment:

  1. I've been meaning to do this! It seems easy enough. Thanks for sharing the steps! - Briana @ Next Destination Unknown | https://www.nextdestinationunknown.com/

    ReplyDelete