examples for custom widgets: FeedBurner, AdSense and more.

In this post you´ll find a few examples (with HTML source code) for certain custom widgets like a FeedBurner e-mail subscription box, AdSense ads, a featured product or Youtube video, etc …

With these examples and the instructions given in the article about customizing sidebars, you should be able to add any sort of custom content to the sidebar of your Web 2.0 SEO WordPress Theme.

1. FeedBurner e-mail subscriptions
2. Google AdSense
3. Image ads (buttons and banners)
4. Featured YouTube video


1. FeedBurner e-mail subscription box

Step 1: Load the sidebar template (sidebar.php) into the editor and add a new widget to your theme´s sidebar. Simply use the HTML code below:

<li><h4>Email Subscriptions</h4>
<ul>
<li>

FEEDBURNER CODE

</li>
</ul>
</li>

Step 2: Log into your FeedBurner account, go to “MyFeeds” and select the feed for which you want to create an e-mail subscription box. Click on the “Publicize” tab and under “Services” on the link “Email Subscriptions“. Copy the HTML code for the subscription form and return to your theme editor and replace “FEEDBURNER CODE” with the HTML code that you just copied from FeedBurner. Your sidebar widget should now look something like this:

<li><h4>Email Subscriptions</h4>
<ul>
<li>

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1234567', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><
input type="hidden" value="http://feeds.feedburner.com/~e?ffid=1234567" name="url"/>
<input type="hidden" value="FEEDTITLE" name="title"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" />
<p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p></form>

</li>
</ul>
</li>

If you are comfortable with HTML and CSS, you may want to modify the appearance of the FeedBurner form and also the copy above the form. And if you like, you can also add the “FeedCount” chicklet below the form. You´ll find the code for the “FeedCount” under “Publicize> Services > FeedCount” in your FB account.


2. Google AdSense advertisements

There are different dimensions of AdSense ad-blocks that fit well into your theme´s sidebar. You may want to display the ads inside a box with borders or without the borders. Below you find the code for both options.

Step 1: Load the sidebar template (sidebar.php) into the editor and choose a place between existing widgets for your Google AdSense block. Copy either of the codes below and paste it into your sidebar template.

A: Inside a widget box (i.e. with borders)

<li><h4>Sponsor Ads</h4>
<ul>
<li>

ADSENSE CODE

</li>
</ul>
</li>

B: Without borders

<li style="background: none"><h4 style="background: none">Sponsor Ads</h4>
<ul style="background: none">
<li>

ADSENSE CODE

</li>
</ul>
</li>

Step 2: Replace “ADSENSE CODE” with the Google AdSense javascript code for your chosen ad block.


3. Images (ad banners, e-book covers, …)

To insert images into your sidebar, you can create a custom widget with or without borders like shown above for Google AdSense ads and instead of the AdSense code, you simply insert the HTML source code of your images. Just make sure you know the dimensions of your images so that they fit into the sidebar.

Example: vertical banner ad, widget without borders, no heading

<li style="background: none">
<ul style="background: none">
<li>

<img src="IMAGE_URL" width="160" height="600" alt="cool gadgets" />

</li>
</ul>
</li>


4. Featured YouTube video

To embed a video into your blog´s sidebar, the sidebar should have a reasonable width, I´d say at least 200 pixels. YouTube videos have a default width of 425 pixels and a height of 344 pixels, but you can resize them to make them fit into your sidebar. You just need to make sure that the width/height relation stays the same. Here´s how to calculate it:

Assuming your sidebar is 210 pixels wide and you want to reduce the video to 200 pixels width (I´d leave 5px space on each side), you can calculate the new height as follows:
344 / 425 x "new width" = "new height"
344 / 425 x 200 = 162

Now that we know width and height for the video, let´s put it into the sidebar.

Step 1: Load the sidebar template (sidebar.php) into the editor and choose a place for the video between or above existing widgets. In this case, it´s better not to use borders around the widget, so let´s use this code for the widget:

<li style="background: none"><h4 style="background: none">Featured Video</h4>
<ul style="background: none">
<li>

YOUTUBE CODE

</li>
</ul>
</li>

Of course, you can change the “Featured Video” heading or remove it completely if you prefer.

Step 2: Go to YouTube.com and copy the HTML code from the “embed” field beside the video. Then go back to the theme editor and replace “YOUTUBE CODE” with the video embed code.

<li style="background: none"><h4 style="background: none">Featured Video</h4>
<ul style="background: none">
<li>

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/CdUjFYd8J78&hl=de&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/CdUjFYd8J78&hl=de&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

</li>
</ul>
</li>

Step 3: Update width and height properties for the “object” and the “embed” elements to resize the video. In our example, we would change width=”425″ to width=”200″ and height=”344″ to height=”162″

Social Bookmarks: - (what´s this?) - spread the word!

Stumble Delicious Technorati Digg Reddit socialmarker(more bookmarking services)

3 Comments »

  1. Comment by:
    Jeromy

    Good post, Thanks for the information.

    I am using Feedburner for my feed. I was playing around with it and am not sure if I have it set up right. Do you have any suggestions for checking to ensure that one has set everything up properly?
    I think this is a must for delivering your feed.

    Cheers!

    Jeromy

  2. Comment by:
    Template Sales

    Thank you! I was looking for adsense advertising widget!

  3. Comment by:
    wordpress tutorial

    Its a good point that if you want then you can change the “Featured Video” heading or remove it completely if you prefer.

RSS feed for comments on this post. TrackBack URI

Leave a comment

If you want to leave a feedback to this post or to some other user´s comment, simply fill out the form below.