Friday, August 13, 2010

Build & Customize Your Blogger Site Using Template Designer!

Since Blogger has come out with "Blogger in Draft" and their new Blogger Template Designer, I figured it was way past the time when I should update my old "how to build a blog" articles with a new one, focused on the template designer and how to use it. If you haven't yet tried the new blogger template designer and wonder how it works, this post if you.

When you login to your blogger dashboard, you'll see a list of all your blogs under your login.

To get started, I'll use a blog I began only as a sample to give new bloggers a start on setting up a blog. It uses an old template, and today we'll convert it from the old style blogger template to one of the new ones that you can "redesign" in the blogger Template Designer. Oh don't worry - it's really not difficult.

First thing to do is select the blog you want to convert and click the "Design" link for that blog from your dashboard. (If you don't see "Design" in your list, then look for "layout" and click that instead).


When your page loads you'll see your page layouts for your current template. Look at the top and you'll see the link for the template designer. When you click that link you'll get the template designer page, which shows your current blog design in the bottom frame, and the template designer in the top.


If you try to make any changes to an old template, you'll get a notice in the template designer that the changes aren't applicable for this template. Before desiging your own blog layouts in the template designer you need to select one of the new templates.

The old templates no longer have the ability to be changed using blogger - the section where you could change the colours and text style of the background, header text and so on no longer exist for these old templates. If you love your old template, then you can still continue to use it - but you can no longer edit it in blogger, except by using the "Edit HTML" function. If you aren't very good with that, you can download the template from blogger (from the edit html page select "download full template") and save it. You should be able to edit it manually if you know how, or use a software like alley code or nvu to edit the codes.


Okay, lets go back to the template designer. We're going to select one of the new templates so we can make it our own.

When you click one of the template designs in the "Templates" tab it will load the template as a preview, showing you what your blog would look like with the basic template design you clicked on. One thing I've run into only recently is when I want to preview a different design, I sometimes have to click the "live on blog" button before it will reload the blog with the new design. If you click through the templates and find they aren't showing the preview in the bottom frame, click "live on blog", then reselect the template you want to preview.


For now, we're going to stick with the template "Simple" by Josh Peterson. Both Simple and Asesome Inc. by Tina Chen are easy to edit and customize, and I personally tend to use one or the other when editing a blog design. You can select anyone you find suitable. And, of course, there is no reason to edit the design or colours if you LIKE the pre-set template that you select. You can simply leave it as it is and continue blogging with a new design.


If you want to edit the template for your blog, read on. Once you've selected a template, the next step is to edit the background. Click on the background tab in the template designer. Here you'll be presented with a set of colour co-ordinated theme colour choices. If you like any of them, you can select one of those.


 But you aren't limited to these, and can make individual choics in the Advanced tab. Also in this background tab you'll see an area titled "Background Image". Click the little arrow and you'll be presented with some choices for your background image. You can look through all the categories, click on images and see them on the background of your blog.




I generally select the option "no background" because I prefer simplicity on the backgrounds and prefer to let my blog contents be the focus of my pages, but for this sample blog, I'm going to upload one of my own free abstract background textures. To upload your own photo, click the "upload image" button. Images should be a minimum of 1800 X 1600, and can be larger. Click the browse button and find the image on your computer. Select it and wait for blogger to load your image.



If you're happy with your upload (or any image you find in the list) click "done". Once your back in the template designer, you can change the alignment of your image, or select tile or don't tile, or have the image stationery, or scroll with the page.


Because the images are often not as long as a full page, when you select the tiling method you'll see the demarcation line between the bottom of the image and the top were it begins again. The same will happen horizontally if your images aren't large enough. If you can upload a "seamless tile" image for your background, you'll avoid this.


For now, I'll leave my background image this way so we can move on with the design.

The next step is to decide on the layout you want for your main post, widgets and footer. Click the layout tab and you'll see three options to the right - "Body Layout", "Footer Layout" and "Adjust Width". We'll start with Body Layout.


  Looking at the sample layouts you'll note the one that currently on the blog (that one came with the Simple template we selected), and options for changing to a "no sidebar" layout to different layouts for multiple sidebars. On the whole, I prefer a simple layout with one main panel for posting and a right or left sidebar. For this blog, I'll select the fifth option with a center pane for posts and a single sidebar on either side.


When you select one of the layouts, you'll notice that this will show in your blog preview pane with your widgets set into the various spots. You can arrange these widgets when you are back in the blogger design page.


Now, select your footer choices. Click the footer layout tab and choose one of the footer options (single, double or triple footer where you can place gadgets like text or images or whatever else you can get with a gadget).


Next, select the "Adjust width" option. Here you can select the width of your post template area, and the width of the sidebars.Play with those adjustments until you like the layout. Now we're ready to move on to the Advanced Tab.

When you select Advanced you'll see a list of options where you can make changes to your blog design, like the page text, and backgrounds of various sections, you can create "tabs" for your "pages", adjust the text and text colours. Ready?

Okay first section is the page text, but I have a tendency to start with "Backgrounds" because once I've selected background colours for areas, then it's easier to decide what colour text works best. So let's ignore the Page Text for the moment and click on backgrounds. You have three choices - outer background (this is where we uploaded our image, so if you have an image, you'll want to leave that alone). If you didn't set a background image, you select a solid colour background here - white, blue, black - pretty much any colour your heart desires. Only select this if you don't have a background image, or if you have chosen a transparent background image, or if you selected a colour these set and want to change it.


 The main background in this template is set to white, but I've decided to set this to transparent. Not so much because I like it, but I want to show you how to get a transparent background if that's what you want. This works best for fairly plain backgrounds and very simple background images - not so good with the background I've chosen. To get it, select "Main Background" and in the little coloured box next to the current colour choice (white/fffff) select the small arrow and you have the ability to decide on exactly the colour you want with the colour editor, or you can select transparent from the bottom of the colour editor.


Now that I've decided on the background colour (or no colour), I'll go back up to the Page Text and set that. You can choose your font (this is for the main text of the blog), the size, whether it's all bold or all italics, and you can also select the colour. Find something you like and set it. Move on to the Links tab and set your link colours for the link, the visited link and the colour you when you hover over a link.

By now you should be growing familiar with these settings. Along with the ability to choose your exact colour, you can also choose from the list of suggested colours below each option. So go ahead and set your blog title text and colours.

Now we move on to the Tabs Text. The "tabs" are part of the "pages" function on blogger. These tabs appear as a menu, either under your header, or in your sidebar. Depending on the colours you choose, this menu can resemble a simple menu from a website. Select your font and font size, and select the text and text colour. Then move down to the Tabs Background. Here you can decide what colour the menu "buttons" are, and what colour they are when you hover over them.


You may have noticed as we click through the advanced options that there are dotted lines around some sections. These dotted lines outline the area you are selecting options and colours for. Click on the "Post Title" tab and you'll see that the outline only goes around the posting section - because what we are setting options for here is the post title - the font and the font size. Complete the choices for your Post title and post footer sections and then click on the Gadgets tab.

You'll notice all the gadgets these options include will be surrounded with the dotted lines. You can select the title colour for the gadgets.

Almost finished with the layouts - for images, unless you really want some sort of colour in the background and as a border, you can select transparent as the background and border colours, the same way as we chose a transparent background above. Otherwise, set the background and border colours to your taste, as well as the colour used for the image captions.

The last thing we'll do is set the accent colors - the accents are those thin narrow lines that separate your sidebar areas from your post area. You can set these to one of the colours in your blog, or you can make them transparent if you prefer a clean look.

And, unless you are comfortable with CSS changes, for the moment we'll leave the very last section alone. That's where you can your own CSS styles to make your style changes to the CSS.

At this point, you are basically done with your design. You can go back and change anything you like before you apply this design to your blog.


If you're ready, click "apply to blog" in upper right corner of the template designer. In a few seconds you'll see a short notice at the top of the page that your changes have been applied to your blog. Now click "back to blogger" at the upper right.

Anyone who has used an image in their header will probably need to replace the header image because most often the size will be a little different. You upload your new header image the same way you did with the old templates - click the edit link on the header gadget to remove the old image and upload your new one.

Now you've converted your blog to the "blogger in draft" Template Designer templates, but it sure doesn't look like the "Simple Template" we began with - it's entirely your own!

Here's the old blog converted using the Blogger Template Designer (you can visit the page to see it action here on blogger):


Any questions? Post a comment with your question and I'll do my best to answer it.

29 comments:

  1. Hi,

    I am using the template Simple by Josh Peterson, and I would like to change the side columns to a background I have on my computer. To uplode it or change the HTML somehow. I have tried to change the HTML manually, but that didn't work since I couldn't find where to paste the code to make the image show on the blog. I found your blog and this post seemed to be helpful, but I still can't make it work. I can't upload my photo where it says I am suppose to be able to upload it (Background section) And even if I could, would the background just be on the columns or the whole blog (even the middle body)? In the Background section of Template Designer I have no option where I can upload my own image like you show here on your blog. Can you help me? :) What am I doing wrong? :)

    Thea (newb)

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Hi Thea - the background upload in the template designer is only for the main background. Using the template designer you can't just change the backgrounds of the sidebars. When you upload your image in the template designer, it will apply it to the entire background.

    The only way I know of to do what you want would be to write the CSS code and add it, along with a URL where you've uploaded your image (you won't be able to use the one you uploaded to the template designer for this). Where you add your own code is not in the "edit html" section for these new templates, the CSS code would be added in the "custom CSS" box of the Advanced section in the designer.

    I'm afraid I don't write CSS code, so I can't do that for you, but almost anyone who writes and codes their own CSS should be able to help you out.

    ReplyDelete
  4. Hi! I uploaded my own image as header but need to lengthen it horizontally and shorten it vertically. Can you help pls? thanks!
    www.wongszezen.blogspot.com

    ReplyDelete
  5. Is your header just the turquoise background design, or does it include the text? Changing the dimensions are pretty simple if you have any sort of image editor - if you don't, then try Irfanview (it's free). http://irfanview.com

    ReplyDelete
  6. Hi Gracey! Thanks. I just sent you the image with a reply before seeing this here. Yeah, the header image is the turquoise design. As for the text I will add in using the template.
    I tried lengthening using fotoflexer before but it loaded the same.
    Thanks again!

    ReplyDelete
  7. The header is on it's way to you.

    Here's a tip when uploading a header - with a background design like the one you use, you can upload the header without having Blogger reduce it's size. Select the header edit button from the design page. Untick the little box beside "resize this image to X pixels" and then upload the header.

    ReplyDelete
  8. As a note other users - Zen couldn't find the "resize" box when uploading her new header. In order to get that to appear when you upload a new header, you FIRST have to click the link to remove the current header image. Then you should be able to upload your new header image with the resize box visible.

    See the screenshots:

    http://i406.photobucket.com/albums/pp145/JGraceyStinson/Snap1140.jpg

    http://i406.photobucket.com/albums/pp145/JGraceyStinson/Snap1141.jpg

    ReplyDelete
  9. Hi, I am trying to add a background to the simple template and every time I upload the code to the add HTML gadget it does not apply the background to the top portion of my blog (where the header is). Any suggestions?

    ReplyDelete
  10. Hi Audrey - in the sample blog I created, the header image itself has a transparent background so it lets the main background (the orange bubbles) show through. You should be able to opt to have the header background transparent. Look at the options here:

    http://4.bp.blogspot.com/_vekozC3ps9Q/TGWO08hzH7I/AAAAAAAAEkc/2xuCSsIjvIY/s1600/SettingMainBackgroundTransparent.jpg

    YOu'll find this setting under "Advanced" then "Backgrounds". You'd select "header background" and make it transparent. If the pink part of your background is an image, that would stay pink.

    If that doesn't work, let me know.

    ReplyDelete
  11. Thanks for the help. I should of mentioned that I am currently using the picture window background template. I want to use the simple template, when I go to change the background it does not add the background to the top part of the blog. I went in and made the background transparent but there is still a white gradient on the top part. I know that the simple background has a white gradient on it, so it must be a remnant of that. I'm not sure how to proceed. If you have any more help on this I would really appreciate it.

    audreyfolsom@hotmail.com

    ReplyDelete
  12. I think you probably have to select "backkground none" in the template designer. The first tab in the designer is templates, the next is "background" - make sure your background selection here is "none" if you are using the custom css section to upload your background.

    Also where you make the previous change to the header to make it transparent, set your "outer background to transparent.

    ReplyDelete
  13. That worked! Thank you so much!

    ReplyDelete
  14. Hi, how do i change the page tab text to images? Pls help, thanks!:)

    ReplyDelete
  15. I'm not sure what you mean by changing the page tab next to images?

    The page tabs act as a menu, and you can only set them below the header, or in your sidebar as a menu.

    Since they are in a gadget, on your design page you can simply drag the "pages" gadget from under your header into the sidebar where you want it.

    If you mean something else, can you explain it a little more?

    ReplyDelete
  16. Hi Gracey,

    I'm looking to resize my blog. The whole body of the blog so that it fills a lot more of the page space. I'm using Josh Peterson's Simple Template. Would you know how to help me?? (: Thank you!

    ReplyDelete
  17. http://4.bp.blogspot.com/_vekozC3ps9Q/TGWOguob9GI/AAAAAAAAEkY/2DFN9JjoHV4/s1600/widthadjustment.jpg

    See that image for resizing your blog using the designer template. Simply select the "layout" tab in the template designer, then select "adjust width" and make the appropriate adjustment.

    The maximum width allowed for a blog is 1000 pixels. For many viewers that would require them to scroll from side to side to see the blog, so keep that in mind when you are setting the width.

    ReplyDelete
  18. I'm trying to create a header that comes into the template correctly. In the directions while up loading the upload page said 760 pixels. I made my image exactly that and uploaded my .jpeg image. For some reason it does not flush out with sides of template design. Please tell me, if you know, how to remedy this. Did read along the way that there may be a padding issue so how to take this out of the code would be nice. Am working with the Simple design.
    Thank you,
    Elleyne Kase
    elleynekase24@gmail.com

    ReplyDelete
  19. Hi Elleyne - if you are using one of the newer templates, you'll need to make your header the same size as you've set your blog width in the template designer. Look in the template designer for the full width of the blog.

    Upload the image into the header as you normally would, but DO NOT allow it to "reduce to fit". Just let it upload the actual size.

    ReplyDelete
  20. i want do page tab for the menu,but i dont know how to make it..can u teach me

    ReplyDelete
  21. Hello! I would like to remove my present background layout (one of Blogger's own designs) and replace it with a different layout. The layouts are compatible with Blogger, and designed with it in mind. I have the html code, but I am not sure whether I should remove the present design first, and where to put the new html...I also don't want to lose widgets that I have added. I don't want to wreck my profile!

    Thanks

    ReplyDelete
  22. How to put the hyperlinks in my blog, like the on you have put,, aka,, HOME,ADSENSE TERMS OF MONEY, etc, etc..

    ReplyDelete
  23. Its a very nice post, very help full keep it up

    ReplyDelete
  24. beautiful image, i also using default from blogger template. coz more SEO Friendly. thanks and good job

    ReplyDelete
  25. Hello I am using ourblogger.com template...I am trying to adjust layout of my template....it shows "Not applicable for Template".When i use default blogger template i am loosing all my widgets...My question is ..can I Get Layout,width,Background applicable to my present(ourblogger)template?Any Code shoud i add??Pls help me
    Regards,
    www.hindhustanjobs.com

    ReplyDelete
  26. If you aren't using a standard blogger template issued by blogger, then it may not be compatible with the template designer. Not all templates designed by other people will work with the Template Designer on blogger.

    ReplyDelete
  27. Great information and very well presented thanks for sharing. Happy to find your blog post here

    ReplyDelete

Please DO NOT DROP LINKS HERE using monetized URL shorteners or the comments will be marked as spam. DO NOT post links to affiliate sites or links to promote your website. This is a "NO FOLLOW" blog.

If you want help with an actual blog or website, please just post for help in the Adsense forum, or leave your G+ profile link. I will not publish comments with blog/website or channel links.

Thanks.