Today’s quick tip is a common detail most blogs contain, but require the tiniest bit of html familiarity to execute. Don’t panic though- this is an easy process but many new bloggers can become intimidated by the terminology!
Since social networking is crucial to blogging success, having prominent social media icons on your blog is an easy way to make yourself accessible. In addition, many bloggers like to share buttons or smaller logos of other sites. Here are three easy steps to add custom icons or buttons to your site.
1. Find or create the icons for your blog. You can do a google search for social icons, which will return sites like The Best Social Media Icons All in One Place or 44 Must Have Free Social Media Icon Packs. If you are the more creative type, you can create your own in Photoshop (ideal size varies based on a site, but 60px x 60px is a good size to start). For tutorials on creating your own icons, check out this list of 20 social media icon tutorials to help you along.
2. Upload your images. Icons can be uploaded directly to your blog or you can use a photo site like flickr or photobucket. Whichever you use, you will need the link to the image.
3. Add in your html code. Do not be intimidated by the words “html code”. This is much easier than it sounds! Once you have your images uploaded, you need to add the following into your html widget area in Blogger or in a text widget in WordPress:
<a href=”http://www.linkgoeshere.com” target=”_blank”><img src=”http://www.imageurlhere.com”></a>
That’s it! You can insert any image using this method and link the images to the appropriate link. So if you are adding in a Twitter icon, you would use the following snippet:
<a href=”http://twitter.com/TwitterName”><img src=”http://www.imageurl.com”></a>
This will have the Twitter icon link to your Twitter profile. Click the Twitter icon in the Business 2 Blogger header above to see exactly how it works- and be sure to give us a follow if you are not already!
What questions do you have for Quick Tip Monday? Leave us a comment and we will work to get them answered!
About Ashley
Where is the best place to put the icons on a blog? Under every post? In the side bar? This is where I struggle!
Is there any way in Blogger to easily embed them in the header or immediately beneath the header rather than the sidebars?
Hi Andrea! If you want to have share buttons, it’s a great idea to have them at the end of each posts. I will write a post about this soon, including options for both Blogger and WordPress. The ones in each post are for people to share content with their networks- the images in your sidebar are for people to follow you. Does that help at all? If you have more questions, I’d love to hear them and I’ll include them in the post!
Actually Ann, there is! If you go and put the code into an html/javascript gadget in your blogger dashboard–design–page elements, you can drag the bar to directly underneath your header.
They can also be included in your header, but that would require a bit more coding knowledge, or at least the use of image-maps. I will write up a tutorial on how to do this soon!
I’ve always wondered how people got their cute share buttons. You’re so smart.
I love this post! Thank you thank you thank you!! I’ve just finished putting up three of the gorgeous icons by Janko that were linked in the link you put up Much happiness here.
I cant figure this out!!! I think I am dumb or something please help me.