Creating a RSS Widget like that on Problogger (see screenshot)

[seekingff]

Hey Guys,

I'm just over 2 weeks into my my blog.

I plan to continue to build my blog throughout the remainder of August and then go on a marketing blitz to really get some traffic coming in.

I want to have a simple well designed widget in place to allow for easy RSS and email subscriptions via feedburner. The effect I want to achieve is one similiar to the one used on Problogger. (see screenshot).



I'm still relatively new to .css coding so I'm not sure where I need to start to create a widget like this. Can anyone point me in the right direction?

Thanks in advance!

[PaulR]

Originally Posted by seekingff

I want to have a simple well designed widget in place to allow for easy RSS and email subscriptions via feedburner.

You can get the subscription tools from feedburner, or WordPress › FeedBurner Widget « WordPress Plugins .

Best of luck

[seekingff]

Paul,

Thanks for the reply. I am using feedburner, have been for some time, but what I was wanting to do was create a really nice looking widget to replace the standard 'subscribe in a reader' button that feedburner provide, like that seen on Problogger.

[PaulR]

Originally Posted by seekingff

Paul,

Thanks for the reply. I am using feedburner, have been for some time, but what I was wanting to do was create a really nice looking widget to replace the standard 'subscribe in a reader' button that feedburner provide, like that seen on Problogger.

Try the plugin it has alot of styling options.

All problogger is doing is editing/styling the code that you get from feedburner.

[seekingff]

Paul,

Thanks again for the reply. I tried the plugin. The only thing it does is allow you to change the body & text colors on the feed count chicklet. I see no point in using this widget since all that can already be done from your feedburner account.

The effect I'm trying to duplicate is having a sidebar widget that looks like this:

[seekingff]

I've been playing around with some code and have made some progress on this. I now have a working sidebar widget that looks like the following screenshot that allows readers to subscribe to my feed via RSS or email using feedburner.


The only other thing I want to do is remove the box around the subscribe button. Anyone know how to do this?

Here's the code I'm using for this widget.

<div class="callout">
<a href="http://feeds.feedburner.com/SeekingFinancialFreedom"><img src="http://www.seekingff.com/images/rss-icon.gif" border="0"> Subscribe via RSS</a><br><br>
or, subscribe via email:<br>
<form style="border:0px solid #ccc;padding:0px;text-align:left; background-color:#e3f0f2" action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2043628', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" style="width:140px" name="email"/><input type="hidden" value="http://feeds.feedburner.com/~e?ffid=2043628" name="url"/><input type="hidden" value="Seeking Financial Freedom" name="title"/><input type="hidden" name="loc" value="en_US"/><input type="image" src="http://www.seekingff.com/images/sub_button.gif" border="0" alt="Subscribe"></form>
<br>
<a href="http://www.seekingff.com/email-updates/"><img src="http://www.seekingff.com/images/question-mark.gif" border="0"> More info on this...</a><br><br>
</div>

[PaulR]

That is part of the buttons background color.

I made one real quick and tried to match up the color the best I could.

[seekingff]

Thanks for the reply and for creating that button. I thought we had it.

I created a new button, orange this time, with a matching background color and uploaded it to my site.



However, the border still remains. I was looking at the actual code on problogger.

<input id="zoosbmt" type="image" src="http://www.problogger.net/wp-content/themes/problogger2/images/sub_button.gif" alt="Subscribe" class="subbutton" />

I think it may have to do with the input id="zoosbmt" or the class="subbutton" because I do not have either of these in my code. I'm guessing I would have to add some code to my stylesheet for these and then call them in my code. I just don't know what code to add.

[PaulR]

I'll make an orange one if you like. I just tested it, and the button I made blends in pretty darn well.

[seekingff]

Originally Posted by PaulR

I'll make an orange one if you like. I just tested it, and the button I made blends in pretty darn well.

Paul,

The border had nothing to do with the image. I already created an orange button with the same background color as the widget and the border was still present.

I figured it out though using CSS to remove the border.

I added this code to my stylesheet:

.submitimg { border: 0; }

and then just added class="submitimg" to the image.

<input type="image" src="http://www.seekingff.com/images/sub_button.gif" border="0" alt="Subscribe" class="submitimg" />

I'm quite pleased with result.


Thanks though for working through this with me.