Beautify Your Blog || Pinterest Mouseover
A few weeks ago I helped host a blogger round table all about blog design. There seemed to be a lot of the same questions from bloggers – they all wanted a simple fix for similar problems. Rather than just share it with the few ladies at the round table, I wanted to share it with all of you. So here we are with my new mini-series beautify your blog. Today’s topic? Pinterest Mouseover – The Hovering Pin It Button!
———————————————————————-
1. In the left sidebar of your blogger dashboard click “Template”.
2. Under the Live on Blog thumbnail click “Edit HTML”.
3. Locate the </body> tag near the end of the template – Use Ctrl F or Apple F for easy searching.
4. Paste the following code right above the </body> tag:
<script> //<![CDATA[ var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png"; var bs_pinButtonPos = "center"; var bs_pinPrefix = ""; var bs_pinSuffix = ""; //]]> </script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script> <script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'> // This Pinterest Hover Button is brought to you by bloggersentral.com. // Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details. // Feel free to use and share, but please keep this notice intact. </script>
*HTML Code provided by Blogger Central.*
- If you want to use your own button or image replace the RED URL with the direct URL to your image – replace the URL online, keep the quotes
- To change the placement of the button replace center – in BLUE with the new position:
- topleft
- topright
- bottomleft
- bottomright
5. Click “Save Template”.
6. And happy pinning!
Do you want a new design for your blog? Are you afraid of using HTML and coding? Whether you blog for fun, for family, or for fame – LISTEN UP! I’ve been bitten by the design bug. I’ve been learning all sorts of new tips, tricks, and code for blog design. And… since I just BARELY redeigned my blog I’m not ready for a new one. So I am giving away ONE FREE BLOG DESIGN! Enter Below!
What steps do you want to learn to beautify your blog?
ugh, i want to do this, my pictures are all formatted to be a certain size. Because of this, when I added the pinterest thing, the pinterest icon was like HUUUGE and took over half my page! do you know how to fix that?! lol
Thanks for the tutorial! I did it! wahoo. Also, I think you may have a typo. But I could be wrong. You said to paste the code about the < / body > tag. Did you mean above? That's what I'm assuming. Entered your giveaway! Time to hang out again!!
Okay, I'm about to change the name of my blog so winning this would be perfect timing 🙂
Hey lady! I'm a new follower! 🙂 I already have my Pinterest hover set up but this is a great tutorial and I do recommend every blogger have it. It's so vital and it's SOOO practical. I just love how I can hover over my pictures in any post and BAM, they are instantly on pinterest for the day. No hassle! Love it!
Ginny
http://www.buttergirldiaries.com
I WISH I were creative enough and good enough with that HTML madness to design my own blog. I'm in the market for a new blog title so if I win a make over from you that would be perfect!!
I love changing up my blog. I'm a freak. And too poor to do it, so I'd love to win haha. Also a great tutorial! I did mine awhile ago and I Love having it!
Oh my gosh thanks for the tutorial!
WOW! Thank you so much! I literally was about to ask you how you did this. Now I have a question… What do you use for designing your blog title and such?
Thanks again!
Sue // Chevron & Lace
Deidre you are the best! you are the HTML QUEEN!!!
I did it and I am super proud of myself!!!
http://sclifeasawife.blogspot.com
I am super proud of you too! HTML is sort of scary. Ha
Just did it Deej… you're a genius! and I love you!