Add Beautiful 3 Column Footer | Blogger | InfoTechBlogging InfoTechBlogging: Add Beautiful 3 Column Footer | Blogger

Posted by Syed Muhammad Ali

We are announcing a Blogger Footer Column. As Footer is necessary for a Blog but many bloggers are not using footers. Itb has created a footer for bloggers who want to renovate their Blog.This Footer is quite easy to install. We used some Css and Html Codes to Make This Footer.

This Widget is easy to Install. You just have to Add some Codes In your Blog Template.

It’s Simple, you just have to put your Email in the Below Subscription Box ad Subscribe with Us. Then write your Email in Comment so that we can verify your Subscription and Sent you the Code on Given Email

Follow the Below Steps to Add this Footer In Blogger

(1) – Go to Blogger

(2) – Log-In to your dashboard

(3) – Go to Template Tab

(4) – Click Edit Html

(5) – Now Find ]]> tag By Pressing Ctrl+F Key

(6) – Paste the Below Code Just Above ]]>

/*—– InfotechBlogging 3 Column Footer Starts —–*/ #itechblogginglower { margin:auto; padding: 0px 0px 10px 0px; width: 100%; background: url(http://i41.tinypic.com/29xfzeq.png) repeat scroll 0 0 #222222; } #itechblogginglower-wrapper { background: url() ; margin:auto; padding: 20px 0px 20px 0px; width: 960px; border:0; } #itechblogginglowerbar-wrapper { background: url(http://i41.tinypic.com/29xfzeq.png) repeat scroll 0 0 #222222; float: left; margin: 0px 5px auto; padding-bottom: 10px; width: 32%; text-align: justify; font: bold 12px Arial, Tahoma, Verdana; line-height: 1.6em; word-wrap: break-word; overflow: hidden; } .itechblogginglowerbar {margin: 0; padding: 0;} .itechblogginglowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} .itechblogginglowerbar h2 { margin: 0px 0px 10px 0px; padding: 3px 0px 3px 0px; text-align: left; border:0; color:#75573D; text-transform:uppercase; font: Normal 20px Arial, Tahoma, Verdana; } .itechblogginglowerbar ul { color:#fff; margin: 0 auto; padding: 0; list-style-type: none; } .itechblogginglowerbar li { display:block; color:#fff; line-height: 1.6em; margin-left: 0 !important; padding: 6px; border-bottom: 1px solid #B6B19C; border-top: 1px solid #B6B19C; list-style-type: none; } .itechblogginglowerbar li a { text-decoration:none; color: #75573D; } .itechblogginglowerbar li a:hover { text-decoration:underline; } .itechblogginglowerbar li:hover { display:block; background: #b6b19c; } .menubottompic { background: url(“http://i40.tinypic.com/j82yxl.png”) repeat-x scroll left top transparent; width: 100%; height: 72px; margin: 10px auto -15px; position: relative; z-index: 9999; } #menubottom-container { width:950px; margin:0px auto; padding:0px; } .menubottom{float:left; margin:0 auto;padding:20px 0} .menubottom ul{padding-left:0;color:#fff;text-transform:none;list-style-type:none;font:normal 12px Arial,sans-serif;margin:0} .menubottom li{display:inline;margin:0} .menubottom li a{border-right:1px solid #D3CDB3; float:left;display:block;text-decoration:none;color:#4f4f4f;line-height:1.9em;padding:0px 12px; font-weight:normal;} .menubottom li a:hover{ color:#3b3b3b;} #backtotop { float: right; background: url(“http://i42.tinypic.com/208wkrc.png”) no-repeat scroll right center transparent; padding: 10px; padding-right: 26px; padding-top: 13px; } #backtotop a, #backtotop a:visited { color: #ddd; text-decoration: none; display: block; font-weight: bold; font-family: arial; } #backtotop a:hover {color:#fff;} #itechbloggingfooter-wrapper {clear: both;width: 100%; height:2px; background: #b6b6b6;} /*—– InfotechBlogging 3 Column Footer Ends —–*/

(7) – Now Search for tag.

(8) – Paste the Code which have been Sent to you Just Above tag.

(9) – Save your Template.

Congrats! You are Done.

I hope you like this Footer. Comments Below to ask any Question

Follow Us!

About This Blog:
InfoTechBlogging is owned by Syed Muhammad.Ali who loves to help other bloggers in starting their Blogging career. He also share Blogger Widgets and Templates.
Follow Him at : Google |Facebook| Twitter