How to Add Pinterest’s Pin It Hover Button Widget on Blogger

A brand new tutorial that how to add Pinterest’s Pin It Mouseover / Hover Button Widget on your Blogger Blog. This new tutorial guide you that how to show the Pin It Button on images of the Blogger page. Some new snippet will help you to control where the Button on your Blogger Page appears.

Get the Code

For getting the Pin It Button Widget Code, Go to Pinterest Widget Builder.

Now click on Build it option and copy the code that have show in below-


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

Open the template

On the Blogger Dashboard, click on the template option and next, click on the Edit HTNL option. Now you need to search the code from template code pressing the Ctrl +F keys, after click on the template code once.

Enter the </body> in search box and press enter or clock on the Search button beside the search box. The code will jump to the </body> tag that highlight with yellow color.

Add the Code

1. Add the code immediate above the </body> that you have copy from the Pinterest Widget Builder or in the previous step in this tutorial.


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

2. Now press the Save Template Button above the template code on right side.

Now you have successfully added the Pin It Button on Blogger and enjoy the Button on your Blogger Page.

What’s the problem after adding Pin It Button widget on Blogger?

After adding the Button, Every image of the pages shows the Button on Blogger. It is the big problem that you don’t like to show this button on Header image or Logo image and on the sidebar image.

Solution

Now you need to add new snippet code on your Blogger template that helps to disappear this button from unwanted area of the web pages.

Remove Pin It Button from any post image

If you want to pin it button off in image, you can use the “nopin “attribute. To nopin the image, switch the HTML view of your post or page . Now find the “src” attribute and it will look like this –

Now enter Nopin = “nopin” attribute before backslash on HTML Markup image element like this –

Now click on Publish or save button for disappearing the Pin It button forms this image.

Remove Button from header

If Pin It Button appears on the Header you want to remove it from header, you need to add some snippet code on your template.

Search the </body> tag from the Template code and paste the code just above the </body> as like the below code-


<script type="text/javascript">
document.getElementById("Header1_headerimg").setAttribute("nopin","nopin");
</script>

Now Save the Template and Pin It Button definitely will be removed from Header area.

Remove Pin It Button from the Sidebar image

The Pin It Button will appear on the Sidebar images. Two way, you can remove the sidebar images adding this attribute nopin = “nopin”.

Remove Pin It Button from Gadget Images

This is a tricky method to remove the images form sidebar Gadget.

Backup your Template.

Now on the Template code area, you can see the “Jump to widget” option for jumping to the widget code directly. Click on Jump to Widget option and a menu came down, select the widget. You directly go to the widget code and find look like this-


<b:if cond='data:link != ""'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:if>

Now add the nopin =”nopin” attribute on the widget code that will be look like this –


<b:if cond='data:link != ""'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width' nopin='nopin'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width' nopin='nopin'/>
      </b:if>

Now save the Template and you have successfully remove the Pin It Button form Sidebar.

Gw Share kok

How to Add Pinterest’s Pin It Hover Button Widget on Blogger

Artikel Menarik Lainnya