What is CSS Footer Bottom and Where is the Position of Footer in Blogger Layout?

Filed Under :

Hi bloggy readers,
After i explained about What is Blog Header? in my other post, it's time for me to proceed to the bottom position of the blog layout. Now let's talk about the CSS footer bottom. Just like the header, the footer means feet of element. Footer Element is the bottom element on blog layout that has a function to hold all of the elements, such as header, sidebar, and post content.

In blogger template, the position of the CSS footer bottom is at the bottom of the layout. See the picture below!


css footer bottom
Where exactly is the location of CSS footer bottom element in our template code?

Now we want to know where is the position of the CSS footer bottom at the HTML code on blogger template.

1. Log in to Blogger
To begin this tutorial, now go to Blogger.com and Log in to your Blogger account

2. Go to Edit HTML
In the Dashboard page, pick one of your blog and go to the Layout/Design page. In the Page Element, now press the sub-tab Edit HTML.

3. Find the code
And then, find the code below (Ctrl + F):
/* Footer
----------------------------------------------- */
#footer {
......
......
......
}
As you can see at the CSS above, the ID #footer indicates the column of footer that will be added in your blog template. And the dots or blank area, indicates the pack of commands and configurations for the CSS footer bottom column.

Now scroll down to the bottom of the HTML codes. As you can see in the code below, the div tags of CSS footer bottom below, indicate that the footer element will be displayed in the Page Element and also in the HTML based web page.
<div id='footer-wrapper'>
...
...
</div>

Ok, that's all guys! Hope you understand the meaning of CSS footer bottom in blogging.

Good luck bloggy!

You might also like to read :


Share This Article to Other People Across the World !
Thanks!
Get the fresh update from Whatmakesblog.com!
To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe.
Your email address will not be shared to any third party
Delivered by FeedBurner
edit post

2 comments:

Del said...

Can't find the code man, no footer-wrapper here.

Daniel Likin said...

To Del,

After checking your blog at Geliva, i just figured out what CSS styling and HTML code that control the footer element of your blog. Here they are:

The CSS styling:

/* FOOTER */
#footer{padding:10px 0 10px 0;color:#FFFFFF;font-size:12px;margin:0 auto;background:#410007;border-top:1px solid #1F0004}
#footer a:link,#footer a:visited{color:#FF8E9D}
#footer a:hover{color:#fff}

The HTML Codes

<div id='footer'>

To customize the appearance: background-color, width size, font color, etc, can be done around the CSS styling "/* FOOTER */"

Hope it can help you!

Post a Comment

Browse Daniel's Designs

Revoluzine Template

Revoluzine Template
Designed by Daniel Likin

Subscribe Now To Get Update!

Want to Get The Update From Whatmakesblog.com to Your Email Inbox? Just Type Your Email Address Below and Press Subscribe...
Your email address will not be shared..
Delivered by FeedBurner

Last Posts

Site Info