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.

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.

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

How to Install the 4 footer widget area section code in your smf website:

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.

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