How To Create a 3 Column Footer Widget On Blogger

    By
    Isaac Frank
    0

    The Image below is how the Blogger 3 Column Will look like when you might have completed the tutorial below

    To complete this Tutorial, Follow the steps Below:

    Step 1.
    Login to your Blogger Dashboard.

    Step 2.
    Goto Template of The Blog you wanna add this widget to.

    Step 3.
    Edit Template, Now Put your mouse on the HTML Editor and Press CTRL F

    Step 4.
    Search For ]]></b:skin> . Add the Below Code Just Above It

    /* —– EtechJournal 3 Column Footer Widget Starts —– */

    #ETJlower-wrapper{ -moz-box-shadow:0 0 7px rgba(0,0,0,0.5); background:#fff; margin:10px auto 0; padding:5px 0px 0px 0px; width:100%; border:1px solid #dbe1e6}
    #ETJlowerbar-wrapper{ color:#333; float:left; margin:0px auto auto; padding-bottom:20px; width:332px; text-align:justify; font-size:100%; line-height:1.6em; word-wrap:break-word; /* fix for long text breaking sidebar float in IE */ overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
    .ETJlowerbar{margin:0; padding:0}
    .ETJlowerbar .widget{ border-right:1px solid #bbb;border-bottom:1px solid #bbb; background-color:#fff;margin-bottom:10px}
    .ETJlowerbar .widget-content{padding:5px 5px 5px 15px}
    .ETJlowerbar h2{background:none repeat scroll 0 0 #1C262F;color:#FFF;text-align:center; padding:4px 10px; margin:0; font-size:8.5pt; font-weight:bold; text-transform:uppercase}
    .main .Blog{border-bottom-width:0}
    .ETJlowerbar 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 20px;border-bottom:1px dashed #dbe1e6;background:url(http://1.bp.blogspot.com/-PzPP314ZtGE/TgX2iGxUcKI/AAAAAAAAEio/-xqTO1ZeCKo/s1600/bullet-point-image-1.png) no-repeat left}
    .ETJlowerbar a{color:#333;font-size: 12px; font-family:arial;text-decoration:none;text-decoration:none}
    .ETJlowerbar a:hover{color:#A61111; text-decoration:none}
    .ETJlowerbar a:visited{color:green; text-decoration:none}

    /* —– EtechJournal 3 Column Footer Widget Ends —– */

    Step 5.
    Search For </body>
    and Paste the below Code Just above it

    <div id=’ETJlower’>
    <div id=’ETJlower-wrapper’>
    <div id=’ETJlowerbar-wrapper’>
    <b:section class=’ETJlowerbar’ id=’ETJlowerbar1′ preferred=’yes’>
    </b:section>
    </div>
    <div id=’ETJlowerbar-wrapper’>
    <b:section class=’ETJlowerbar’ id=’ETJlowerbar2′ preferred=’yes’>
    </b:section>
    </div>
    <div id=’ETJlowerbar-wrapper’>
    <b:section class=’ETJlowerbar’ id=’ETJlowerbar3′ preferred=’yes’>
    </b:section>
    </div>
    <div style=’clear: both;’/>
    </div> </div>

    Step 6.
    Save Template and Preview…
    Now You will Goto Layout and See The Add Gadget Link at the Button…

    Hint/Tips
    1. Change width:100% to Your Choice of width or leave it so it will adapt to your blog template automatically.

    2. width:332px represents the width of each of the columns. divide your blog width by 3 to get the column width which wil match your blog templaate

    #Conclusion: Over To You Boss!!! What do you think About this Post?? Do you have further clearifications? Feedbacks? Suggestions? Or Inquiry? Why Not Use The comment Box To Communicate With Us? We will be Happy If you Do.