How to Create a Responsive Blogger 2 Column Footer Widget

Table of Contents [Hide]

     How to Make a Responsive Blogger 2 Column Footer Widget Footer is a widget located at the bottom of the page that beautifies a blogger's appearance and makes it look elegant.

    Footer widgets usually contain Copyright, About me, Feed burner, privacy, etc. As a complement to a blog. But usually, also put a footer link from the template maker.

    Next, how do you make a 2-column footer on a blog?

    2 Column Footer

    How to Create a Responsive Blogger 2 Column Footer Widget

    1. log in to your blogger with your Gmail,

    2. Then select Theme Menu ~ Edit HTML,

    3. Copy the CSS code below just above ]]></b:skin> or </style>.

    #footernya-masyadi{width:100%;background:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLCIomgCIqa6h7hjYVc0Gi4WjpLhlljsYfRC9SvZfXN0T0Dhz4DS5Crd3qmfzS2cDnYmMcz6tH4j40qxuUXxwKeml9NRdGD43a8yTn8XWv1WteZTqLzlyGIxo8QRDX4rTjlTG1jbWKk_0/s1600/footer.jpg) repeat-x top;margin:0 auto;text-align:left;border-top:7px solid #1658A0;overflow:hidden}
    #footernya-masyadi a{color:#9c9c9c}
    #footer-inners{overflow:hidden;padding:10px 20px}
    .footer .widget{padding:0 1px}
    .footer .widget-content{padding:0}
    .footer li{list-style:none;border-bottom:1px dotted #666;padding:3px 0}
    .footer h4{font-size:150%;font-weight:400;color:#fff;font-family:Oswald,Arial,Sans-serif;text-transform:uppercase;padding-bottom:10px}
    #footer-left{width:34.5%;float:left;overflow:hidden}
    #footer-right{float:right;width:64.5%;overflow:hidden}
    @media only screen and (max-width:700px){
    .footer{width:100%!important;float:none!important}
    }

    4. Still in Editing HTML, if you want to delete the old footer, delete the old footer, the code is above <BODY>, and if you're going to add it, you can directly paste the code below just above the closing code </FOOTER>.

    <div class='clear'/>
    <footer id='footernya-masyadi'>
    <b:section class='footer' id='footer-left' showaddelement='yes'/>
    <b:section class='footer' id='footer-right' showaddelement='yes'/>
    </footer>

    5. Done save Theme, see the result in Layout and add gadgets like Popular posts, labels, and about me.

    Related: How to Make a Responsive 3 Column Footer Navigation

    If you are good at design, please edit the CSS code above as desired for the discussion of How to Make a 2-column Footer. Hopefully, it's useful.

    Previous Post Next Post

    Contact Form