OscarminiOscarmini
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
Facebook Twitter Instagram
OscarminiOscarmini
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
OscarminiOscarmini
Home»Tip»How To Create a 3 Column Footer Widget On Blogger

How To Create a 3 Column Footer Widget On Blogger

Isaac FrankBy Isaac Frank2 Mins Read
Share
Facebook Twitter LinkedIn WhatsApp Pinterest Email

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.

blogger Blogger Widgets

Related Posts

How To Delete a Blog From Your Blogger Dashboard

March 3, 2015

How To Merge 2 or More Blogger Blogs – Multiple Blogs into 1

March 2, 2015

How To Embed & Resize A Youtube Video In Your Blog Post

February 11, 2015
Add A Comment

Comments are closed.

Recent Posts
  • TikTok Faces Unexpected Ban in Senegal, Sparks Global Curiosity
  • The Apple GPT & Apple’s Chatbot Mysterious Debut
  • Triller Takes on TikTok: Filing for Public Listing
  • Level Up Your Gaming: Stream Xbox Games to Discord
  • Google’s YouTube Experiment: AI to Summaries Videos
Get Exclusive Tech Insights!
Oscarmini
Facebook Twitter Instagram YouTube
© 2023 Oscarmini Co. Designed by illBytes.

Type above and press Enter to search. Press Esc to cancel.