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

[seekingff]

Hey Guys,

I'm just over 2 weeks into my Thesis powered blog. I've made a ton of progress with all the great tips I've found here in the forums. Thesis really rocks

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!

[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>

[seekingff]

I thought maybe creating an image with the matching background color as my widget might do 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.

[kingdomgeek]

If this is the code you are using to display the button:

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

Try adding class="submitimg" to that code, like this:

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

Then in your custom.css stylesheet you could maybe add:

.custom .submitimg { border: 0; }

[cricket66]

Seekingff,

Your first email box appears to be an AWeber signup. Are you giving that up for feedburner email? What would be the advantage?

I ask because I have an AWeber account. I'll be using the RSS feed, but want to keep ability to send enewsletters to subscribers.

Just trying to clear this all up since I know there have been other discussions about using Feedsmith plugin rather than direct to Feedburner with Thesis option.

Hope this rambling makes sense!

[seekingff]

Rick:

Awesome. It worked perfectly. Thanks for chiming it with your expertise, I would of never figured it out by myself! Here's the result.


cricket66:

The first box was also for the feedburner email subscriptions. I just styled it to look that way.

[landonray]

Sorry. Newbie.

Where does all that widget code go?

L

[seekingff]

It's all placed in a text widget on sidebar #2.

[kristarella]

Nice work seekingff!

I'm glad you made your own button too, I wasn't quite comfortable with you using the exact same one as PB.

[seekingff]

Originally Posted by kristarella

Nice work seekingff!

I'm glad you made your own button too, I wasn't quite comfortable with you using the exact same one as PB.

Thanks for the feedback. I'm really pleased with the progress I've made with Thesis thanks to all the great tips & support here on the forums.