Wednesday, October 12, 2011

Revamping My Blogger Template

I'm getting a little frustrated trying to widen the the main body of my blog template.

There's too much wasted black wooden panel space that could be utilised well.

[click to enlarge]

I'm thinking of widening the white main body like this:

[click to enlarge]

I'm able to widen it but the following problem would occur:

[click to enlarge]

The flower motif header is fixed at that width and whether widening it or increasing it in proportion would result in the problems mentioned in the image above.

Furthermore, the pink bar with tabs has to fit the main body's width too.

Also, I'm trying to increase the distance between each widget on the sidebar.

[click to enlarge]

I find that everything at the side looks kinda squeezed and not very pleasing to the eye. It is not about including too many widgets at my side bar as I've seen so many blogs with spacious and clean sidebar even though they've got many widgets there.

If any of you know how to solve these, kindly leave me a comment. I would really appreciate your help.

On a separate note, did anyone see the Google animation on its home page? I like it when Google does such stuff. No, you won't hear such cute music on The music and information in the video was added by the person who uploaded the video.


  1. Hi Jo :-)

    Thank you for your sweet comment on my blog! Only since I started taking pics of my nails, they look like this. I used to be a cuticle biter *ugh* & painting my nails is the only way to avoid getting caught in this habit again.

    *hehe* I'm glad I'm not the only one having problems with my blogger template. I'd love to widen mine, too, but it seems to be impossible if I want to keep my layout. Furthermore, the gaps between paragraphs are way too wide, but I can't semm to fix it. While I'm typing my posts, everything looks totally fine, but as soon as I publish the post, the gaps become three times wider! So annoying as it looks messy & ugly *sigh*

    Your sidebar doesn't look squeezed at all! It looks perfectly fine, for real :-)

    Yess, I saw the animation on the Google HP & I think it's uber cute. It made me smile :-)


  2. What blogger template are you having now Jo? I only know how to tweak in a classic template. If you use something else, I can probably figure it out but will take longer.

    Oh no no, I didn't have such talents to whip up such gourmet meals like that (heck I wish I could!). We went to a restaurant that make all the sauce themselves abd that is what I mean by "in-house".

    I enjoy reading word verification as well, kinda annoying but sometimes it cracks me up with funny words.

  3. I dont know if im much of help, but when I did my blogger layout I actually took a template from somewhere I found and alter the html a bit and added a header. Im not sure how much time you have but maybe that's an option?

  4. hie cuz! try finding in your template this code (most likely in the style css if there is such a file):

    .sidebar h2 {
    padding: 1em 0 0 0;
    font-size: 1.1em;

    and edit the margin property to something like this:

    margin: 30px 0px;

    and see if it works?

  5. Hi Jo!

    Oh gosh, it is just so frustrating to fix the width of my blogger template as well. Just like you, I have unused space on the left side of my blog page and no matter how I tweak it, it seems like I've utilized the maximum threshold of my template's width on the left. So I have dead space on the left corner, but I have plenty of room on the right, and this does not appeal to me, maybe since I'm a leftie that's why lol. But exasperation has got the best of me, so I don't even bother trying to fix that anymore.

    And ahh yes, the current Google animation is just so adorable. Google is my preset homepage and this sounds silly but it really delights me whenever Google incorporates animation to their home page. It's a refreshing break from the boring plain text that greets me whenever I launch my browser lol.


    A Single Girl's Musings

  6. UGH, I have these same problems TOO...I totally want wider and also larger images...
    I have been toying with the idea of having someone who does graphic design play around with my blog and make it look a little wider/cleaner looking.
    I WISH I had the time to play around but between work and toddler, it ain't happening..This blogger is turnging to the professionals, lol.

  7. Tabatha,
    It’s lovely to hear from you again. You really bite your cuticles? I used to bite my nails when I was younger till my teeth were too weak. I also love biting the excess skin at the tip of the nail *urg too* and I thought it was quite fun to do that. I guess painting really helps!

    I went to click onto your blog again coz I don’t remember the gaps between the paragraphs being big. Do you use the “edit html” or “compose” mode to type your post? You could try the html format to see if there’s any code causing the space? I don’t think the wide spacing between each paragraph is messy and ugly coz it looks spacious but I get how you feel.

    At the point of your comment, I haven’t done anything to the sidebar but now I’ve done something and now each section looks spaced apart from the next.


    I could tell you know how to tweak your blog template from the neat layout of your blog. Thank you for offering. My dear cousin has helped me with the sidebar. Does it look neater now? Hehe... I’ll make do with the main body’s width as I got tired of trying. I even went into each image url to save as an image and resize but to no avail.

    Haha... Still, you managed to whip up the rest other than the sauce and it’s really a mean feat! Now I’m hungry and I don’t want to go to your blog and torture myself.

    Let me know if you come across any funny word verification on my blog. It’s annoying to type in initially but I always tell myself it prevents spam. Plus, I’ve since learnt to enjoy the process which probably explains how my little fetish of laughing at funny word verification come about.


    I spent the 2.5 episodes of CSI to dabble around with the html code. Fortunately I’ve got my dear cousin to help me with the coding for the margin of the siderbar! How I wish I’m versed with html coding!


    Cuzzie! Thank you so much! You’re the genius and thanx for taking the time to explain over sms and even showing me how something you type in css would look like on screen. I know it’s tough but sleep early!

  8. Wi,
    I can’t remember how your layout look coz I know it’s not something that is really an eyesore since I didn’t notice it. I just took a look at your blog and realise what you mean! It’s about the margin of the sidebar I think. Look at my cousin’s (Nadine) comment, instead of editing the margin to what she typed above, try this:
    margin: 30px 5px 5px 0px

    Each px stands for top, right, bottom, left respectively. So for mine, the 30px means the space above the title hence I’ve got more space between each section of sidebar content for my blog. She taught me that and it’s so much easier to understand and know which number to change. So for yours, you can check the value of your left and right to see if it’s too big or too small? I’m not sure if yours works the same way too.

    Google used to be my homepage till I saw how knowledgeable my sister is about current affairs and gossips. She was the first one to inform me about the death of Michael Jackson, Heath Ledger and Amy Winehouse and I asked how how she knew it before everyone else so she told me to make yahoo my homepage as that’s where she get all the latest updates. It’s not silly coz if you’re silly, I’ll be glad to be silly just like you. I really love to look at these animations too. I heard from my friend, who knows someone working in Google that these animations are created by just one individual! I would so love to meet this talented individual!


    Dunia kecil indi,
    Haha seems like many people are trying to widen the width of their blog’s main body too.
    PS: I tried visiting your blog to leave a comment but I didn’t understand the language. I think it should be Malay or Bahasa?



    Thank you for stopping by my blog and leaving a nice little comment. =D I think your main body’s width and images are large and wide enough. They’re the size I usually aim to have alas for my main body text width. There would be times when I also wonder if I can get some professional help but thought it was silly on my part to do so for a personal non-profit making blog.

  9. I see many people have already offered to help you. That's good ^^

    The sidebar thing seems to be fixed, and as for the image behind your blog's title, I think you could widen it, uhm, but what I'm going to suggest will be the Bibi-way. So hold on tight, haha!

    I guess I'd open the original image in Photoshop, and insert extra space in the 'blank' zones. Don't know if it's clear what I say. For example, go from II-I-III-I-II (I being flowers and - begin 'blank' space) to II--I--III--I--II
    But I don't know if you'd like that, or how far your photo-editing skills go (methinks pretty far, or definitely far enough).

    So yeah... that's the Bibi-way. You could of course start over with a completely new header too. Maybe that would be less complicated :P I wouldn't mind doing it for you, if you'd like, if only so you could see what I mean. You can still decide after :)

  10. Bibi,

    I totally understand your Bibi clear instructions. A pity I'm a PS (Photoshop) noob and do not have the program. I edit my photos with another PS (Photoscape). That one is really good for PS-idiots like me.

    You are sooooooooooooooooooo NICE to offer to help me with the flower motif! I have half the mind to say ok but I don't wish for you to waste your precious time on this.

    You know why? I tried editing the width in Photoscape by increasing the width to 932 pixel. My current blog main body width is 832. So after I changed the main body width to 932 and changed the url of the image which is now also at width 932 in the css, the flower motif appeared even smaller than the original. I'm not quite sure why. Imagine if you were to spend so much time helping me to increase the flower motif bit by bit and yet it did not work, I would most certainly feel bad.

  11. Jo, it really doesn't take that long, I think. The only thing I'd need is the original picture, and how wide you'd like it to be (932px, apparently)
    It's no bother at all. I've got six hours free time between classes tomorrow and I'm going to be bored more than ever before.

  12. Bibi,

    6 hours??? Back when I was in Uni, I could not survive a 4-hour break in between lessons. If you really need something to kill time, I'll be more than honoured to have your assistance while you kill time.

    I'm trying to figure out how to send file to you and then I realised you could do the same way I did. I'll paste all the image url link here and you'll right click save from there.

    The header flower motif:

    Part of flower motif that hangs below the pink bar:

    I'm not sure if you need this...
    comments wrapper:

    Not too sure what other info you need.

    Do you know how to read css? I'm not unsure if my width of 832px is the whole white body inclusive of sidebar or just the main body where the post is. I tried an online converter to convert 832 pixel but the measurement in cm seems to be way off as compared to when I physically measured both the width. There isn't any other value in my whole css template that would indicate the width except for this.

    Lastly, thank you so much! I would be turning in soon. It's almost 6am here so I won't be replying in the next few hours.

  13. Hey Jo! I never work with CSS, I change everything in the HTML template (makes me feel professional, cough, even though it just shows that I don't really know much about it, doing things the hard way) So I can only tell you how to change widths in your HTML. Here goes.

    Go to your blog's template > Edit HTML and click Expand Widget Templates. Save your template on your computer before typing anything! Just copy paste it all into Notepad or Word or whatever.

    Then search for the following:
    name='content.width' type='length' value='[...]px'/>
    Change the [...] (= the width of your entire blog, the complete white zone, incl. sidebar) to whatever you want it to be.

    For the sidebar, look for:
    name='main.column.right.width' type='length' value='[...]px'/>
    Here too, change the [...] to however wide you'd like your sidebar to be.

    That's that for making your blog wider. Should work (normally) If it doesn't work, get back to me.

    Check in preview, and if you like it, click Save template.

    I'll look at the pictures tomorrow :) is a bit late now. Yes, 6 hours -__- First class is early in the morning, and my second one late at night. Oh joy!

  14. Bibi,

    I thought working with the "Edit HTML" is the same as working with CSS? Correct me if I'm wrong.

    Yup I know how to change the width just that I wasn't sure if 832 was the main white portion width or the width of where the post is minus the sidebar. From what you say, I think I know that 832 is the whole width then! And yes, I didn't expand the widget template. Now I can see more values like 605 which I think is the width of the post! Thanx!

    Good nite! It's 6:30am here but as long as I haven't sleep, I would say goodnight. Must be evening or night over at your side now eh?

  15. Oh, and if you'd be so kind to let me know how many px you'd make the main blogging area (=white area minus the sidebar). Is for the comment background and the little flower detail below the header :)

  16. I'll add 100 for all. I'm not sure if the proportion works this way though.

    Little flower detail would be 705.

    The comment is smaller. Its new value would be 660 (assuming proportion works and I just add 100 to it.)

    Thank u again! =)

  17. Following the widths you sent me:

    Comments background:

    Flower detail:

    Header background:

    These are saved on my Picasa Webalbums for now, but I'll be deleting them once I'm sure you saved them to your computer :)

  18. Thanx a whole lot, Bibi! I got them all saved! I hope it provided time for you to kill during the 6 hours break! It's really nice of you to offer your help so readily. I owe you one! Next time if you need help in anything which I could help, I would.

    PS: I nearly wanted to call you "Bibster" ala "Biebster". Lol... But I guess if you're one of those Justin Bieber haters, you would so kill me.

  19. HAHA This is awesome fun and claymation (animation w/clay)! Love what Google comes up with! :D

  20. I like your new layout Jo! It's very soft, warm and comforting. ((HUG))

  21. Kim,
    I really love to look at these animations that Google comes up with too. I heard from my friend, who knows someone working in Google that these animations are created by just one individual! I would so love to meet this talented individual!

    My change in my layout is only the spacing of the sidebar currently but I'm glad you like it.


I love reading sincere comments and hearing your voice. While blatant self promotion of blogs and follow for follow requests are not advisable, I would love if you leave a mark here with a trackback link so that I could connect with you. I reply to comments here or on your blog so don't forget to check back on replies! =)


Related Posts Plugin for WordPress, Blogger...