SUBSCRIBE TO GET FREE UPDATES
RSSRSSEmailEmail
       "Keep learning ~~ keep smiling ~~ keep sharing"     

Thursday, July 8, 2010

My designer blog with the new Blogger Template Designer!

Yippee...just created my very own designer blog! One full day of exciting fun playing around with the new Blogger Template Designer that was finally made available to everyone since a month ago! Just can't resist taking up Blogger's challenge to make a complete transformation from my previous 3-column Layout Template and move forward with the current trendy styles and happenings!

Screen shots of two different blog design: the top, using the Blogger Template Designer and the bottom, the Layout Template
The new template designer blog above and the old layout template below

The new Template Designer has such an extensive array of beautifully designed Templates, with mix and match Background images to 'whet your appetite' and stimulate your creative juices. Create your dream online home and express them in your blog with the various Layout options, from one to three columns, then customize and colour it to your heart's content with the Advanced tools for fonts, links, tabs, gadgets and so forth, which replaces the previous 'Font and Colour' feature at Layout. Simply awesome!

Learn how to design and personalize your blog from Blogger Help and watch its introduction at YouTube. Nonetheless, take note that if you choose to apply it to your current blog, all of your customization existing now will be erased though your gadgets are retained. So, be sure to first save the current template by going to Design | Edit HTML, and Download Full Template.

Though fully aware that all the customization done in my previous template will go up in smoke, I applied the new Template Designer to this blog, regardless. And consequently, followed with another 1½ days of cracking my dummy non-technical head to tidy up the loose ends where all the gadgets and others were in disarray! I'm glad that I've shared some HTML/CSS tutorials in this blog and by referring to my resources here, as well as making comparisons between the new and old templates, I've finally got my dream house in order!

Hehe...what do you think, cool and chic, right? I've chosen the template from Awesome Inc. and match with image A330Pilot (textures) for its background. Thought it conducive to have a soothing ambience for visiting readers who arrived here for a learning experience and not be distracted with glaring background images.

Here are a few tips and tricks that I've successfully experimented in the process of learning how to customize the template for my newly designed blog, to look as I desire after applying the Blogger Template Designer. I'm by no means an expert, but learning the hard way and sharing here just in case other bloggers may encounter quite similar problems and searching for solutions. Changes below were specifically made to suit my taste but you can adapt accordingly to your blog. At least you have some clues and ideas here to guide you now, I hope.

Screen shot of newly designed header with Blogger Template Designer

You need to edit your blog's template by going to Design | Edit HTML to make the necessary customization, remembering first to save your current template.
Alternatively, if you're familiar with CSS (cascading style sheets), you can add custom CSS codes to your template by going to Design | Template Designer | Advanced | Add CSS. Learn more at Blogger Help.

A. Header
  1. How to center-align text for blog title/description:
    Find the following code:
    /* Header
    ----------------------------------------------- */
    .header-outer {
    margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
    background: $(header.background.color) $(header.background.gradient)
    repeat scroll 0 0;
    }


    Replace with:
    /* Header
    ----------------------------------------------- */
    .header-outer {
    margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
    background: $(header.background.color) $(header.background.gradient)
    repeat scroll 0 0;
    text-align: center;
    }


  2. How to change the font family/style/size for blog title:
    Find the following code:
    .Header h1 {
      font: $(header.font);
      color: $(header.text.color);
      text-shadow: 0 0 $(title.shadow.spread) #000000;
    }


    Replace with:
    .Header h1 {
      text-transform:uppercase;
      letter-spacing:.1em;
      font-family:"Lucida Handwriting", cursive;
      font-size:250%;

      color: $(header.text.color);
      text-shadow: 0 0 $(title.shadow.spread) #000000;
    }


  3. How to change the font family and style for blog description:
    Find the following code:
    .Header .description {
      font: $(description.font);
      color: $(description.text.color);
    }


    Replace with:
    .Header .description {
      text-transform:capitalize;
      font-family:"Lucida Handwriting"
    , cursive;
      color: $(description.text.color);
    }

B. Page List (Tabs)
  1. How to change the font for tabs:
    Find the following code:
    font: $(tabs.font);
    color: $(tabs.text.color);


    Replace with:
    font-family:"Lucida Handwriting", cursive;
    color: $(tabs.text.color);
C. Blog Post
  1. How to remove border and shadow from images in post:
    Find the following code:
    .post-body img {
      padding: 8px;
      background: $(image.background.color);
      border: 1px solid $(image.border.color);

      -moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
      -webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
      box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);


    Replace with:
    .post-body img {
      padding: 0px;
      background: transparent;
      border: none;

      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;


  2. How to change/reduce the font size in post footer:
    Find the following code:
    .post-footer {
      margin: 1.5em 0 0;
    }


    Replace with:
    .post-footer {
      margin: 1.5em 0 0;
      font-size:85%;
    }

D. Footer
  1. How to center-align text and change/reduce the font size:
    Find the following code:
    .footer-outer {
      margin: -$(shadow.spread) 0 -1px;
      padding: $(shadow.spread) 0 0;
      color: $(footer.text.color);
      overflow: hidden;
    }


    Replace with:
    .footer-outer {
      margin: -$(shadow.spread) 0 -1px;
      padding: $(shadow.spread) 0 0;
      text-align: center;
      font-size:90%;

      color: $(footer.text.color);
      overflow: hidden;
    }


  2. How to change/reduce the space height between widgets (gadgets) :
    Though Blogger applies a 30px top and bottom margin on all widgets, you can override that. Go to Design | Template Designer | Advanced | Add CSS and enter this code, where the 15px value stated below can be changed as you like:

    .widget {margin:15px 0;}
    (Thanks to GreenLava for responding to my question at Blogger Help Forum. I noticed that this code above only reduces or shorten the height between those gadgets below the header, blog post and footer sections, but not those at the sidebars. For specific widgets at footer, the code is as below and for those at the sidebars, refer to sub-item F. 3. below).

    Nevertheless, I wanted the distance in height between specific widgets at the footer (the last 3 bottom-most horizontal ones) be reduced further. Googling for answers led me to clues by spavel, found here, and the following CSS were added that finally presented the gadgets as I wish:

    #HTML3,#HTML4,#Attribution1 {margin:2px;}

    (Tip: To identify your gadget or widget names, go to Design | Page Elements, and mouse over the gadget's Edit link. The widgetId can be read on the browser's status bar. Example widgetId=HTML3 will be referred to #HTML3 in the CSS. You can group the gadget # [each gadget is followed by a comma, except for the last one] like I did above or make a style for each gadget.)
E. Gadget below blog's header
  1. How to center-align the widget (eg. adsense widget):
    Find the following code:
    <div class='region-inner tabs-inner'>

    Replace with:
    <div class='region-inner tabs-inner' style="text-align: center;">
F. Sidebar
  1. How to change the top margin for the topmost widget:
    (so that it is lower than the post date on its left)
    Find the following code:
    <Variable name="widget.outer.margin.top" description="Widget Top Margin" type="length" default="0" value="-3.3em"/>

    Replace with:
    <Variable name="widget.outer.margin.top" description="Widget Top Margin" type="length" default="0" value="0em"/>

  2. How to restyle/transform widget title to 'uppercase' at the sidebar:
    Go to Design | Template Designer | Advanced | Add CSS and enter this code:

    .sidebar .widget h2 {text-transform:uppercase;}

  3. How to change/reduce the space height between gadgets at the sidebar:
    Go to Design | Template Designer | Advanced | Add CSS and enter this code, where the 0px value stated below can be changed as you like:

    .sidebar .widget {padding-bottom:0px;}
Some other things were found missing too:
This post is also intended to keep a record of all the customization done for this blog. Should Blogger ever decide to introduce another 'awesome bomb' that affects the template in future, then at least I'm not caught with my pants down, so to speak! This was indeed a steep learning curve for me.

Other helpful links:
Keep learning~~keep smiling~~keep sharing!!

Update: September 28 2010
Do hop over to my other tutorial, "Add CSS in the Template Designer to restyle your blog's appearance" which is a quicker and easier alternative!

Future template customization and CSS addition to this blog, if any, will also be updated and included here from time to time!

New additions:

12 comments:

  1. Wow, so cool and soothing, perfect for this blog! Good job!

    ReplyDelete
  2. Thanks, my dear! Wouldn't you like to design anew your blog too? Probably, play around when you're free and do not click the orange button, Apply To Blog, unless you're ready to accept the transformation! Revert to me if you need help!

    ReplyDelete
  3. hi mam, in your blog's bottom there is link to home, about, sitemap after copywrite message. i request you to publish a post to create as like it...

    ReplyDelete
  4. Hi Thandapayal,

    Sharing briefly below how it can be done:
    First you need to create a copyright gadget for your footer. Then, besides the copyright message, just continue to add the URL of your blog's Pages as links.

    Check out my related tutorials here as a guide:
    1. How to add a copyright notice.
    2. How to create a link.

    ReplyDelete
  5. thanks...



    hi, i need a help from you. if you know the solution help me.

    i want to display the number of the post before each and every post title in blogger. That is, suppose I have posts starting from A like A,B,C,D etc...i want to display number 1 before the post title A, number 2 before the post title B, number 3 before the post title C and so on...if u know the solution email me please...help me...

    if you know publish a post for this...

    ReplyDelete
  6. The only way that I can think of is just edit each post already published and type in the number you want at the Title field, before your post title.

    ReplyDelete
  7. Thanks for the HTML help there. I was confused earlier as to how to center the blog's title and description :)

    Thanks a lot!

    N

    ReplyDelete
  8. You're most welcome, Nothingman! Great to know that the tutorial had helped you. :)

    ReplyDelete
  9. Hi
    First of all, great job man. Thanks.
    I had a query.
    How do I change the colour of each letter of my blog title. Like in google.
    For ex, if my blog title is ABCD, then how would i make A-blue, B-green , C-red , D-Yellow
    Thanks.

    ReplyDelete
  10. You're welcome, Rahul though I'm sorry to say that I've no idea at all how to differently color each alphabet of the blog's title!

    ReplyDelete
  11. AWESOME .. I've been working on centering my header for DAYS!!! This fixed it!! Thanks a bunch
    www.aidahphotography.com

    ReplyDelete
  12. My pleasure, Samantha! So happy for you.

    ReplyDelete

Welcome! Kindly leave your comments which are very much appreciated with a thankful heart.

Custom Search