Maybe, you ever see three colum footer in blog. With this style, you can add more widgets. Usually this column filled with followers widget (Google Friend Connect), recent posts, recent comments, or Ads. But you can fill with other widgets. Before you make three column footer in blog, I recommend you to backup your template first, because we will make some changes. Now, if you want to know how to make three column footer in blog, just follow the steps below.
1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above ]]></b:skin>
=> Adjust this width value in accordance with the width of your blog.
=> That are the background colour and width of the three columns where the widgets are added.
=> Change the color of the title
=> Change the font size and family
=> Change the thickness, style and colour of the border that appears at the bottom of the title
=> Change the size, style and colour of the border that appears below links.
4. Then copy the code below, and paste above </body>
1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above ]]></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;
}
=> Change the background color of this widget#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;
}
=> Adjust this width value in accordance with the width of your blog.
=> That are the background colour and width of the three columns where the widgets are added.
=> Change the color of the title
=> Change the font size and family
=> Change the thickness, style and colour of the border that appears at the bottom of the title
=> Change the size, style and colour of the border that appears below links.
4. Then copy the code below, and paste above </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>
5. Save your template now. Then check in the Design --> Page Elements<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>
4 comments:
Hey! I'm at work browsing your blog from my new apple iphone! Just wanted to say I love reading your blog and look forward to all your posts! Carry on the outstanding work!
ReplyMy weblog Mulberry UK
20151023 junda
ReplyMont Blanc Legend And Mountain Pen Discount
Louis Vuitton Bags Outlet Store
Authentic Louis Vuitton Handbags Cheap Online
nfl jerseys
Abercrombie And Fitch Kids Online
michael kors outlet
Canada Goose Jackets Outlet Online Sale
Louis Vuitton Handbags Official Site
celine
cheap toms shoes
coach factory outlet
Abercrombie and Fitch Outlet Sale
michael kors outlet
michael kors handbag
ugg boots
ugg boots
Louis Vuitton Bags On Sale
louis vuitton outlet
timberland boots for women
cheap louis vuitton
Lebron James Basketball Shoes Sale
Abercrombie T-Shirts
Michael Kors Handbags Outlet Deals
Louis Vuitton Clearance Sale
coach outlet store online
ugg boots
Cheap Jordans For Sale Wholesale
Michael Kors Outlet Sale Clearance
michael kors outlet
ugg boots
titans jersey
Replyugg outlet
ralph lauren
oakley sunglasses
michael kors outlet
ugg outlet
coach handbags
cheap ray bans
adidas nmd
adidas yeezy
cc20180613
Replysupreme clothing
salvatore ferragamo
pandora jewelry
salewa shoes
converse shoes
mlb jerseys
adidas yeezy
oakley sunglasses outlet
kate spade outlet store
cc20180613
Post a Comment