Designing Footers Of Blogger (Blogspot) More Atractive With Designer Outlines

In continuation to our series of discussion exploring new amendments in blogger (blogspot), today we shall be discussing How to Add Borders to a Blogger Footer Blogspot?"  Before we proceed our discussion to next level there are few points which should be kept in consideration which are what is the width of border related with thickness of border; style of lining whether thin, dotted or double lined; and what should be the color of border. Once these concepts are clear it is now time for you to start designing borders of your blogger footer.


Step 1: The first step in this process is integration of border’s property and then integrate border style, width of border and color of borders. This can be learned with help of few instances mentioned below :

    A .Integration of dashed border outside the blogger footer. This can be done by using the code given below:


                                               #footer-columns {
                                               
Margin:0 auto;
Clear:both;
                                                 }

                                                  Change to:

                                                 #footer-columns {
                                               
Border:1px dashed #00000
                                   Clear;both;
                                             Margin:0 auto;

                                                }



                   

      B. The dotted border can be added by deleting the dashed border in the following way.



    

                                            #footer-columns {
                                                  clear:both;
                                                   margin:0 auto;
                                              }

                                           Change to:

                                          #footer-columns {
                                   border: 1px dotted #000000;
                                      clear:both;
                                      margin:0 auto;
                                           }


                



     C.    Adding solid border outside: The blogger footer will require some additional efforts which will enable you to edit color of line and thickness. In the given example we will understand how to change color of line from blue to black and increase its thickness to 3 px from 1px.





#footer-columns {
clear:both;
margin:0 auto;
}

Change to:

#footer-columns {
border: 3px solid #336699;
clear:both;
margin:0 auto;
}



                           


Step 2: The second step we will add integration of partial border to blogger footer, which is mainly applied on only few portion of text instead of whole footer. To carry out this process we will be required to add border property but it will also include few different items viz., top, bottom, left, right) meeting your requirement
  
     AAdding solid border to top of blogger footer, will be carried out by following exercise;

               

#footer-columns {
clear:both;
margin:0 auto;
}

Change to:

#footer-columns {
border-top: 1px solid #000000;
clear:both;
margin:0 auto;
}

   

                         



   B.   Adding solid border to bottom of blogger footer, will involve following process to be followed;




#footer-columns {
clear:both;
margin:0 auto;
}

Change to:

#footer-columns {
border-bottom: 1px solid #000000;
clear:both;
margin:0
auto;
}
 
     
    C.  Adding dashed border to top of blogger footer can be done in the following way
                                             

                                             #footer-columns {
                                                    clear:both;
                                                    margin:0 auto;
                                               }

                                                 Change to:

                                             #footer-columns {
                                             border-top: 1px dashed #000000;
                                                  clear:both;
                                               margin:0 auto;
                                             }





       D.   Adding dotted border to top and bottom of blogger footer


 

#footer-columns {
clear:both;
margin:0 auto;
}

Change to:

#footer-columns {
border-top: 1px dotted #000000;
border-bottom: 1px dotted #000000;
clear:both;
margin:0 auto;
}

      

       E.   Adding dotted border of 4 pixels to both sides (top and bottom) of blogger footer can be carried out by method given below 




#footer-columns {
clear:both;
margin:0 auto;
}

Change to:

#footer-columns {
border-top: 4px dotted #000000;
border-bottom: 4px dotted #000000;
clear:both;
margin:0 auto;
}
  
                                

    

       F.   Adding blue solid border of 5 pixels to both sides of blogger footer
       



#footer-columns {
clear:both;
margin:0 auto;
}

Change to:

#footer-columns {
border-top: 5px solid #336699;
border-bottom: 5px solid #336699;
clear:both;
margin:0 auto;
}
                                 






I am sure this exercise will be helpful in making your blog more attractive and readable.
 

No comments:

Post a Comment

Man Behind Ribbun Software

vikas Singal Vikas Singal is a professional Internet marketer from Jaipur, India.

Apart from Blogging , he is a fun loving person. His areas of Interest are php, wordpress and joomla.

At Ribbun-Software he Writes about Blogging, Wordpress, Technology, Making Money online.

You can read more about him at About me page.

@ribbuntweeting

My Tweeter Updates

    Follow me @ribbuntweeting

    Also Check