Slideshow Widget

How to line up your social network buttons

Friday, September 28, 2012

Well hello, everyone! I'm so sorry for my absence, yet again. This week, I've been in class for my CPR and stuff for work and when not in class I've been at work or attempting to sleep when my kids aren't running around like little lunatics (like they are right now).  Also while not at work, I've been finishing up my ebook, Bloggerific, which should be finished and ready to launch in the next few weeks!

 This week, I had a question from Becca of Everyday Life, asking how I line up my social network buttons on my blog. In writing Bloggerific, I'm trying to include lots of tutorials for pretty blog layouts and tricks and this was one topic that I just finished writing. So, here's a little preview for you:

                                          How to line up your social network buttons

Begin by finding buttons that you want to use or creating your own. If you search for “free social network buttons” there are loads of beautiful buttons out there or you can buy very affordable, customized buttons on Etsy. My buttons are free from Her New Leaf.  Save these images to a photo host site such as Photobucket. 

Copy the button image URL from your photo host site.

Paste it in the blue spot below

Log in to each of your social networks (Facebook, Twitter, etc) and paste the link to your page in the red space below.  

Repeat this for every social network button until you have one line of code for each social network site. Your email button will be a little different. Instead of putting a social network link in the red space add this code:  "mailto: youremailaddress"

Next, go to your blog’s layout, select “add a gadget” and choose the text gadget. Click “edit html”

Paste your entire code into the box so it looks something like this. Switch back to "rich text" (top right corner) and your buttons should appear side-by-side.


  If there are spaces between the buttons or they don't line up as you want them to, switch back to the html tab and delete or create spaces between each button's code as needed. Hit save when you're ready to finish and move the gadget wherever you want them to appear in your layout. If you ever want to change your buttons, you can edit all of that code by changing out the button image url and keeping the links to your pages as they are.  That is all, my dears! If you have any questions or problems please let me know and I'll be happy to help. Off to bed now...horray!!

Learn everything I know about blogging and DIY blog design with my ecourse Bloggerific: A Guide to a Beautiful, Successful Blog

6 Responses to “How to line up your social network buttons”

  1. For someone (aka ME) who is not computer savvy, I so appreciate you sharing this information.

  2. Great tutorial - and sneak peak into the kind of content we'll find in your upcoming ebook. I hope don't run yourself ragged with so much to do though, sweetie, it sounds like you've got a full plate and a half at the moment!

    ♥ Jessica

    1. Oh, two full plates! I always do though. Im just taking it all a little bit at a time. I do enjoy having many things going on at once. Im never bored!! :)

  3. Thank you for this i have now got mine lined up so thank you again x

  4. thank you, thank you, thank you, I was just trying to figure this out the other day, became frustrated and gave up. Really appreciate it my dear:)


I read every single comment (even on old posts) and they make my day! If you have a question, please email me at Thank you for reading me!