Making Blogger pretty: adding social media icons (and other tricks)

chulabird pattern

{background pattern Autumn Swirl by Chulabird, here}

 

If you have any kind of a blog that is connected to your business in some way, you absolutely need to include links to your social media accounts. Using social media icons is the most popular and the most obvious way to do this. It’s best if they’re somewhere towards the top of your blog page – whether they’re above your header or below, or over on your sidebar is really up to you and how you want your blog to look.

If you want to add in some buttons for your social media, you’ll first have to have some appropriate icon images for the social media you need – either purchase some, or make them yourself.

There are lots of free ones – just google “free social media icons” and look through the images until you find some you like (always check the licence conditions!) – and you can always alter colours and other effects. Of course you can always create your own too.

OR, here I’ve included a zip file of the 5 most popular icons – Google+, Pinterest, Facebook, Twitter, Instagram – as .png files. They’re black  on transparent backgrounds, but you can easily change the colour using Photoshop or Picmonkey. They’re all 64 pixels square – a bit larger means they’re easier to work with if you intend changing colours etc, but I would recommend you resize them to something a bit smaller if you’re putting them on your blog – somewhere between 30 – 50 pixels wide is good.

 

the lot

Download the icons here.

 

There are a couple of reasons I prefer to use .png files rather than .jpegs. Although .jpg files are compressed so that they’re quicker to load, the compression also means that they lose clarity, and sometimes they can end up looking quite blurry. Another reason for a transparent background is that if your blog has a coloured background, your icons can sit there happily without an ugly white square around them.

OK. So now those images need to be hosted somewhere (i.e. they need a URL where Blogger can find them), and if you’ve bought some webhosting, there’s no problem – just load up the files. But if you don’t have your own webhosting,  I found a great work-around tutorial on YouTube showing you how to add them directly to Blogger so you can use them on your site. (The full video is here).

In the video, Emily of BlogaholicDesigns.etsy.com suggests simply creating a new post, which is named something to remind you that it is not public, such as “DO NOT PUBLISH OR DELETE”. In that post, click on the HTML tab (circled in red below), as this gives you control over the spacing of the images. Then load up your images, by clicking on the picture icon (also circled in red). Then click on Compose, so that you can align the images (probably centred is best).

Save it (don’t Publish!). Click back into HTML, then copy the code that appears – it should look a bit like the image below. Highlight all that code to select it, and then Ctrl C to copy it onto your clipboard.

 

how to blogger - sm icons

 

Next, close that window so that you’re back on the main Dashboard. Go into Layout (circled in red below), and click on any box labelled “Add a gadget” in the area that you want it – usually best at the top of the sidebar, or above your menu.

 

how to blogger - sm icons 2

 

The pop-up window will give you a bunch of different types of ‘gadgets’ you can add in – click on “HTML/Javascript”, and paste all the code into the Content box. Your screen should look a bit like the one below. Save, and you’re done!

 

how to blogger - sm icons 3

 

Happy blogging!

 *

Do you have any burning questions about Blogger? Any specific problems? Anything in particular you’d like to change on your blog but don’t know how? Let me know in the comments, and I’ll find you an answer!!

Or, are you proud of your blog? Share your link, so the world can see 🙂

 

Julie x

 

Getting the right branding for your business is the key to making it memorable.

Yes you can do it. You just need the right tools.

build your brand opt-in magic action box grfxis your high impact, 18-page FREE workbook to building a stand-out brand. PLUS you get regular hits of inspiration and business know-how to keep you going.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>