Add Pinterest Pin It Mouseover Button on Blogger Images

Pinterest Pin It Mouseover Button on Blogger: Images have consistently played a notable role in attracting new visitors through search engines like Bing and Google. But when Pinterest decided to enter the social networking blend, it upped the ante in a big way.

Pinterest lets site owners use their service to include a 'pin' to content pictures in the website or pictures. Visitors of that site can decide to click in the reddish Pinterest button and add it when they see a picture they enjoy.

Whoever pressed your Pinterest pin it button share it with friends or followers in the service, and are now able to see your picture on their dash. They are also able to come across this picture when users add the picture and type labels or key words. Moreover, that picture links can include a description title of your website name or post and to your own website when clicked on.

Thus, adding the Pinterest pin it button can let you profit from individuals who'd located your pictures and lots of new traffic and post links utilizing the service. Below are a few measures to incorporate your own Pinterest button.

Pinterest Pin It Mouseover Button on Blogger Images

Please follow below steps to add Pinterest Pin It Mouseover Button on Blogger Images:

Step 1: Edit your Blogger Template

Login into your blogger dashboard and Go to Template than click on "Edit HTML" button as shown in below picture.

When your blogger editer open, Click anywhere inside the code area and search below code with pressing the CTRL + F keys:

</body>

Step 2: Add The Pinterest Pin it Script

Copy and Paste the following script just above </body>:

<script>
//<![CDATA[
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVsBXvFToERrV1YV0LUVwKfhzjNRALvKh55Ju1CbQcev0Ne0cbDs8S0bH1EeGT3lMcn-XNEPPraBIzfTHai9_B6N3M5yc0bHImxTPdmjOS0u4npt-xlEFfEOjJ2NSexNC6uhgjfaW9o6N8/s1600/pinit-button.png";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='pinit-img-button' src='http://usefbcover.com/public/pinterest-button1.js' type='text/javascript'>
// Visit haakblog.com for more widgets and tricks.
</script>

Step 3: Change Position of the Pin it! button

The amazing thing concerning this code is that you have some liberty over where the image will be gone over by the Pinterest button. Have a look in the code which you just copied and pasted to the HTML for the word 'centre'.

var pinit_button_position = "center";

Replace center with one of these texts if you want to move the pin to a different area:

- topleft

- topright

- bottomleft

- bottomright

and if you want to change pin it image than replace your own image url with below url in script

var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVsBXvFToERrV1YV0LUVwKfhzjNRALvKh55Ju1CbQcev0Ne0cbDs8S0bH1EeGT3lMcn-XNEPPraBIzfTHai9_B6N3M5yc0bHImxTPdmjOS0u4npt-xlEFfEOjJ2NSexNC6uhgjfaW9o6N8/s1600/pinit-button.png";

Step 4: Save The Template

Make sure that you added everything right, browse to your current post which you made that include pictures and then save the template. Hover your mouse within the picture for Blogger exhibited in the picture and also you need to now see a red Pinterest button. Examine it out as well as see it it works.

This button's single drawback is that it will not require the data out of your custom picture names. It is mechanically set to choose the name of the blog post where the picture is found. Thus, you will want to pay closer attention to the name of the places to ensure it fits strongly together with the pictures being revealed.