Hide Blog Post And Replace With Footer On Your Homepage [Blogger]

Maybe you want to make your Homepage more simple? Many ways you can do, the easy way is try to removing the default blog post on your homepage and replace with footer or something else.
First, you should remove Blog Post on your homepage. To do this add condition tag on your Blog Post widget code.

Login on your Blogger Dashboard/Design/Edit HTML and don't check Expand Widget Templatesand Find code below on your HTML:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

And add the condition tag like code below:

And then, make three column footer on your Homepage. Add the code below right before </body> tag.

<div id='footer1' style='width: 33%; float: left; margin:0; padding:0px; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='footer2' style='width: 33%; float: left; margin:0; padding:0px; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='footer3' style='width: 33%; float: left; margin:0; padding:0px; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:left;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<b:section class='footer' id='col-bottom' preferred='yes'/>

If you want your Footer just showing on Homepage, add the condition tag like on Blog Post above. Right before <b:section> and after </b:section>.

After that add CSS code below on <head> area of your HTML.

/* Footer ------------------------------- */
#credit-wrapper {width: 900px;clear:both;margin: 0 auto;color: #ccc;font-family:Halvetica, Arial, Sans-serif;font-size:12px;padding:10px 0;text-shadow:1px 1px 0px #111;}.c-bottom, .c-bottom a, .c-bottom a:visited {color:#ccc !important;font-size:11px;text-shadow:none;font-weight:normal;}.credit p {padding:3px 0;margin:0;text-align:center;}.credit a, .footer a:visited{color: #f1f1f1;font-weight:bold;}.credit a:hover {color: #ddd;}
#footer{width:980px;clear:both;margin:0 auto;padding-top:0px;line-height:1.6em;text-transform:uppercase;letter-spacing:.1em;text-align:center}
#footer-wrapper{width:973px;clear:both;margin:-20 auto;padding-top:0}
#footer{width:100px;clear:both;margin:0 auto;padding-top:0;line-height:1.6em;letter-spacing:.1em;text-align:center}
#footer-column-container h2{color: #FFF;text-align:center;text-transform: uppercase;font-size: 17px;font-family: 'Eater Caps', cursive;text-shadow: 1px 1px 0 #222;}
#footer-column-container li{text-decoration:none;list-style-type:none;line-height:32px;margin-left:0 !important;padding:0 0 0 5px;border-bottom:1px solid #222;border-top:1px solid #444}
#footer-column-container li:hover{background-color:#222}
#footer-column-container ul{list-style-type:none;padding:0 0 0 0;margin:0 10px 0 0;padding:0;border-top:1px solid #222;border-bottom:1px solid #444}
#footer-column-container{background-color:#353535;clear:both;-moz-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; color:#fff;font-size:14px}
#footer-column-container a{color:#ffffff;font-size:12px}
#footer-column-container a:hover{color:#009cff;font-size:12px}
#footer-column-container ul,
#footer-column-container ul li{list-style:none}
.footer-column{padding:15px}

To change Background Color change the code with red marking above, the blue one for Border Radius and the orange marking is Width of the column container.
Here the screenshoot:

You're done!
Easy huh?? Be sociable by clicking sharing button below, i will appreciate it. Have a good day!

Posted by Best Skills

Hide Blog Post And Replace With Footer On Your Homepage [Blogger]

1 Response to "Hide Blog Post And Replace With Footer On Your Homepage [Blogger]"