Add three Columns Footer For Widgets inwards Blogger Layout

How To Add Best 3 Columns Footer Widget Section inwards Blogger Theme?

Hello Friends nosotros are dorsum amongst around other useful widget where nosotros volition learn yous how to add together footer department inwards your blogger layout. Three Columns footer volition brand your weblog await to a greater extent than professional and attractive. 

This Footer department volition locomote visible inwards your layout hence that yous tin add together or take away widgets. Footer Section covers the total width as well as This department has night subject amongst moveover termination on Titles. 

After few tweaks this footer department tin jibe to whatever template as well as volition non touching on your weblog loading speed equally nosotros bring non used JavaScript or other frameworks. We used HTML for markup as well as CSS For Styling. 

This Three Columns Footer volition stacked adjacent inwards your weblog layout. Many large sites used this type of footer inwards their site yous tin add together About us, Contributors, Alexa Rank, Recent Posts etc widgets inwards this section. 

First We Add Footer Styling ( CSS ):

STEP 1: Log inwards to your Blogger concern human relationship as well as Go to your Blogger Dashboard

STEP 2: In The Left Side Bar You volition uncovering Template Section equally highlighted inwards the ikon higher upwards Click on Template.

STEP 3: Click On Edit HTML.

STEP 4: After Clicking on Edit HTML Search for

]]></b:skin>

STEP 5:  Copy This Below Code Before ]]></b:skin>

/* Footer Decorated By http://www.allbloggertricks.com */

footer#ABT_Footer_Wrap{ margin: 0px!important; padding:15px 0!important; min-width:100%!important; background: rgb(34,34,34)!important;} #ABT_Footer_Inner-Wrapper{ max-width: 1150px!important; margin: 0 auto!important; } .ABT_Footer-Tabs{ width: 31%!important; float: left!important; text-align: left; } .ABT_Footer_Stylings h2{ background: none!important; color: #fff!important; font-size: 14px!important; margin-bottom: 30px!important; text-transform: uppercase!important; letter-spacing: 1px!important; overflow: hidden!important; padding-left: 15px!important; position: relative!important; } .ABT_Footer_Stylings h2:before{ content: ''!important; width: 5px!important; position: absolute!important; background-color: rgb(221,47,47)!important; border-radius: 5px!important; height: 100%!important; left: 0!important; z-index: 8!important; } .ABT_Footer_Stylings h2:after{ content: ''!important; background-color: #2F2D2D!important; height: 1px!important; width: 100%!important; position: absolute!important; top: 50%!important; margin-top: -1px!important; margin-left: 8px!important; } .ABT_Footer_Stylings h2:hover:before { background-color: #7ee0b3!important; } .ABT_Footer_Stylings h2:hover:after{ background-color: #7ee0b3!important;} #ABT_Footer_Stylings2{margin: 0 3.5%}.ABT_Footer_Stylings{color: #fff;}

Customization:

• The Yellow Highlighted Text is responsible for the Background Color of the Footer Tabs So if yous wishing to Change it simply alter the values to your desired one.

• The Orange Highlighted Text is Responsible for maximum width of the footer past times default nosotros bring added 1150px but yous tin alter it to your desired width.

• The Green Highlighted Text is for The Widget Title In Most blogs the Widgets Title Will locomote h2 But If yous role h3 Don't worry simply alter or supercede h2 amongst h3.

STEP 6:  All Done Save the template.

Second We Will Add Some Styling ( HTML):

STEP 1:  Go To Template Section As Shown inwards The Image Below

STEP 2: After Clicking on Edit HTML Search for 

</body>

STEP 3:  Copy This Below Code Before </body>

<footer id='ABT_Footer_Wrap'>
    <div id='ABT_Footer_Inner-Wrapper' class='row'>
        <div class='ABT_Footer-Tabs col-sm-4' id='ABT_Footer_Tab_1' style='margin: 0px!important;'>
            <div class='ABT_Footer_Stylings' id='ABT_Footer_Stylings1'>
                <b:section class='ABT_Footer_Widget_Wrap' id='ABT_Footer_Widget_Wrap1' preferred='yes'></b:section>
            </div>
        </div>
        <div class='ABT_Footer-Tabs col-sm-4' id='ABT_Footer_Tab_2'>
            <div class='ABT_Footer_Stylings' id='ABT_Footer_Stylings2'>

                <b:section class='ABT_Footer_Widget_Wrap' id='ABT_Footer_Widget_Wrap2' preferred='yes'></b:section>
               
            </div>

        </div>

        <div class='ABT_Footer-Tabs col-sm-4' id='ABT_Footer_Tab_3'>

            <div class='ABT_Footer_Stylings' id='ABT_Footer_Stylings3'>
                <b:section class='ABT_Footer_Widget_Wrap' id='ABT_Footer_Widget_Wrap3' preferred='yes'></b:section>

            </div>
        </div>

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

STEP 4:  All Done Save the template And Check it inwards your Blog Layout.

Conclusion:

Finally nosotros bring added 3 columns footer section. If yous are non able to add together hence don't hesitate to inquire us nosotros volition aid you. And If yous added but non plumbing equipment to your template hence comment nosotros volition hit it. 

And those who bring added successfully without whatever hurdles congrats to them. as well as if yous wishing whatever styling inwards this footer notify us nosotros volition add together it for you.

That's It Thanks For Following our Tutorial '' Add 3 Columns Footer For Widgets inwards Blogger Layout '' Along With us If yous flora whatever difficulty Please Comment as well as Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This as well as Share this amongst your friends.

Sumber http://www.allbloggertricks.com/

Bagikan Artikel ini