Sunday 13 April 2014
Cool Multi Column Footer design for Blogger
Do you like this ?
How it feels when your whole footer section is taken by a single widget, look like that's really not good. So Here's a easy and simple tutorial to add 3 column footer to your blogger website. This is really easy tricks and tips to customize blogger footer. Add a customized footer design, three column footer.
Adding this code is code is really simple and easy.
So let's proceed in the name of Allah.
Adding this code is code is really simple and easy.
So let's proceed in the name of Allah.
- First go to Blogger > Template > Edit Html
- Press CTRL+F from your Keyboard and Search for this code ]]></b:skin>
- And paste the Below codes just Above/Before ]]></b:skin>
/* ----- LOWER SECTION ----- */
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333434; }
#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;}#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px; width: 32%; text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#0084ce; text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana; border-bottom:3px solid #0084ce; }.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}.lowerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;
}
- Now again one more code to Add, Search for </body> and paste the below code just Above/Before </body>
<div id='lower'> <div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
- Now save your Tempale.
Now time for some customization : IF YOU WANT....
- background:#333434; Change this colour code, to change the background colour of the widget.
- width: 960px; Change this if you want to adjust it eith your blog.
- background:#fff; and width: 32%; , these are the background and size of the widget.
- font: bold 14px Arial, Tahoma, Verdana; Change this to change the Font and size.
- border-bottom: 1px dotted #ccc; make this changes to change the thickness, style and colour of the border that is at the bottom of Title Heading
- border-bottom:3px solid #0084ce; make this changes to change the size, style and colour of the border that is below links.
Now go to Blogger > Layout and you will see 3 add a gadget section in the footer section.
If you find any problem adding this codes, let me know.
This post was written by: Rashedul Islam
Assalamualaikum, I am Rashedul Islam Arman from Chittagong,Bangladesh. Founder of this Blog Alhamdulillah.If you Have any Problem,Complain,Suggestion or for Anything don't Hezitate to Contact ME,You can Directly contact me on my Facebook I'D
Subscribe to:
Post Comments (Atom)
1 Responses to “Cool Multi Column Footer design for Blogger”
15 January 2022 at 22:57
Dallas Mavericks vs Brooklyn Nets Prediction, Odds, Picks 우리카지노 우리카지노 ミスティーノ ミスティーノ ミスティーノ ミスティーノ 472Borgata Free Casino Slots No Deposit Bonus Codes
Post a Comment