Now that your blog is getting beautiful, you’re going to want to share it! Adding buttons to your blog requires a tiny bit of know-how, but it can make a big impact for your readers.
I’d also like to take a moment to share that you can now follow Her New Leaf on Facebook! I plan to use the page to communicate with my readers, find out what you want to read more about, and even provide some exclusive content for Facebook followers only!
The buttons that I use in my own sidebar are courtesy of Isa Maria of The Academy. I had been searching high and low for a cute set of icons that included a button to link to my Pinterest, and when I discovered Isa Maria’s adorable icons based on the Pantone Color of the Year, I knew they were perfect and couldn’t wait to share. Please click over to her blog and subscribe to her newsletter, they are full of wonderful tips and advice for your blog or business!
I wanted to share this fantastic resource with you all, so I decided to put it together with a teeny, tiny html primer. Don’t be scared! Way, way back when I was a wee geek of twelve, I taught myself enough html to create my own pages on Angelfire and Geocities. Remember those? So if I could do it then, you can do it now!
Rather than just giving you code to copy and paste, I figured I’d break it down a bit and teach you so that you can add a bit of html to your blog design repertoire. But if you just want to copy and paste and get it over with, I promise not to hold it against you. ; ) You can scroll to the bottom of this post to find out how.
Edit: Several of you have reported having trouble locating the URL for the buttons – that’s because you need to create it yourself by uploading the images to your own image hosting service. WordPress users can use the built-in Media Library, Blogger users can use an external service such as Photobucket. This is where you’ll find the image URL.
From your WordPress dashboard, go to Appearance > Widgets, and click and drag the “Text” Widget from the box on the left to your sidebar box on the right. It will open up a blank box.
From your Blogger dashboard, go to Design, then click “Add a Gadget.” Select “HTML/Javascript” from the menu. It will open up a blank box.
First, we’re going to learn how to create a link. You can use this basic html tag in your blog posts, email, anywhere you can use html.
<a href="URL of link">Text to Link</a>
Your link will look something like this:
You can also edit this tag slightly so that your link will open in a new tab or window. This is helpful since you don’t want your readers to leave your blog to look at your pages.
<a href="URL of link" target="_blank">Text to Link</a>
But we want to show our cute buttons, so you’ll need this tag to place an image:
<img src="URL of image">
Finally, we combine the two tags to add a link to the image:
<a href="URL of link" target="_blank"><img src="URL of image"></a>
This is the same code, with my links as examples:
<a href="http://www.facebook.com/pages/hernewleaf/"target="_blank"> <img src="http://hernewleaf.com/files/facebook.png"></a>
Continue adding links and images until you have added all of the buttons you want! Make sure you test all your links because one incorrect character is all you need to send your readers to the wrong place!
Enjoying the Primp My Blog series so far? Consider adding my button to your blog!
{ 207 comments… read them below or add one }
← Previous Comments
Thank you very much and your explanation is very clear!!
Thank you for this easy to follow tutorial. I totally just primped my blog with some beautiful turquoise social media buttons!
I just used many of your tips to make my blog prettier. It’s still a work in progress (need to adjust the header slightly, among other things) but thank you so much for all these helpful (and clearly written) tips!
Bonnie recently posted..“Where are you from?”
Would you mind letting us know how to center the icons? I’m trying to add them to a Wordpress widget, which your tutorial really helped me to do. But now I need to center them, and can’t seem to find the answer. Thank you for posting the code, it was really helpful!
Hey this by far been the easiest way to add badges to my blog…I am following you right now
Thank you so much for this, I was quite confused, I really appreciate your post!!
Hailley Griffis recently posted..The ABCs of Communication
Ah! Thank you SO much!! This was so helpful!
I added your button to my blog
Thank you so much! I have been wanting to add social media buttons. But I do have an issue… I followed your exact instruction and I see my buttons and they work, but right next to the picture you see- “> What is this and how do I get rid of it? I tried editing the code, thinking maybe I had something in there that shouldnt be. But each time I try to edit it then it no longer works. Hope you can help.
Thanks for the tutorial! I applied it to my blog and I am happy to make a link back here in my post. Thanks again! =)
Kristine G. recently posted..Blogging: Adding Social Media Icons
Thank you SOOO MUCH for this. It was doing my head in!!!
← Previous Comments
{ 17 trackbacks }