Earlier, we discussed about social network
widgets for blogger such as
Facebook,
twitter,
Google+ that really helps to increase traffic on your blog through social networking sites. And today in this tutorial i would like to share an another social network widget is
Pinterest pin it button.
Pinterest is one of the best service that allows users to pin images from the web to their Pinterest pin board, and that same pinned image can be re-pinned by their friends or followers on the service. for an example, if your blog has a Pinterest button, it lets your blog visitor to pin on their Pinterest account/pin-board. So, thus your blog's images can go viral on Pinterest. And the best thing is that it displays a link back to your site and a description with your blog name or title.
This is an another idea to get tons of traffic from Pinterst. but for this your blog must have a pinterest button installed. Don't worry ! In this tutorial you will see how to add
Pinterest "Pin it" mouseover button to each blogger images. A small red colored button with the text "Pin it" will be displayed on each image of your blog but only when a user mouse over on it.
Well, if you would like to see a demo of it, I have already installed it in this blog, see above picture and over the mouse cursor on it to see how it works !
Also see : How to add official twitter buttons to blogspot blog
How to add Pinterest "Pin it" hover button to blogger Images?
To install this widget to your blog, first thing is to go to your
blogger dashboard > Template > Edit HTML. Then click anywhere inside the template and press CTRL + F to enable search box to search for
</body> tag and insert the following script just above it.
<script>
//<![CDATA[
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8FmODtYyxwHHFFirBPzFI8x3wCwz6g_JDZLDrEMD6hQfolDwqBSbQs9YKyCXDuKIT4Iox9ne9maFaYHJqx7WOxQdYY1CaW43RYHVMc5nLGpvb5PIdNiu7wW1s4YEXAe6j1kOeQZ8qiKi-/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://makingdifferent.github.io/blogger-widgets/pinterest-button1.js' type='text/javascript'>
// Visit makingdifferent.com for more widgets and tricks.
</script>
Changes : Well, there isn't any change required, just install the code and Pinterest button will be start working on your blog. But if you want to customize few things on it. here's some ideas.
Default position of "Pin it" button is Center. You can change it according to your choice. To move the pin to a different area of the photo, replace
center with one of these texts:
topleft
topright
bottomleft
bottomright
And to change the Pin it! button that appears on mouse over, replace the address in blue from above with your own:
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8FmODtYyxwHHFFirBPzFI8x3wCwz6g_JDZLDrEMD6hQfolDwqBSbQs9YKyCXDuKIT4Iox9ne9maFaYHJqx7WOxQdYY1CaW43RYHVMc5nLGpvb5PIdNiu7wW1s4YEXAe6j1kOeQZ8qiKi-/s1600/pinit-button.png";
That's it ! Now make sure that you have added everything correctly and save your template. Visit any latest post of your blog that contain images. Hover your mouse over image and see how actually it works and looks. :)
Well, If you want to hide pin it button on a specific image, when you create a post, Switch post editor to HTML tab, and type
class="nopin" right before the closing slash and angle bracket of your image element, like this:
If you have any questions about this tutorial, Feel free to ask by commenting below i would like to answer your each questions. Also don't forget to share this tutorial with your blogger friends.
Happy blogging. !! :)