Blogger Guide: How To Create a Custom Pinterest Hover Button!

Recently, I've seen a ton of my favorite blogs undergoing big design changes and also many new blogs hitting the web so today I thought I would revisit one of the things that was crucial in my first big customization overhaul as a blogger. And that is? How to design and embed your own hovering "pin-it" button! This little tweak is crucial for maintaining an easy flow of shared content to and from your site but also to simply aid in the cohesiveness of the overall aesthetics of your page! By adding embedded Pinterest links to all of your images, you make it quick and easy for readers to share the post and come back to it later!

I'm the first to admit that I started blogging with a less-than-basic amount of coding knowledge and even the slightest tweak seemed super difficult but I'm here to show you that coding can be a lot easier than it seems! Today's guide is going to be all about creating and coding your own hovering Pinterest button and it's applicable for anyone working on the Blogger platform! There are two options when creating a button. You can use one of the pre-made Pinterest options or you can customize your own. I'll show you how to do both of these here!

Option One // Pinterest Pre-made Options

This option is a tad bit simpler because it involves only entering code into a widget, so you won't have to worry about botching your overall blog template code. To do this, all you need is an HTML widget in your sidebar and some simple copy and paste!

1. Head on over to {this link} which will take you to Pinterest's pre-made options. You've got the choice here to pick either 'One image' to apply the button to, 'Any Image' on your blog or 'Hover'. I personally prefer the Hover option because it allows every image to be pinnable but also hides and easily appears when your reader slides their mouse over the image for undisrupted viewing. After you've decided which works best for you, simply choose the size, shape and color of your button and we'll move on to the coding!

2. Now here's the easy part! After you've chosen your button, the website will provide you with a code below the Preview. Go ahead and copy this and then head over to your blog! Once you open Blogger, head to Layout and "Add a Gadget". You're going to be adding an HTML/Javascript gadget. This will be invisible to your readers so it doesn't truly matter where you place it but my recommendation would be to place this at the bottom of your sidebar so you know where to find it if you need to make any changes! After you have this gadget open, paste the code from the Pinterest page into this blank gadget. Press Save and Voila! Seriously, it's as easy as that!

Option Two // Design Your Own Custom Pinterest Hover Button

This option requires a few more minutes and is a tad more difficult just because we're going to be editing your blogger template however its worth it if you would like to add a custom flair to your blog! This option is a little more daunting but I promise, if I could figure it out, you can too!

1. First off you're going to start by creating a custom image. I generally use {PicMonkey} to create my custom graphics. I've found that it is the easiest to use online photo editing software, however Gimp, Piktochart and PhotoShop are all other great options. Some tips to remember when you're creating your custom button - consider the size you'll want your button, colors that will easily show up on any picture, cohesiveness with your overall blog theme and remember to make the background transparent!

2. After you have created your button upload it to an online photo sharing software. I typically use photo bucket but any will do!

3. Here comes a bit of the tricky part, now we're going to do some coding. Open up Blogger, click on Template and now go to Edit HTML. Search (Ctrl F) to find </body>. You're going to be pasting this code right before that line. Remember that before editing any of your template it is always a good idea to back up a copy of your HTML in case any errors occur! Now what you're going to do is copy all of the code below from <script> to </script> and place it right before </body>. 

Here's the code: 

<script>
 //<![CDATA[
 var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCp1UX0TCZWOKVoQ2tANU8CU9Kn-16yFwyS35RndMFQHJmZDtGLT8q7WVlH9B2RQyPac57ociWVdcXc4pul_VpRcWOPA7MYi_Fna2_usTt0WbaCkfHWNJKMfnWQpbhyphenhyphenBanmADcKXIPt8u1/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'>
 </script>

4. Now that you have pasted this code, {same code also available here} it's time to place your customizations. I've highlighted the three possible places where you'll be making changes. Starting with line three, you'll be specifying the image for your hover button. Simply take the direct link to your image, easily accessible through links on Photobucket, and place this between the "quotation marks" that is highlighted above. Make sure to keep the quotation marks! The next two highlighted sections are your personal choice whether you would like to customize them or not, I just thought I would go ahead and point them out! The first determines where your button will appear on the image, this code currently has it centered. To change this simply insert "topleft", "topright", "bottomleft", or "bottomright". The last possible customization is the text that will appear when your reader clicks on the button and the Pinterest post button appears. I changed the highlighted section by Suffix to say {from Emily and Dot}, simply so when this is pinned, the description will post my blog title! Customize these sections as you like! Leave the few last lines of text beginning with // intact and save the changes you've just made to your template!

When you go back to your blog you should now see your custom image appear over all of your images in your body posts! Go ahead and try out my Pinterest button and pin this article to help out other fellow bloggers or archive it for yourself!


Let me know if you have any questions or if you had any success with my tips! Feel free to post your blog URL in the comments and I'd love to see your customized Pinterest hover buttons!
Emily

Check Out My Interview on Seashells + Sparkles!

A few weeks ago, Rachel over at {Seashells + Sparkles} reached out to me for an interview on her blog and of course I said yes! For one, if you haven't been to her blog you should definitely check it out. She is a relatively new blogger but I love her classic New England style as well as her lifestyle posts! I loved getting to answer some questions for her! She definitely had the best interview questions so far! To check out my answers head on over to her blog or click on {this link to see the interview}!

Here's a little sneak peak at some of my comments!

What inspired you to start Emily and Dot?

Well, I really started Emily and Dot on a whim and essentially as a New Year’s Resolution! I had never been very good at keeping a consistent journal but I think the fact that I’ve tried multiple times really showed that void of some kind of an outlet. I had a bit of a rocky start with only one post, followed then by a two month break, before I started typing again but after I picked it back up I was hooked and E&D has been plugging along ever since!

What is your go-to piece of clothing?

A simple A-line skirt in a bright color! I have way too many of these skirts from J.Crew hanging in my closet but they’re the one thing I know I can throw on and it will be flattering and appropriate for almost any occasion. Spice it up with a pair of wedges or pair it with a baseball tee and you’re good to go! It’s definitely the no-brainer in my closet!

If you could have dinner with one person, living or dead, who would it be? Why?

I would absolutely love to sit down with Tina Fey. Her drive, ambition and humor are so infectious. I think it would be not only empowering but also absolutely hilarious. Maybe one day!

What do you do to relax?

I love taking a night to relax and watch movies. 80’s movies are my favorite! A group of girl friends and some Ben and Jerry’s make it absolutely perfect!

If you could only wear one pair of shoes for the rest of your life, what would they be?

Navy Converse! I will always swear that they can be worn with every outfit. I love the look of a white t-shirt, rolled jeans and converse but I also love matching them with a formal dress for a night of dancing. They will always be in the corner of my closet!

If you could give one piece of advice to someone interested in blogging, what would it be?

Go for it but make sure you’re doing it for the right reasons. Don’t go into blogging with lofty goals of immediately making a living or immediately having a million followers. Do it for you. Do it because you enjoy writing little afternoon blurbs or for the creative outlet or for the strong and confident girls you get to meet through the amazing blogger network. Those big milestones will come later but if you’re doing it for grounded reasons, you will gain so much more than you originally thought you could.

Head over to Rachel's blog to check out the interview! I'd love to hear what you all think!

Emily

Emily's Super Easy Guide to Centering Your Blog Header!

I'm back at it again, giving you a few little tips and tricks to make your blog shine! Coding is so important for a chic and streamlined blog design however sometimes it can be a real hassle and cause a lot of stress to make sure that you get everything working just perfectly! I've posted before about {how to create a custom Pinterest hover button} to help some of you deal with a bit of this tricky coding. I know a lot of people had success with my first tutorial so I decided to give it another whirl! Today is all about one simple line of code that can make a huge difference in the appearance of your blog! I'm going to teach you in THREE super easy steps how to center your blog header!

Once again, this only applies to those using the blogger platform! I promise, if you could follow along with the Pinterest hover button tutorial, this is going to be a piece of cake! Here we go!

One, Upload File

Go ahead an upload your blog image as you would regularly by going to Edit Template, Header and then Choosing a File. You have the option to choose your preferred placement of "Behind Title and Description", "Instead of Title and Description" or "Have Description Placed After the Image". I chose to have one solid header image "Instead of Title and Description" but it's all up to you. Click Save and we'll keep rolling!

Two, Pick Your Code

Based on what placement you chose for your image (in the step above) you're going to have a different code. The options are below:

Instead of Title and Description // #header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;}

Behind Title and Description // #header-inner {background-position: center !important; width: 100% !important;}

Three, Put it all Together!

Go back to your Blogger Dashboard and open Template, Customize, Advanced, and then Add CSS. Here, paste the code that you decided on above. Hit the Enter key after you have pasted this snippet and then Save and Apply your changes.

Head back to your blog and see your newly centered masterpiece! Hope this tutorial helped you all! Let me know if you had any success or if there are any other blog tutorials that you would like me to show!

Emily

Emily's Guide to Creating A Custom Pinterest Hover Button!

 As a fairly new blogger only starting out with basic coding knowledge, most of my coding that you'll see around my blog has been through extreme trial and error. To help out some other bloggers, I figured I'd post a few features to help out on some simple coding that can seem a little messy at first! Once you get the hang of it, coding is a lot easier than it seems! Today's guide is all about creating and coding a personalized hover image for Pinterest! My tips are all applicable for anyone working on the Blogger platform!

Pinterest is a great tool for bloggers. It serves as a way to broadcast your blog posts more publicly and build more followers as well as to meet other bloggers! By adding Pinterest links to all your post images, you make it quick and easy for readers to share the post! With this simple how-to, you'll get a Pinterest link up and running in no time!

There are two options when creating a link, you can use one of the pre-made Pinterest options or you can customize your own. I'll show you how to do both of these here!

One // Pinterest Pre-made Options

This option is a little easier because it involves only entering code into a widget so you won't have to worry about botching your overall blog template code. Here all it takes is an HTML widget in your sidebar and some simple copy and paste!

First you're going to head on over to {this link} which will take you to Pinterest's pre-made options. You've got the choice here to pick either "One image" to apply the button to, "Any Image" on your blog or "Hover". I personally prefer the Hover option because it allows every image to be pinnable but also hides and easily appears when your reader slides their mouse over the image. After this, simply choose the size, shape and color of your button and we'll move on to the coding!

Now here's the easy part! After you've chosen your button, the website will provide you with a code below the Preview. Go ahead and copy this and then head over to your blog! Once you open Blogger, head to Layout and "Add a Gadget". You're going to be adding an HTML/Javascript gadget. This will be invisible to your readers so it doesn't truly matter where you place it but my recommendation would be to place this at the bottom of your sidebar, just so you know where to find it if you need to make any changes! After you have this gadget open, paste the code from the Pinterest page into this blank gadget. Press Save and Voila! Seriously, it's as easy as that!

Two // Create Your Own Custom Pinterest Hover Button

This option requires a few more minutes and is a tad more difficult just because we're going to be editing your blogger template however its worth it if you would like to add a custom flair to your blog! This option is a little more daunting but I promise, if I could figure it out, you can too!

First off you're going to start by creating a custom image. I generally use {PicMonkey} to create my custom graphics. I've found that it is the easiest to use online photo editing software, however Gimp is another good option. Some tips to remember when you're creating your custom button: Consider the size you'll want your button, colors that will easily show up on any picture, cohesiveness with your overall blog theme and remember to make the background transparent!

This is what my button looked like before resizing. Note the transparent background! 

After you have created your button upload it to a photo sharing software, I personally use photo bucket but any will do!

Here comes a bit of the tricky part, now we're going to do some coding. Open up Blogger, click on Template and now go to Edit HTML. Search (Ctrl F) to find </body>. You're going to be pasting this code right before that line. Remember that before editing any of your template it is always a good idea to back up a copy of your HTML in case any errors occur! Now what you're going to do is copy all of the code below from <script> to </script> and place it right before </body>. 

Here's the code: 

<script>
 //<![CDATA[
 var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCp1UX0TCZWOKVoQ2tANU8CU9Kn-16yFwyS35RndMFQHJmZDtGLT8q7WVlH9B2RQyPac57ociWVdcXc4pul_VpRcWOPA7MYi_Fna2_usTt0WbaCkfHWNJKMfnWQpbhyphenhyphenBanmADcKXIPt8u1/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>

Now that you have pasted this code, {same code also available here} it's time to place your customizations. I've highlighted the three possible places where you'll be making changes. Starting with line three, you'll be specifying the image for your hover button. Simply take the direct link to your image, easily accessible through links on Photobucket, and place this between the "quotation marks" that is highlighted above. Make sure to keep the quotation marks! The next two highlighted sections are your personal choice whether you would like to customize them or not, I just thought I would go ahead and point them out! The first determines where your button will appear on the image, this code currently has it centered. To change this simply insert "topleft", "topright", "bottomleft", or "bottomright". The last possible customization is the text that will appear when your reader clicks on the button and the Pinterest post button appears. I changed the highlighted section by Suffix to say {from Emily and Dot}, simply so when this is pinned, the description will post my blog title! Customize these sections as you like! Leave the few last lines of text beginning with // intact and save the changes you've just made to your template!

Now when you go back to your blog you should now see your custom image appear over your images in your body posts! Go ahead and try out my Pinterest button and pin this article to help out other fellow bloggers!

Let me know if you have any questions or if you had any success with my tips. Feel free to post your blog URL in the comments and I'd love to see your customized Pinterest hover buttons!

Emily