We had covered four courses on 'how to create a blogger blog' in the previous posts and this course is a continuation of the four. The four courses being :
Now, as discussed in the fourth course, designing a template is important and comes next to third course. But since, in order to have a complete look on how your blog (as well as post) looks, I suggest you to create at least a sample post before working on designing/customizing a blog. In this session, we will go through the first part of customizing a blog design. As usual we will see the proceedings in step-by-step process.
Step - 1
Sign in to your blogger account and go-to blog > Template as shown in the below picture. Now, click the Customise button as indicated by the number 2 in the picture.
Step - 2
Clicking 'Customise' will display a preview page with some settings on the top pane as shown in the screen shot. The first option is 'Templates', which will allow you to change the theme of your blog. As discussed there are 34 default theme sets, and you can choose any one among them. Just click on your desired theme and you will see the changes in the preview of the blog (provided on the same page below the template settings pane).
Step - 3
The next setting is 'Background' as shown in the below picture. This setting allows you to choose the background color as well as backdrop image and alignment settings. If you wish to incorporate a backdrop image (image behind your blog post pane), then click on 'Background image'.
Clicking this will display a popup window as shown below. As you can see; there are many predefined images by default, you may choose any one of them, otherwise you may upload your own image from your desktop by clicking the 'Upload image' link provided at the top as shown below. Most bloggers don't prefer to include background image; even I too don't prefer. Blog design should preferably be simple, plain and in fact visually pleasing.
Anyway if you want to select one, do that and click 'Done', else click 'Cancel'. Whenever you are making any settings or customization, don't forget to preview the changes in the same settings page. Verify whether the selected changes suits your design or not.
Step - 4
Under 'Background' setting, you should also see 'Alignment' drop-down menu allowing you to choose six kinds of alignment options as shown below. This allows you to align the background image (if any) as per the selection. Do make a experiment by choosing all the six alignment types, and select the one which pleases you. As the name suggests; the 'Tile' option provided below 'Alignment', tiles the image if click it.
You may select a predefined color from the available options (if you don't like the default color of the theme) or you may choose a custom color by clicking on 'Main color theme' as shown below. This color setting affects only the color of the background or theme and not the color of page tabs, links, text colors, page title and any other color. That will be done in 'Advanced'' option.
Step - 5
OK, once you are done with the first two settings and before going through 'Adjust widths', we will understand about 'Layout'. Click on the fourth option 'Layout' as shown below.
Clicking Layout will display a set of layout options both for body as well as footer as shown below. You can select one option among the eight different layouts available. Like for example, for this blog, I selected the second layout option, that's why my blog gadgets as well as ads moved to right (other than the tab page or top ad, that we can change).
Anyway we can even change the order of gadgets also; that we will learn in the coming posts. Next select the type of footer as shown above.
Step - 6
Now we will move to 'Adjust widths' (third setting) as shown below.
This settings allows you to change or customize the width of overall blog and width of the post. The below picture shows the two settings. By dragging the tab or by altering the value in the pixel box (px), widths change accordingly. Remember whatever changes you make, will appear in the preview pane below this settings menu. So, it's always a good practice to go through the preview, whenever you make any template settings.
I chose only right sidebar and so only right sidebar setting is being displayed in the option, but if your design has both right and left sidebar, then both will appear in the section. Whenever you want to revert back to the default settings, you can always do that by clicking the 'Reset widths to template default' link available at the bottom as shown in the picture.
Step - 7
The next major setting 'Advanced' will be taken care in the coming post. For now save your design. To do this, navigate to the top right corner of he page and click 'Apply to Blog' button as shown in the below picture.
You can also preview your blog page by clicking 'View Blog' link. To return back to blogger dashboard, you need to click 'Back to Blogger' as shown in the above picture.
This article is nice and I like it, I hope you come back to my blog ;)
ReplyDeleteThanks and sure :)
DeleteI agree with you. This post is truly inspiring. I like your post and everything you share with us is current and very informative, I want to bookmark the page so I can return here from you that you have done a fantastic job.
ReplyDelete