Editing Your Blogs Proportions and Sizes

Hi guys sorry about the delay again I am not going to bore you by giving you reasons so just lets get to the post.
----------Our last post was about Adding Custom or Animated Header to Our Blog and today we will learn how to change the size and proportion of your blog.

----------The area that contains your content or you can say the article that you post is known as main content area and the columns on the side of the main content in which you can add widgets and stuff like that are known as sidebars. The main content and the sidebars fall under the outer wrapper. The outer wrapper can be simply said to be the width of your blog. So it is obvious that the width of the content area should be greater that the sum of the width of the sidebar and main content. Now as you understand the difference between the different portions of the blog we may proceed to editing the html.

----------The first thing that you should know is that all these parts of the blog have their own place in the html of the blog and these are the places that contain the detailed structural information that determines the position and size of the part in the blog and these codes start with some what similar to the following lines in the html of your blog:

div#main {

OR

div#sidebar {

OR

#outer-wrapper {

Below these lines there will be codes that will provide the respected information you will have to search for the line containing some what similar code

width:54%;

Now the blog template that I use is designed such that it changes itself to match the resolution of the visitor's screen but if your blog template is not similar to mine or if in your template the width is in pixels (px) and not in percentage (%) then its better to use the default unit. Increase or decrease the number to increase or decrease the size of that part of your blog.

----------That's it now if you have understood this technique then you can change the size and proportion of any blog template and not only that you can change the sizes of any css site and templates.

Plz Comment and Rate.

Adding Custom or Animated Header to Our Blog

----------Hi guys today my post is about adding custom or animated header by editing the html code of your blog. My previous post was about Adding a Custom Header to Our Blog, it will be better if you used that technique . I would recommend you switching to this technique only if you are not satisfied with the results that you got from the previous method or if you wanna add an animated header image...


----------Lets get started then. Plz follow the instructions before going to directly editing the HTML.:-

->Signin in your blogger account.
->Click on the layout link on your dashboard.
->On the layout page switch to edit HTML.
->Backup your template.
->Find this code in the post.

<div id="'header-wrapper'">

->You have to edit the code below this line. Edit the code to look like this or copy paste it in its place.

<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

->And delete this code thats just below the above code

<b:widget id="Header1" locked="true" title="Blogater Trial (Header)" type="Header">

->Now save your changes.
->click on the page element tab.
->Now you will notice that there will be a Add a Gadget option in the Header Area and if you preview your site you will see that the header has been deleated. Click on the add a gadget button a window will open in that window you will see a number of gadgets select or click the one named PICTURE and upload the image that you will like to have as your header image. If you want a animated header then upload the animated .gif image. It will be a good Idea to add the description of your blog and blog tittle on the header image by using any photo editing software, like photoshop, you can use photoshop to create aniamted .gif images as well and if you want to animate the description or the header title you can do that in the image as well before uploading in the picture gadget you will not get description and title options like you do in the header.

Plz let me know the results and or if you need any help.

Adding a Custom Header to Our Blog

----------Hi guys in our previous post we discussed about the Basic Things To Remember while editing the html of your blog, well guess what we will be requiring those basic things today as we for the first time we will be editing the HTML code of your blog. Today we will be focusing on the header of your blog...

----------First we will use the basic and standard way of doing it but for some advanced user out there we will also learn the way of adding a custom advanced or animated header through editing the HTML. Plz move to the advanced header customization after trying the basic one only if you are not satisfied with the results that you get with this method.

----------Lets see how to edit the content of your header. Follow these steps:

1)Sign in to your blogger account.
2)On your dashboard click on the layout link.
3)Now in the page element tab on the layout page click on the Edit link in the header box.
4)A window will pop up with Configure Header as the title.
5)You can change your blog header from this page, you can add some description to your blog header and even an image; just choose the image file and upload it.

Well that's it you are done go preview your template if this doesn't works or if you are not satisfied with the results or you want to add animated header and other stuffs then proceed to the next post Adding Custom or Animated Header to Our Blog.

Basic Things to Remember

----------Hi guys my last post was about Blogger Basics, hope you might have utilized the information shared in that post in creating your blog, well today in our fourth post we will be learning about the Editing Basics, i.e, the things that you can use while editing your post...

----------The first habit that you should follow is downloading full template before editing your blogger template. To do this you need to follow these instructions:-

->Sign in to your blogger account.
->click on the Layout link on your Dashboard.
->Then click on the Edit Html link.
->Now click on the Download Full Template link on that page.
->That's it but remember to save the html file such that it contains the date on which you downloaded it and remember to add a little detail like for example if you edited the header of the blog on 8th April then name it as "Changed Header 8th April 2009".

----------The second habit will be Exporting your whole blog. Exporting the whole blog is like keeping a backup of your entire blog. Well i have a real life example for this one, few weeks ago my blog encountered a error and whenever I tried to customize it or add any post to it it showed some BX#### error and I could do nothing about it and when I went to the blog help desk I saw that there were hundreds of such problems and none were solved so I decided to terminate the blog and start the blog again I just had to create a new blog and Import the previous blogs exported file that's it. My 1 years effort was saved from drowning. So lets export your blog:-

->First signin in blogger.
->Then click on settings.
->The first page that you will see will be having a section named Blog tools, its quite easy to find as it is the first section.

->there are three options in it import blog, export blog and delete blog. forget the third one, Import blog is the option that I used to import the exported file of my blog, that's the backup. Export blog is the option that you have to use do it once a week. You won't regret it.
->Click on export blog.
->Now click on Download Blog.
->That's it all done.

----------The third point is not actually something to remember its more liake a trick. While editing the Html of your blog you will have to find some code here and there which is not that easy and is a bit time consuming too. Follow these steps to save the time and effort:

->Use Internet Explorer as this trick will work only in this browser.

->When you are on the edit Html page click Ctrl+F.

->paste the code that you want to find in the blank box and hit enter.

----------The fourth habit is some thing that's quite useful its about adding hints for yourself in the html so that you are able to find the codes and the codes of the elements that you have added. Lets say you are about to add a News feed widget to your blog then you must add the code in the following manner.

!--News Feed Widget Code Starts--> 

Insert the code here

!--News Feed Widget Code Ends-->

The signs in red tells the html editor that the words between the signs must not be shown on the blog or site.

----------Well that's it. In our next post we will be try to Add a Custom Header to Our Blog.