Progressed Multi Column Footer Widget For Blogger

In many web journals/site, you may have discovered distinctive sorts of segment footers which are extraordinary likewise, however am conveying to you, the new propelled variant of section footers. 

In this new form, you can grow/fall the section to three, four or even five. As a matter of course the footer is four section, yet don't surpass it more than five, to make it look more expert.

Go to your blogger dashboard ⏬⏬
Tap on "Outline" > "Alter HTML" (For old interface)

Tap on "Format" > "Alter HTML" > "Continue" (For new interface)

Utilize ctrl F to discover ]]></b:skin> and glue the accompanying code above/before it.

  /*----- Advanced Multi Column Footer By www.codedforum.com.ng -----*/
    #lower {    margin:auto;    padding: 0px 0px 10px 0px;    width: 100%;    background:#333333;    }    #lower-wrapper {    background:#333333;    margin:auto;    padding: 20px 0px 20px 0px;    width: 960px;    border:0;    }    #lowerbar-wrapper {    background:#333333;    float: left;    margin: 0px 5px auto;    padding-bottom: 20px;    width: 23%;    text-align: justify;    color:#ddd;    font: normal 12px Arial, Tahoma, Verdana;    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;    border:0;    color:#ddd;    text-transform:uppercase;    font: bold 14px Arial, Tahoma, Verdana;    }    .lowerbar ul {    color:#fff;    margin: 0 auto;    padding: 0;    list-style-type: none;    }    .lowerbar li {    display:block;    color:#fff;    line-height: 1.6em;    margin-left: 0 !important;    padding: 6px;    border-bottom: 1px solid #222;    border-top: 1px solid #444;    list-style-type: none;    }    .lowerbar li a {    text-decoration:none; color: #DBDBDB;    }    .lowerbar li a:hover {    text-decoration:underline;    }    .lowerbar li:hover {    display:block;    background: #222;    }

Now find </body> and paste the following code 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 id='lowerbar-wrapper'>    <b:section class='lowerbar' id='lowerbar4' preferred='yes'>
    </b:section>
    </div>

    <div style='clear: both;'/>    </div> </div>

Customization 

The general width of the segment footer is spoken to by width: 960px; and the width of every section is spoken to by width: 23%;, you can alter any of this to your own particular fulfillment.

Taking a gander at the code above painstakingly, you ought to comprehend the structure of the section footer, the code underneath speak to every segment.⇩⇩

<div id='lowerbar-wrapper'> 

<b:section class='lowerbar' id='lowerbar4' preferred='yes'> 

</b:section>

</div> 

In the event that you need to include the fifth section, basically include the above code, above <div style='clear: both;'/> and supplant lowerbar4 with lowerbar5, as it speak to the segment number.

Done! Trust you like this post? 

Share Share Tweet Share Share Share

Home

Thanks For You Reading The Post We are very happy for you to come to our site. Our Website Domain name http://codedforum.blogspot.com/.