How I added 4 Footer Widget Area to my Smf Forum

Simple Machines Forum (smf) Guys did a very wonderful and admirable work in coming up with such a flexible cms platform that can be customized to take any look at all. On my regular surfing I stumbled upon a forum (smf script) that looked exactly like tagged.com with options such as download system, tagging system, online gaming, friends buddy list and many advanced smf editing features I was like wow! could this be just smf or other paid cms system ?   Then it wasn’t long before I found out the simple answer to my question, Smf is flexible! it can be tweaked to any look following smf wiki or their official documentation page.

add four footer widget area to simple machines forum

Now having this in mind you should be very comfortable editing the little code I’m going to share in this simple tutorial. One of my regular smf forum user was very much astonished when I alerted him about http://www.naijapals.com/ and http://www.nairaland.com/ being initially the brain-work of smf platform and the custom codes embedded by these top programmers that own the sites.

Now In this custom code I am going to give out for your smf custom footer widget area, you will be having regular languages edit like;  xhtml, Css and javascript which I think every regular computer users with good knowledge of ctrl +c : ctrl+v  should be very comfortable with the editing.

Let me tell you little about the custom 4 footer widgets area, this was a tag given to it by my friends when they contacted me via facebook, they were like, hey pro!   How can I add footer widget area section to my simple machine forum site ? I paused a while but couldn’t figure out what they really wanted, then I suggested simple portals mod, adk portals mod, tiny portals and the likes but they insisted on having something very similar to what I already have in my site. Then I realized that giving  them core editing option will be very difficult for them to implement, so I decided to share a tutorial on that during my future blog update.

ALSO READ
The Top 5 Elements to A Killer Website

This footer widget area code was something I decided to do in order to have a harmonized look between my forum and blog so as to have at least %50 similarity since I don’t take the forum as serious as the blog itself.

Must Read : Modification (mods) : Tweaks & Basic Guide to Smf Customization

Now this is the the steps you need  take in order to add the  4 (four) widgets area section to your simple machines forum (smf) site. Also note that this same code will work for many other cms platform that supports  custom htlm codes like vbulletin, phbb, punbb, mybb, joomla, wordpress, blogger, drupal  and the likes.

  • Install a custom html adder mod ;

Smf Mods such as Global header and footer mod, simpleadds mod, simple portals mod, tiny portals mod and advertisement system mod can be used easily for adding custom html and css code in any smf site. just install any and proceed to the next step

  • Copy  and paste the following code in the footer widget section provided by the mod

Now this is the code to copy;

<!------ Footer  Widget by obasimvilla.com starts ------>
<div style="background-color:#EAEEFF;  border:0px; width:100%;">
<table>
<tbody><tr>
 
<!------ Editable area starts ==> You can
Edit this area with your choosen scripts & css------>
 
<td style="margin: 30px; padding: 30px;" valign="top" width="20%">
 
<h3 class="catbg" align="center">1st Widget Title</h3>
 
<!------ start replace this area with your 1st widget html /css code ------>
 
<ul>
<li> <a href="http://forum.3ptechies.com/?action=privacy" rel="follow" target="_blank" class="new_win" title="Terms & Privacy Policy"><span><b>Privacy
 
Policy</b></span></a/></li>
<li><a href="https://www.3ptechies.com" rel="follow" target="_blank" class="new_win" title="Technology Blog"><span><b>Blog</b></span></a/></li>
<li> <a href="http://wikibloggers.org" rel="follow" target="_blank" class="new_win" title="articlesPedia"><span><b>wiki</b></span></a/></li><li><a 
 
href="http://nairatrain.com" rel="follow" target="_blank" class="new_win" title="Our New Social Network "><span><b>Nairatrain</b></span></a/></li>
<li><a href="http://forum.3ptechies.com/index.php?action=recent" rel="follow" target="_blank" class="new_win" title="Recent Forum Post"><span><b>Recent
 
Post</b></span></a/></li>
<li><a href="http://feeds.feedburner.com/obasimvillaforum" rel="nofollow" target="_blank" class="new_win" title="Our RSS Feed"><span><b>Our Rss</b></span></a/></li>
<li><a href="https://www.3ptechies.com/" rel="follow" target="_blank" class="new_win" title="We Design Custom Cms Websites"><span><b>Hire Us</b></span></a/></li>
<li><a href="https://www.3ptechies.com/advertise/" rel="follow" target="_blank" class="new_win" title="Advertise On Obasi Miracle
 
Villa"><span><b>Advertise</b></span></a/></li>
<li><a id="button" href="http://forum.3ptechies.com/?action=about" rel="author" target="_blank" class="new_win" title="Info About Obasi
 
Miracle"><span><b>About</b></span></a></li></ul>
 
<!------ stop replace this area with your 1st widget html /css code  ------>
 
</td>
 
<td style="margin: 30px; padding: 30px;" valign="top" width="20%">
 
<h3 class="catbg" align="center">2nd Widget Title here </h3>
 
<!------ start replace this area with your 2nd widget html /css code  ------>
 
<div style="padding: 10px; margin-bottom: 5px;" class="contentBox" id="subscribeForm">
    <div style="text-align: center; margin-bottom: 10px;">
      <form id="mysubscribeform" method="post" action="http://obasimvilla.us7.list-manage.com/subscribe/post?"
      name="mysubscribeform">
        <input value="1d1c0a7d82f91db328bba6865" name="u" type="hidden" /> <input value=
        "ba46d7cfc3" name="id" type="hidden" />
 
        <div style="margin-bottom: 5px;">
          Email Address: <input value="" size="15" id="MERGE1" name="MERGE0" type="text"
          style="border:1px solid #BBBBBB;font-size:12px;padding:5px;" />
        </div>
 
        <div style="margin-bottom: 5px;">
          First Name : <input name="MERGE2" id="MERGE2" size="15" value="" type="text"
          style="border:1px solid #BBBBBB;font-size:12px;padding:5px;" />
        </div>
 
        <div style="margin-bottom: 5px;">
          Last Name: <input name="MERGE3" id="MERGE3" size="15" value="" type="text"
          style="border:1px solid #BBBBBB;font-size:12px;padding:5px;" />
        </div><input value="Subscribe to list" type="submit" style=
        "-moz-border-radius:5px 5px 5px 5px; background-color:#0066CC; border:1px solid #BBBBBB; color:#FFFFFF;cursor:pointer;font-weight:bold; padding:5px;" />
      </form>
    </div>
  </div>
 
<!------ stop replace this area with your 2nd widget html /css code  ------>
 
</td>
 
<td style="margin: 30px; padding: 30px;" valign="top" width="30%">
 
<h3 class="catbg" align="center">3rd Widget Title</h3>
<div style="margin:auto; text-align:left;">
 
<!------ start replace this area with your 3rd widget html /css code  ------>
 
<script src="http://feeds.feedburner.com/obasimvilla?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a
 
href="http://feeds.feedburner.com/obasimvilla"></a><br/></noscript>
 
<!------ stop replace this area with your 3rd widget html /css code  ------>
 
</div>
</td>
 
<td style="margin: 30px; padding: 30px;" valign="top" width="30%">
 
<h3 class="catbg" align="center">4th Widget Title</h3>
<div align="center">
 
<!------ start replace this area with your 1st widget html /css code  ------>
 
<script src="http://feeds.feedburner.com/obasimvillaforum?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a
 
href="http://feeds.feedburner.com/obasimvillaforum"></a><br/>Powered by FeedBurner</p> </noscript>
 
<!------ stop replace this area with your 4th widget html /css code
==> all your edits must stop at this point ------>
 
</div>
<!------ Editable widget area ends==> Don't edit below this point
else the widget will break in most browsers ------>
<style>
.work{
float:right;margin-bottom:0;font-size:8px;font-color:#999;
}
</style>
<div class='work'>
<a href='https://www.3ptechies.com/how-i-added-4-footer-widget-area-to-my-smf-forum/' rel='dofollow' title='footer area widget for smf' target='_blank'>Get This</a>
</div>
</td>
</tr>
</tbody></table>
</div>
<!------ Footer  Widget by obasimvilla.com Ends ------>


Edit accordingly following the easy guide rooted in the xml comments within the code.

ALSO READ
10 Best Stock Photo Websites For Designers (5 Paid, 5 Free)

You can get recent blog post or recent forum post using google’s feedburner buzzboost

You can place addynamo, google adsense, chitika and bidvertiser adds in any of the widget area by simply replacing this lines or placing your html/ javascript code in between them .

<!—— start replace this area with your ”” widget html /css code  ——>

Your code should be along here

<!—— stop replace this area with your ”’ widget html /css code  ——>

Remove or add to the <td></td> area to increase or reduce your widget area between 2, 3,4, or 5 widgets at the footer section

If your are very comfortable with editing css, you can play around the color and ul lines, you can also use image instead of background color

just make sure you are doing it all right .

Got a question or contribution to make on this ? let’s get it in the comments!

 Related Terms : Add widget like area to simple machines forum, add widget section to smf, mod that can add widget area to smf, add 4 widget area to smf, how to add 3 widget area to smf, editing smf footer area, using feedburner buzzboost at smf footer section

Previous ItemStop Writing “How to” Guides, write about “What to Write”
Next ItemBest Tips For PHP Test Taking Strategies
Obasi Miracle
Obasi Miracle is one of the brains behind 3rd Planet Techies. A webdesign afficionado and IT Support brain-box, he flourishes and revel in helping many-a-techies in their aspiration to become the best they can.

13 COMMENTS

  1. Am back here again,now how do i add this to my wp blog just the way it is on your blog here?

    • Thanks for dropping by Ebima, you can actually do that on genesis framework or child themes by going through your function.php where you have register 3 sidebar widgets and the likes

  2. Hello bro Obasi Miracle thanks for this great share have always loved you for the way you giveaway your codes. Thanks and keep it up

  3. that is really helpful ! but can we have CSS over this code to make footer more customized?

    • Yea sure, you can add a custom css field in your theme css template and call it up by adding the class in the first div section of this code . in my case I used a customized bg image with a fade effect as the background instead of background color

  4. thanks @ obasi the guru himself, well outlined for those that needs it, am still yet to venture into smf forum, for now am still hocking up with the blogger. thanks in advance we have open business proposal.

    • Thanks for those Kind words Kelvin, we are trying to improve day by day

  5. Wow , well explained and written post…am planing on also creating my seperate smf forum apart from my blog so this post will be very useful for mee…thanks for sharing

    • That will really help bro, though managing a forum isn’t one of the easiest things out there

  6. Abdul Ibrahim G Abdul Ibrahim G

    My 3 layout footer is okay for now. But wait… Did you say blogger? Bookmarked! I have a blogger blog needing customization, this would help.

    • Yeah sure, that will help if your theme isn’t footer widget area enabled .

  7. I was actually on mobile when i saw this post and i was keen on seeing it on PC,i must say it looks good and nice,and similar to that on genesis theme.Though not an smf user,i think it will really be nice implementing on your forum
    Thanks obasi for taking out your time to come up with this,more of it pleaseeeeeee

    • Thanks for those kind words Ebimablog, we thought it will be very useful for blog owners that want to add similar footer area to their forum. I also use this exact code for one of my abandoned blog built on the blogger.com cms @ [ obasimiracle.blogspot.com ] though I changed the background color to transparent

LEAVE A REPLY

Please enter your comment!
Please enter your name here