Change Classic Blogger Template to New Blogger Template (Part 1)

YESH!!!! I've changed my blog template from classic to new blogger template, noticed? Some people have noticed, some.... may not? Hehehe~ It's simple to determine whether it's classic blogger template or new blogger template. How?
-When I look at other people's blog, I'll look at their blog archive, if is in triangle-bulleted drop down list, list box or bulleted points, that will be new blogger template. By default in new blogger template, the blog archive is in triangle-bulleted drop down list like mine.

Yesterday, I have discovered the Blogspot coding in "Edit HTML" under "Layout" tab. It is almost two different pieces of coding for classic and new blogger template. If you already know classic blogger template very well, or you are a fast learner, I guess you won't have much problem in understanding the coding in new blogger. template. For people who are not a fast learner, don't worry~~ I'm gonna share some tutorials here, I'll share the stuff I discovered yesterday in changing my blog to new blogger template.

#01 - Divide template into 3 columns
#02 - Adding ads (Nuffnang and Adsense) between blog posts
#03 - Labels cloud
#04 - Favicon in new blogger template ---->

Divide template into 3 columns
  1. Go to "Edit HTML" under "Layout" tab, look for the text highlighted in pink (refer the image below), it is your sidebar and posts area (note: different blogs may have differ in coding). Let the "Expand Widget Templates" checkbox remain uncheck (pointed in the image below).

  2. Add the green highlighted HTML codes in. It is the coding to make your content arrange in table form. If you don't know about <table>, click here for lessons. I've make a table like the image shown.

  3. Normally templates provided in Blogspot/Blogger have only 2 columns (one sidebar and one main column for posts), to add a sidebar which similar to the existing sidebar, copy the codes of existing sidebar and paste it to the area you want it to appear (make sure you put it correctly). The green highlighted codes are new sidebar, then, followed by the closing of the table after footer (refer the image below). Remember to complete the closing for the table until </table>.

  4. Save the template. Done? Any question please drop me a message in my comment box of this post.


Bradley Jesse Hyunckel said...

renise i need your can i reply those comments???something different pls

♥ Renise said...

what do you mean by how? what comments?

Anonymous said...

roar i got bX-ix986e error ==

♥ Renise said...

shijun, you said "ahem one question... where should the content wrapper be at? i arranged the header,sidebar,main,sidebar1 wrapper. but idk where to put the content lol", means?

the header, sidebar, main, sidebar1, etc should be under <body> tag.
under 'outer-wrapper' if you have.

♥ Renise said...

shijun, about these:

<div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='no'/> </div>i threw dis away edi. hahaha~
it's under 'outer-wrapper', right?
has 'outer-wrapper' is enough already~

i threw away 'header-wrapper' and 'content-wrapper'. xD

Anonymous said...

yep but now i accidentally saved the codes and now my blog wont load forever T.T

♥ Renise said...

hehe. fixed for you, how is it now?

leechon said... template i would say^^

♥ Renise said...

thanks leechon xD

Renise does not warrant for any legal liability or responsibility for accuracy, completeness or usefulness of any information, opinion, comment, product or process published in this blog. External links which link to other Internet sites for the convenience of blog readers, Renise is not responsible for the availability or content of the external sites for its accuracy, completeness or usefulness of the information published. The content in this blog is just for readers to enjoy their free time in reading.

One click a day, please

Interesting Blogs

Awesome Followers

the Fans

Blogger's Badge


blog lovers online ♥