The Spearmint Blogs

<img class="aligncenter size-full wp-image-9665" alt="pinteresting" src="http://www.spearmintbaby.com/wp-content/uploads/2013/02/pinteresting.png" width="567" height="366" /><a href="http://i666.photobucket.com/albums/vv24/spearmintbaby/pinteresting.png" target="_blank">click here to download</a>
It's been a BUSY week. Aren't you always so relieved when Friday comes around?

So, not much blogging for me this week- I've been working on another project. Two of my besties just started a blogspot blog & I've been re-learning Blogger so I can help out. Blogger has changed so much since I used it years ago for my own blogs (before I switched over to Wordpress.) It has come a long way and there is so much more customization that you can do with a blogger blog without needing a lot of coding experience/skill.

So, one of the things my girlfriends asked me for help with was adding a hover Pinterest "PIN IT" button to their blog. After a little research, I learned that not only is it EASY to add a hover "PIN IT" button to a blogger blog, but you can customize your "PIN IT" button just like you can on a Wordpress blog! (see my tutorial for <a href="http://www.spearmintbaby.com/2013/02/how-to-add-a-custom-pin-it-button-to-your-wordpress-blog/ " target="_blank">how to add a Pinterest hover button on your Wordpress blog</a>) I used this little tutorial from <a href="http://www.bloggersentral.com/ " target="_blank">Bloggersentral</a> that works brilliantly!

Here ya go:
1. Design your "Pin It" graphic & save it as a PNG file. I use photoshop CS5 for grapics, but you can easily make your own "PIN IT" button using a free application like <a href="http://www.picmonkey.com/" target="_blank">picmonkey.com</a>. Or feel free to use one of my buttons (above)
2. Upload your graphic to a photo saving website. I use Photobucket.
3. Go into your blogger account and go to Template > Edit HTML.
4. Scroll almost all the way down the template until you locate the </body> tag.

5. Click over to <a href="http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html" target=""_blank">Bloggersentral</a> to copy & paste this code right before the </body> tag:
<a href="http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html"><img class="aligncenter size-full wp-image-9677" alt="blogsentral" src="http://www.spearmintbaby.com/wp-content/uploads/2013/03/blogsentral.png" width="560" height="326" /></a>

A few notes:

*Your png "PIN IT" button code should be pasted over this code:
http://3.bp.blogspot.com/-y3xzTGiGzH0/
 UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png

Feel free to use one of the buttons on my <a href="http://s666.beta.photobucket.com/user/spearmintbaby/library/? " target="_blank">photoshop page</a>, like this one:
http://i666.photobucket.com/albums/vv24/spearmintbaby/pinit80.png

* you can also change the position of your "PIN IT" button. Find the part of the code that says "center" & try changing it to topleft, topright, bottomleft, bottomright. Play around with position to see what visually suits your blog.

6. Click SAVE & then refresh your blog. It should instantly update with your "PIN IT" button anytime you hover over a blog image.

After adding the hover "PIN IT" button to my friends' blog, <a href="http://www.mammagranate.com/ " target="_blank">Mammagranate.com</a>, I started experimenting with all of the other fun things you can do with blogger. I'm helping to redesign the blog and here is where we are at. (check out the hover "PIN IT" button in action on their blog!)

Here is the BEFORE:
<img class="aligncenter size-full wp-image-9675" alt="mamma5" src="http://www.spearmintbaby.com/wp-content/uploads/2013/03/mamma5.png" width="570" height="259" />

& Here is what we've done with it so far:
<img class="aligncenter size-full wp-image-9679" alt="mg1" src="http://www.spearmintbaby.com/wp-content/uploads/2013/03/mg1.png" width="570" height="430" />

Friday, March 8, 2013