Sunday, 31 January 2010

Sidebar gadgets (widgets) in separate boxes

[prva.gif] DESIGN ► EDIT HTML ► find this part:

.sidebar .widget, .main .widget {
border:2px solid #681f10;
margin:0 0 1.5em;
padding:5px 7px 5px 7px;
} have to split those two widgets (read the tat carefully), so they'll look like this:

.sidebar .widget {
border:2px solid #681f10;
margin:0 0 1.5em;
padding:5px 7px 5px 7px;

.main .widget {
margin:0 0 1.5em;
padding:5px 7px 5px 7px;


Credits. pocket

How to create a 3 column blogger template

The Minima template is the easiest Blogger template to customise, as this is the simplest two column template, and has few parameters regarding margins, padding and the like. Once you have developed the third column, it will then be easier to alter font-size, colours and such so leave this until later on. We're going to concentrate on the actual layout first.

First of all, set your template to Minima (not the stretch template, but any colour will do!) then follow these instructions:
  1. Go to Template>Edit HTML, leaving the "Expand widget templates" box unchecked.
  2. Now, find this section in the HTML code:

    #sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
    Copy this entire section, and paste it directly below. We're going to change the elements I've highlighted in red to the following:

    #left-sidebar-wrapper (this makes the css for this section unique) float: left (this will make the new sidebar float to the left of the main column)
    This will provide the styling for the new sidebar element which we will create next.
  3. Now, you need to find this section further down the page:

    <div id='main-wrapper'>
      Immedietly before this section, you should paste the following piece of code:

    <div id='left-sidebar-wrapper'><b:section class='sidebar' id='left-sidebar' preferred='yes'/>
    Let me explain the elements of this code to help you understand what we've just done:

    •  This tells the browser the class of the sidebar element and all other elements (widgets) which may be included in this section. The ID of this element must be "left-sidebar" in order to make it unique, otherwie this would cause problems when viewing. It is preferred so that it will feature in the layout, even if no widgets are placed within it.

  • If you preview your template, you will notice that the right sidebar will be beneath the main section at the moment. This is because the outer-wrapper is still only wide enough to accomodate one sidebar. So now we need to expand the oputer wrapper to accomodate this new sidebar. Find this section in the HTML code:

    /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width:660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }
    We need to increase the width of the wrapper by the width of the left-sidebar-wrapper, in this case 220px. So, change the value in red to 880px.

  • You may also want to change the width of the header-wrapper to 880px so that it spans the new width of your blog:

    #header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }
  • At this point, you should save your template. At present, your new sidebar will not be seen as there are no widgets contained within it, though it will still be present in the markup of the page. Once you have saved your template, go to Template>Page elements in your Blogger dashboard.
  • Your layouts section should now look something like this:
  • You can now add a page element (or two) to your new left sidebar.
  • But we aren't quite finished yet! If you add anything to this left sidebar, you will probably notice that it jams right up to the main section, like this:This is because there is no space defined between the left-sidebar and the main section. We need to create this space in the template's HTML. To do this, we will add a margin to the left hand side of the main posts section. Find the following code in your template's HTML and add the code defined in red:

    #main-wrapper { width: 410px; float: left; margin-left: 20px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
    This defines a margin space of 20px between the left-sidebar and the main column. You should also ensure you adjust thw width of the outer-wrapper from 880px to 900px to ensure the width of your blog is enough to accomodate this margin too. Either that, or you could reduce the width of your main column/a sidebar by 20px to serve the same purpose. Now, your previewed template should look more like this:
  • Finally, save your template and enjoy your new sidebar!
    1. The same principles described here can help you create a three column template from any Blogger template, though you may find that you'll need to adjust the width, margins and padding for your new sidebar in order for it to look the way you would like.
      Also, you can configure your new sidebar to float to the right, and have two sidebars on the right of the main column if you prefer. Simply set the CSS of your new sidebar to float: right; instead.
      Here is a download of the three column Minima template for reference (or if you prefer to use a preconfigured template instead!):
      For more Blogger templates to download, please have a look through the Templates section here at Blogger Buster.

      Saturday, 30 January 2010

      How to have a rainbow HOVER

      From: BIBI. :D
      Firstly go to dashboard  design  edit html

      Find this following code.
      *Press ctrl+f would be easier.

      Then paste this code.
      It would look like this at the end.
      Click SAVE. and you are DONE! 


      How to change NAVBAR colour

      How to change NAVBAR colour.
      This is the NAVBAR.The one the pointer is pointing at.

      From BLUE.

      To SILVER.

      Lets START.
      Firstly you go to Layout > Page Elements > On the pointer Navbar click EDIT. 

      Then you can choose the matching colour which suits your BLOG!
      and click SAVE and SAVE again.

      If the pictures are too small click on the image it will enlarge.
      I wish this helps. =)


      『#13 逆风18.』

      It's MORNING 
      I LOVE this movie although it's my second time watching it XD
      It's call "under the canopy of love" or "天幕下的戀人"

      I LOVE this song =D
      It's called "活到一百岁"
      for it TOO!
      sang by RYNN LIM 林宇中
      NEW SONG!!

      Haven't seen it yet I have seen Trailer oni >____< 
      I have no Astro here so can't see have to see in youtube.
      I will watch later but I don't know when.
      I still have to do my cross stich  T_T haven't finish I have LOADS to do

      A story told in MYFM. Episode 1 only.
      Not a movie ;D
      so scary and so gan dung. eiiyerrrr.. 

      I like LOVE stories.
      and OHMYGODD~ 


      Do not EVER take a picture like that ▼
      If you are wearing specs/glasses

      PLEASE to GUYS! push it up like THIS ▼
      or like this. ▼ Both will do =) 

      HATE it when they push down their specs and take pictures and then upload it.
      Hmm.. why?
      AHH cos they look like AH GONG (old man)!
      SERIOUSLY get pissed off every time I see a guy who cam whores like THIS. 
      Just giving advice here lalala. 
      by the way no offence to ALL smi guys 
      sam tet guys are FITTER then smi guys XP
      It's true. in my view. AHAHA.

      Love 18.
      AHHHHH So addicted to this show now >____<
      Anybody can give me the link for youtube please ?? 
      I want to watch on youtube >___< 
      currently watching here.
      watching also Hi my sweetheart so NICE!

      anyway BYEEE.

      Friday, 29 January 2010

      『TOP 3』

      TOP 3.
      Favourite drink x)
      (not really) I have no idea what's my top 3. XD
      I just got some random drinks from the house x)

      A&W root beer. =] 

      MILO. >V<

      WATER. =D
      My daily drink x)

      Just a random post again x)
      So lazy to edit pictures >__<
      I LOVE the song in my BLOG!! 
      for it! wahaha!! 
      JJ Lin's *NEW* song!! 
      "However 100 days" or in CHINESE "100 天"

      Thursday, 28 January 2010

      『Sausage rolls』

      Made sausage rolls =]
      quite horrible looking I KNOW!
      Not salty enough for the meat next time make again I have to add some salt =/
      I have to rush these =/ I was running out of time.
      I cook very slow =/
      I used ready made pastry so no need me to make the pastry bit =D
      OHHHHH and I got a MERIT!!
      YAY ME!
      by the way Bryan's blog makes me LMAO!! =P
      Jealous how he can update his blog everyday
      sighhh.. ohh by the way
      I NEED to buy my own LAPTOP!!!!!!!!!!!!!!!!!!!!!!
      Maybe I will get one on the summer holidays
      Maybe going to PC WORLD to buy it I don't know yet.
      muahaha. =D


      Wednesday, 27 January 2010


      Monday =]

      Daddy and mummy bought "yok gon" ^^V
      from Chinese shop while I was in school.
      I ate the most.
      I miss too much of it.
      It's been nearly a year I didn't eat >__<

      YOK GON.
      I don't know how to spell =P

      WOW! This longest I got in the whole packet x)

      Ahhh and went to TESCO to buy ingredients
      for COOKING sausage rolls!
      YUMMY! I just have to wait and make then on FOOD!

      Boots I bought like last year DECEMBER. since I got my shoes on I decided to take pictures x)

      Kinda TALL heels x)
      Kinda difficult to walk at the first time =]
      Now I got used to it =D
      I will post more next time so stay tuned ;D

      Saturday, 23 January 2010


      I played around with makeup. =D
      MASCARA. no eyeliner.
      No7. Mascara.
      I got it from my mum =D
      It's actually quite difficult to put on mascara.



      I wore specs at this shot I don't know why, XD

      Did you readers saw that my eye was one big one small XD
      I put too much mascara on actually
      I was getting some out by swiping it with tissue XD

      Friday, 22 January 2010


      Another day for NON-UNIFORM DAY!
      It's charity for HAITI.
      Okay let's start.
      Done my HAIR!
      A *NEW* look.
      whole OUTFIT.
      take 1.
      take 2.
      One with specs.
      Save the perfect for the LAST.

      Drama was actually FUN XD cos there's no acting just GAMES
      We got a replacement teacher. =D
      Ohh and I get to play the BASS GUITAR! YAY!
      Have to perform like next next week =.=
      We get to practice only 2 lesson.
      OHH NO..
      It's so hard to press fast,hard and accurate on the string

      How I look when I got back from school.
      Hair is ALL messy >____<

      Ahhh I camwhore with my daily or not so daily food. 
      So let's start. 
      NUMBER 1..
      AN APPLE. Healthy.
      NUMBER 2..
      GRAPES. Sweet.
      NUMBER 3..
      Butterkist branded POPCORN. VERY SWEET.

      NUMBER 4..
      Malaysia's "HEONG PANK" I have no idea how to spell it =/
      NUMBER 5.. 
      NUMBER 6..
      I'm addicted to them XDD
      I'm sorting out my PICTURES at the moment so ermm less update my blog
      Less update I mean I maybe won't update a day ;D