Top 10 Ultimate SEO Plugins For WordPress 2017-18
ProTechnify

15/05/2015

Add Pinterest pin It Button on Blogger Images

Pinterest pin it button
Pinterest is a growing social network and a good place to get social network traffic to our blog and web just like Reddit but its work are different. Pinterest have also released some pin it buttons with new ideas means as we all know that pinterest works on images. When someone pin it our images it automatically sends to all their followers and everyone sees your image with your post link. Every webmaster setup pinterest mouse over styles to increase their web readers. You can also use this massive mouse over style in your blog for increase page views by following this article.

Make Your Pinterest Account

If you not have an Pinterest account so make it first because it is needed for checking followers and pins analytics. Click on sign up fill this form with meditation and don’t forget to add your site name in “user name” after sign up create your pin board for adding all your web images in interest, it works as a site map for your web. After this back to blogger and see the below steps.

Let's start the tutorial.

Go to Blogger>> Template >> Backup, don’t take risks if you are new in blogging just back up your template file.

Click on Edit HTML and press CTRL+F.

Search the below code.
</body>
 Now add below codes above <body>.
<script>
//<![CDATA[
var custom_pinit_button = "http://4.bp.blogspot.com/-3CPCJ031n9M/U_vWZXUV1SI/AAAAAAAAKPA/8Q3N34ieaBw/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://helplogger.googlecode.com/svn/trunk/pinterest-button1.js' type='text/javascript'>
// Visit protechnify.blogspot.com for more widgets and tricks.
</script>
 Click on save template, your work done.

Connected Aritcle: How to Change Favicon on Blogger Blog.

Script Instructions

To do some editing in above script read the below instruction.

In this tutorial the below image is present, so if you want to change or add custom image replace the below URL with your new image.
var custom_pinit_button = "http://4.bp.blogspot.com/-3CPCJ031n9M/U_vWZXUV1SI/AAAAAAAAKPA/8Q3N34ieaBw/s1600/pinit-button.png";
Its open script in which you can customize easily, you can also change the image direction by replacing center with these below directions.
var pinit_button_position = "center";
 Direction Styles
topleft
topright
bottomleft
bottomright

More Over

This style is shown on your every little image, you can also conceal this style in selected post by adding the below code as shown in below image.
class="nopin"
Pinterest pin it
 After doing some editing, save the template and check your awesome new mouse over pin it button. After this check your blog stats daily and see the long graph of unique visitors.




0 comments:

Post a Comment