Written on July 8, 2010 at 9:28 pm by Tracy Matthewman

WordPress Newbies: How To Setup Your Sidebars (Widgets)

Filed under Blogging 2 comments

Hi, Nice to see you again. Feel free to leave a question in the comments if you're unsure about something. I'll do my best to get back to you asap!

I’ve had a few people on my team ask me how to setup their sidebars on their blog. So instead of just walking them through it over the phone, I thought I’d make a video with all the instructions AND all the source code and graphics you’ll need. Keep in mind there are a lot more training videos in my Sweet Leads Training .

Plus I found a really cool piece of software that allows you to make simple submit buttons for your forms.

Anyways…here’s the video..the source code and other bits are below. If you have any questions…feel free to post them in the comments below and I’ll do my best to answer all of them.

I made this video really quickly and off the cuff so please excuse the lack of focus in some spots

Here’s the codes:

Subscribe / Offer code. The highlighted section is where you insert your own from from your autoresponder.

<style type=”text/css”>
<!–
.style1 {
font-family: Tahoma, “Arial Black”;
color: #af0100;
font-weight: bold;
font-size: 16px;
}
.style2 {
color: #333333;
font-size: 16px;
font-family: Tahoma, “Arial Black”;
}
–>
</style>
<div align=”center”>
<p>
Eventually You May Run Out Of Warm Leads. Download “Sweet Leads” Training Course To Learn How To Jumpstart Your Online Presence And Start Generating Leads Today<br>
<span>Yours Free. A $247 Value<br>
</span></p>

<form method=’POST’ action=’http://www.networkmarketingsweetie.com/cgi-bin/arp3/arp3-formcapture.pl’>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”2″>
<tr>
<td width=”40%” scope=”col”>
<div align=”right”><font color=”#999999″ size=”2″ face=”Tahoma”><strong>Your Name:</strong> </font></div>                        </td>
<th width=”60%” scope=”col”>
<div align=”left”>
<input type=’text’ name=’first_name’ size=’20′>
</div>                        </th>
</tr>
<tr>
<td>
<div align=”right”><font color=”#999999″ size=”2″ face=”Tahoma”><strong>Your Email:</strong> </font></div>                        </td>
<td><input type=’text’ name=’email’ size=’20′></td>
</tr>
</table>    <input type=’hidden’ name=’subscription_type’ value=’E'> <br><input name=”submit” type=”image” id=”submit” src=”http://www.networkmarketingsweetie.com/optinforms/images/red/redfooterwidget.png“>
<input type=’hidden’ name=’tracking_tag’ value=’sweetleadsoptinpop’>
<input type=’hidden’ name=’id’ value=’1′>
<input type=’hidden’ name=’extra_ar’ value=”>
<input type=’hidden’ name=’first_name_man’ value=’1′>
</form>
</div>

Social Media Buttons Code (I’ve highlighted the areas you’ll want to change.)

Yellow highlighted areas are where you put the links to your social media pages.

Blue highlighted areas are where you put the links to the images that you get from your media library after you upload the images you want to use.

In my particular instance the BetterNetworker.com image comes directly from the Better Networker server. They provide the link for that.

<table width=”250″ border=”0″ align=”center” >
<tr>
<td><a href=”http://www.facebook.com/pages/Network-Marketing-Sweetie/288330314748“><img src=”http://www.networkmarketingsweetie.com/images/socialmedia/facebook-64×64.png” alt=”Be my fan on Facebook”></a></td>
<td><div align=”right”><a href=”http://www.twitter.com/tracyselena“><img src=”http://www.networkmarketingsweetie.com/images/socialmedia/twitter-64×64.png” alt=”Follow me on Twitter”></a></div></td>
<td><div align=”left”><a href=”http://www.youtube.com/thenetworkingsweetie“><img src=”http://www.networkmarketingsweetie.com/images/socialmedia/youtube-64×64.png” alt=”Watch my videos on YouTube” ></a></div></td>
<td><a href=”http://networkmarketingsweetie.com/feed“><img src=”http://www.networkmarketingsweetie.com/images/socialmedia/rss-64×64.png” alt=”Keep in in the loop with RSS”></a></td>
</tr>
</table>
<center><a href=”http://www.betternetworker.com/user/26102?code=2d75d68c25e72ef4f1e8b6895930e64a” target=”_blank”><img src=”http://static.betternetworker.com/seal.php?uid=26102&img_id=2“></a>
</center>

Here’s the code for the affiliate links/buttons. Please note highlighted areas as well.

<center>
<a href=”https://katiefreiling.infusionsoft.com/go/TUT/tracysel” target=_blank><img src=”http://theunifiedtribe.com/aff/banners/katie-4.gif” border=0></a><br>
<a href=”http://tracyselena.getwwn.com” target=”_blank”><img src=”http://www.mymagneticoffice.com/assets/images/banners/wwn/125×125.jpg” width=”125″ height=”125″ border=”0″ /></a> <a href=”http://tracyselena.trafficformula2.com” target=”_blank”><img src=”http://wpc.096D.edgecastcdn.net/00096D/images/mlmtf2/125x125_mlmtf2.jpg” width=”125″ height=”125″ border=”0″ /></a>
<a href=”http://tracyselena.blackbeltrecruiting.com” target=”_blank”><img src=”http://www.mymagneticoffice.com/assets/images/banners/bbr/125×125.gif” alt=”" width=”125″ border=”0″ /></a> <a href=”http://tracyselena.magneticsponsoringonline.com” target=”_blank”><img src=”http://www.mymagneticoffice.com/assets/images/banners/ms/125×125.gif” width=”125″ height=”125″ border=”0″ /></a>
</center>

Here is a download for all my social media icons. There are a lot of them…so pick ones that are a nice size for your theme and go with that. DOWNLOAD LINK HERE.

And to create a cool button for your autoresponder you can use this software…it’s free, but only available for PC: CLICK HERE FOR FREE BUTTON CREATION SOFTWARE

Oh and one last thing..once you make your button for your autoresponder like mine here:

(No this is not an active link)

Just use your Media section of your back office to upload it…grab/copy the url for it and replace it in the code above where I have mine highlighted in pink.

I hope that helps a lot of you “newbies” get a better start…Again, ask any questions below..