Ready to add a pinterest button to your blogger blog posts? I first wrote about doing this here. Pinterest is a great way to get more traffic to your blog.
If you haven't used Pinterest yet it is a virtual “bulletin board” featuring photos of things that interest you on the internet. Encourage your readers to pin your pictures by adding a pint it button to each post.
I posted about this earlier here but I thought I would rewrite the directions to make it a little easier. I have added a pin it button to two of my blogs now.
So far I have the button on my Teaching Spanish Blog and now on this one. Check out a couple of my pinterest boards here and here.
Thanks to Kelsey for making this button.
If you do this make sure to back up your template (copy and paste into a document) before doing anything.
Here is what worked for me:
1) Click on template.
2) Then click on the button that says "Edit HTML.
3) At this point you may open a page with this message: "Directly editing HTML may affect the way some features work and is only recommended for advanced users. Editing template HTML may unpredictably affect other Blogger features. We recommend using the Template Designer first, where you can Add CSS under the Advanced section." Don't worry. You are going to be backing up your template so if you do make a mistake you will have yourself covered. Go ahead and hit the button that says proceed.
4) Check the box that says "Expand Widget Templates."
5) Add this piece of Javascript right before the </head> tag:
<script type='text/javascript'>
function pinit() {
var e= document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
document.body.appendChild(e);
};
</script>
It should now look like this:
<script type='text/javascript'>
function pinit() {
var e= document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
document.body.appendChild(e);
};
</script>
<head>
6) Next press "Ctrl f" and do a search for this bit of code: <!-- quickedit pencil -->
7) Now insert the bolded code in between the second and third lines of this section. It should now look like this: (The new code is in bold)
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
<span class='post-icons' style='float: right;'>
<a class='goog-inline-block share-button pin_it_button' expr:onclick='"pinit(); return false;"' target='_blank'/>
</span>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div> </div>
8) Finally do another search for /* Footer . If you don't have a Footer section, try search for '/* Content' instead.
/* Footer
----------------------------------------------- */
9) Copy and paste the following code right below the code above:
.pin_it_button {
overflow: visible;
width: 51px;
height: 26px;
margin-right: 1px;
font: normal normal normal 11px/normal Arial, sans-serif;
background-color: transparent !important;
background-image: url("http://assets.pinterest.com/images/pinitbutton_sprite.png") !important;
color: #CD1F1F !important;
background-position: 0px 0px !important;
background-repeat: no-repeat no-repeat !important;
cursor: pointer;
}
.pin_it_button:hover {
background-position: 0px -27px !important;
}
It should now look like this:
/* Footer
----------------------------------------------- */
.pin_it_button {
overflow: visible;
width: 51px;
height: 26px;
margin-right: 1px;
font: normal normal normal 11px/normal Arial, sans-serif;
background-color: transparent !important;
background-image: url("http://assets.pinterest.com/images/pinitbutton_sprite.png") !important;
color: #CD1F1F !important;
background-position: 0px 0px !important;
background-repeat: no-repeat no-repeat !important;
cursor: pointer;
}
.pin_it_button:hover {
background-position: 0px -27px !important;
}
10) Save and close. Congratulations! Your new pinterest button should now be at the bottom of each blog post.
