web analytics

How to Customize your Sidebar in Blogger ~ Adding Sidebar Title Graphics

Pin on PinterestShare on FacebookTweet about this on TwitterShare on Google+Share on StumbleUpon

 

Well it is about time I give you another episode in my long overdue DIY Blog Design Series isn’t it. I left you all hanging on the horizontal menu bar, but there is so much more you can do.

One question I got often was how to add those customized sidebar titles. Those sidebar buttons really do help to give your blog design a cohesive look, don’t they.

 

Find me copy

Followers copy

 

Well adding them to your blog is really easy. Let me show you how.

There are two ways of doing this, the first one is through Blogger itself.

Those sidebar graphics / buttons / titles are basically just small pictures, you can upload them in your Blogger design dashboard as a picture gadget. Move them above your designated sidebar item. Remove the title from said designated sidebar item. Done.

 

 

Add picture in blogger

 

 

The second way is a bit more complicated. It is the way I did it. I am not even sure if my way actually has any benefits over the easy way, but in the day that is how all the designers told you how to do it, so it must have a function. Maybe it helps load your blog faster, or maybe it is just a matter of retaining control over your own images.

Updated: adding images by using the HTML code gives you more options for customizing, like centering, changing the size, or even changing them later by simply exchanging the URL.

 

Anyway for this method: once you have your side bar picture, you upload it to a photo hosting site. I use Photobucket, it is free until you grow too big and then it is still really cheap. It is also extremely reliable, never had a glitch.

Once I have uploaded my picture there I grab the HTML code of that particular picture.

 

Photobucket HTML code

 

 

It looks like this in my case:

<img src=”http://i562.photobucket.com/albums/ss66/Songbirdisnesting/Blog%20items/Followerscopy.png”>

Now go back to your blogger gadget menu and this time choose Add HTML/JAVA script gadget, paste the code in there. Voila.

OK you say, sounds easy enough, but how do I get images to use as sidebar titles.

Well that is easy too, you either make them or you let somebody else make them.

 

If you make them yourself

  • Look around on your favorite blogs for inspiration on the look of the graphics.
  • Keep them simple, our sidebars are usually cluttered enough as it is.
  • Use a Photo editing program, like Picnik, Picasa or Photoshop (Elements), or a graphics design program like a digital scrapbooking software.
  • Choose the colors and fonts, and graphics that ‘fit’ with your overall blog theme.
  • Start with your longest title first, because that one determines the size of the graphics and fonts you can use.
  • Save it in the correct size, which would be between 10 and 15 pixels smaller than the width of your sidebar.
  • Save it in PNG format, because those are the fastest images to load on your blog and it is the perfect format for graphics.

If you want someone else to make them for you

  • There are plenty of blog designers out there who will gladly design you a set of beautiful sidebar graphics if you pay them.
  • There are also plenty of blog designers who provide you with free graphics that you can use and/or customize yourself. Here are a few examples by designers who offer plenty of freebies.

Pugly Pixel’s Ribbon collection

pugly_satin_ribbons

starsunflowerstudio Sidebar labels

Sidebar buttons

Just Something I made black and white sidebar buttons

Black and White sidebar buttons

  • Google free sidebar titles or sidebar buttons and you’ll find plenty more.

 

Let me know if this was at all helpful to you, if I forgot any steps, if anything is unclear, or if you have any questions about this.

Any other DIY Design questions are welcome too.

I love to hear from you.

 

Pin on PinterestShare on FacebookTweet about this on TwitterShare on Google+Share on StumbleUpon

I'll love you so much if you share...

 

 

Love,

signature

 

If you liked this post, enter your email address to receive all my future posts in your email inbox:

Comments

  1. I have been trying to cutomize my top menu bar. I have the tabs there, they just look rinki dink. I just went to your tut on how to do it. So psyched! I pinned the article!! Yeah! Thanks!

  2. Cozy Little House says:

    I love these, Marianne! Some of us folk are not as technically-savvy as you are.
    Brenda

  3. marty (A Stroll Thru Life) says:

    YOur tutorials are so interesting. Thanks so much for doing them. I really do appreciate it. Hugs, marty

  4. Thanks for posting this tutorial! I don't have enough time during the week to read it all, but it will be on my to-do for Friday. I do want to make my blog more interesting!
    Cheers, Siggie

  5. Anita @ GoingALittleCoastal says:

    You did a great job explaining it Marianne. It's about time for me to do a little revamp!

  6. Funky Junk Interiors says:

    Well done!

    It's also important to know, how you save your picture you have will determine how large it is. Know your sidebar width and play.

    An html benefit is better control of your photo size AND centering capabilities. I often upload the photo online, then install the html code on my blog, THEN tweak the size online. This translates back to your blog so you don't have to keep redoing the code on the blog itself.

    Centering is a big deal too. If you don't properly size a picture on blogger, it'll justify itself naturally to the left. Using the html route, no issues. Put centering codes around your html and it's perfect.

    ( < center > your html here < center /> – just don't use any spaces like I have shown

    Donna

  7. Alisa Noble says:

    You are a wealth of information, Marianne!

  8. I think the 2nd option you gave may be exactly what i was looking for. I initially used the picture gadget but the problem there were they were spaced out too far apart, i’m going to give the html code a shot and see if that fixes that problem. thx!

    • Marianne@Songbird says:

      Yes, that’s right. The HTML option lets you center them wich usually looks better. Glad my post was of help.

  9. Do you know if we can add a placeholder for an image on the sidebar such that we can choose the image to display per blog entry? I’d basically like to choose content to go on the right side that may be different for various posts.

    • Marianne@Songbird says:

      I am sorry, I’d love to help but I have no idea what you mean. Do you have some sort of example of what you would like to do? And are you talking Blogger or WordPress?

  10. Thank you so very much for posting all of these tutorials. I am a new blogger still and I am trying to learn all the how tos Still. After weeks of frustrating fails of trying to figure out by searching for everything I feel I have a chance now. Thanks again.

  11. Michelle Curry says:

    Ok I have installed the sidebar buttons…but I am having a few issues. For instance showing my followers…I put the followers button on the sidebar….but how do I actually get the followers to show up under my custom button? I also need to center them and I am not sure how to go about that. Same with the archives.

  12. I tried both ways and getting the code from photobucket worked great for me. When I used the picture it had an outline but when I used the code the outline was gone. Hope that makes sense. Love it! Thanks so much!!!!

Speak Your Mind

*