Adding 4 extra columns to footer in a Blog

You can add more and more extra columns to your blog. Now here i am describing you to how to add 4 more columns to your blog's footer. You can add text gadgets and HTML widgets. How ever these gadgets boxes may not appear similar to your existing gadgets.They may appear like this.

1. Edit your Template
2.Un tick the "Expand widgets" tick box if you had ticked it.
3. Now find out

<b:section class='footer' id='footer'/> ( press 'Ctrl' + F to open your browser's search box)

Now paste following code lines by Replacing the line

<b:section class='footer' id='footer'/> <div id='footer-column-container'>
<div id='footer1' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='Text100' locked='false' title='Your gadget's Caption here 1' type='Text'/>
</b:section>
</div>
<div id='footer2' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='HTML100' locked='false' title='Your gadget's Caption here 2' type='HTML'/>
</b:section>
</div>
<div id='footer3' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text300' locked='false' title='Your gadget's Caption here 3' type='Text'/>
</b:section>
</div>
<div id='footer4' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='HTML200' locked='false' title='Your gadget's Caption here 4' type='HTML'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

CONFIGURATION :-

TEXT stands for Text gadgets
HTML stands for HTML gadgets


Now follow the Safety Saving Steps described in this blog.

And

Read More

Safety Steps at Saving the Blog Template

At every Edit , every blog template change or any other thing you done with your blogger template , you must follow this safety steps. If any thing goes wrong , your whole blog , time , money will be wasted. So keep in remember , always follow these steps.

At Editing a Code ( this is not a must )

Lets say you are going to Edit this code line.

Just separate that code from other lines and keep a comment to find it again easily.

* comments are kept by " /* your comment " format.

Now , in a later occasion you will be able to easily find your edited code.

At Saving ( This is a must )

After every edit you make just click on Preview and check whether all are OK.


If there is a error you will find dialog like this.

Read the error message very carefully and find out what is the error. If you can't understand it ,just press Clear Edits.

and now again press Preview and check whether all are OK.

now if all are OK to you and for blogger ,

Read More

Adding a background Image to the Title of post

If you like , you also can add a background image to your post title's background. The most amazing thing is the resolution. Though you use a short small Image as the background image to your post title's background , it will re sized and posted repeatedly. So better to use a Pattern as the background image.

To do this

1. Edit your Template

2. Now find out press 'Ctrl' + F to open your browser's search box

Now you will find out several post h3 code lines but use the first post h3You will see bunch of code lines which are very similar to these

.post h3 {
color:#3E3533; ------------ Post title's color
font-size:20px; ------------ Post title's size

font-weight:bold; --------- Post title's font decoration

line-height:1.4em;
margin:0.25em 0 0;

Now paste this code line just after the code line .post h3 {


background: url( Paste URL of your Image here ) top repeat-x;

ex:-

.post h3 {

background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV8J50Woxvd_P5baytRbeaCblOsekP2RQh5PFDMqAgZYmKCe94fo9QTDOv8SFtQoAokwt5XgVPCgdzU_HCwcg1yJvcQFoS9wcjOod74V6gt38Hspa9ujLfzDyS1zxevMcp-xVQSzljMv6U/s1600/sidebar-h.jpg ) top repeat-x;

color:#3E3533;

font-size:20px;

*keep in remember , above code lines will be in a different way according to the template you are using.


And

Some Header Images for you Image URL :- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHhc68qroZOVIqiDkbFZJn3pTMWG0a04qDTk2yXchpRoutCpfiAVsq7kPvgsjKRSwNiIMmsU5zCx7QmwEEw6lbPszRP_iWGyFOiv4xxplDXW4Or1d1P1rcZsdUWXyL1DoL-FcDEc8kCLtN/s1600/bg_sb_title.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV8J50Woxvd_P5baytRbeaCblOsekP2RQh5PFDMqAgZYmKCe94fo9QTDOv8SFtQoAokwt5XgVPCgdzU_HCwcg1yJvcQFoS9wcjOod74V6gt38Hspa9ujLfzDyS1zxevMcp-xVQSzljMv6U/s1600/sidebar-h.jpg

Image URL :- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV8J50Woxvd_P5baytRbeaCblOsekP2RQh5PFDMqAgZYmKCe94fo9QTDOv8SFtQoAokwt5XgVPCgdzU_HCwcg1yJvcQFoS9wcjOod74V6gt38Hspa9ujLfzDyS1zxevMcp-xVQSzljMv6U/s1600/sidebar-h.jpghttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil96lHpkM0UBEKs6J7Rw99ZviXdWgfYQIYvhIqDCjYLzQ8oh4DppSDFqn3XajgCe0yDdsrA6zNu0rewgvbOFgAk1HxAZx_QW9sI8mlEunFyyrarNxMen83UETV8NXQLQokDgyB83ejC_xq/s1600/bg_sb1_g.gif

Image URL :- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil96lHpkM0UBEKs6J7Rw99ZviXdWgfYQIYvhIqDCjYLzQ8oh4DppSDFqn3XajgCe0yDdsrA6zNu0rewgvbOFgAk1HxAZx_QW9sI8mlEunFyyrarNxMen83UETV8NXQLQokDgyB83ejC_xq/s1600/bg_sb1_g.gifhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbqIXgqTO_AQb4HIOVLOrtoHJxOptwPkFJqCrUn7pW_yzIZ8E1UWSrfm-ThdNp7fTKNhHygXi77dsxO_iKYR8SbCz2d_ZHd0ZjxZWfB-j9C8lJePKMuOLtx89kR7rX0ALjT1Cb9umhqmM/s1600/bg_sb1.jpg

Image URL :- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbqIXgqTO_AQb4HIOVLOrtoHJxOptwPkFJqCrUn7pW_yzIZ8E1UWSrfm-ThdNp7fTKNhHygXi77dsxO_iKYR8SbCz2d_ZHd0ZjxZWfB-j9C8lJePKMuOLtx89kR7rX0ALjT1Cb9umhqmM/s1600/bg_sb1.jpg

Read More