One RSS Button -All of Your Feeds !

Your blogs content is the vital and most important part of your Blog Site , and displaying various RSS buttons for your readers / users to subscribe to your content’s feeds can certainly overcrowd your Theme with unnecessary buttons for all of your RSS & Atom Feeds . Although most of the buttons out there are really beautiful and imaginative ( artistically ) – most users display gazillions of buttons on their site / blog [ along with the 200 ads ] , and this can truly overpower a page and make it crowded aesthetically and quite unbearable , regardless of how great the content may
be .

Disclaimer :

The Following scripts , design & therein , belong to Rogie King of Komodo Media

Rogie King of Komodo Media is def one helluva talented developer, designer [ and quite a generous one at that ]- he not only manages to design some truly great Radical Social Media Buttons such as the : Social Network Pack which is one of the most famous set of social icons being used just about by everyone and on every blogging platform from Blogger , WordPress & Drupal sites ,but Rogie King generously shares all of his creations with users out there .  Rogie’s other sets Sign In w/ Facebook, Twitter , Open ID , and Linked In buttons are all clean & sleek within their design and dont overpower a page .

Most recently Rogie King has also created one of the greatest little plugins by which to display all of your RSS & Atom Feeds - not only from your Blog /Site alone – but from all of your Social Media sites such as : Twitter , Delicious , Digg , and just about any other social Media site where you have feeds . You can visit Rogie Kings site and have a look at the raw code source and download the zip file to this awesome plugin so that you can install it onto your site and get rid of all of those 10 buttons crowding up your page and instead , displaying just one sleek compact RSS Feed Button for all of your RSS & Atom Feeds .

Now what I will give you here is the quick way of how to install this on your Blogger blog site . For WordPress , please visit Rogie Kings site on Komodo Media for the complete breakdown of javascript codes & other markups which some of you may wish to install . However , the version which is on this blog is the complete version out of all the other versions offered in the zip file [ .html ] document . The version offered below can be used for anyone on the Blogger Platform .

In order to install the following RSS JQuery Button into your Blogger Site , please go to your Blogger Dashboard ☛ Layout ☛ Edit HTML ☛ Expand Widgets :

Please scroll down to where you see the ]]></b:skin> tag , and copy the code provided below and paste it into your XHTML document now right below the ]]></b:skin>

Your JQuery Menu CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.feed_menu{background: url(images/feed_menu_orange.png) 0 center no-repeat;
padding:2px 0;
display:-moz-inline-box;display:inline-block;width:38px;
vertical-align:middle;
overflow: hidden;
margin:0 .25em;
}
.feed_menu select{
    opacity:0;
    margin:0;
    padding:0;
    border:0;
}
.feed_menu option img{
    border:0;
    margin:2px;
    vertical-align: middle;
}

After pasting the CSS right below your ]]></b:skin> please go to the next set of codes below .

Click on image to view live example of various RSS examples

Sleek RSS Buttons in 4 flavors below

Choose your Desired button & click for download

*Transparent for Light backgrounds

Woodgrain for any background

Orange for any background

Azure / for any background

**Transparent Dark- for Dark Backgrounds

After you have downloaded your desired button , please upload it to your image host such as Photobucket or TinyPic or any other upload host you use – you can even upload your images on your Blogger blog .

Once you have downloaded the RSS button of your choice, place the image URL into the line of your CSS ( where it states : images/feed_menu_orange.png .

# 2 ) :

please copy the next set of source codes now and place them directly below the ]]></b:skin> tag, where you have placed the CSS , and while you have replaced your Menu IE.CSS file , your MENU JQuery.js file , and your Menu.js file into the areas below.

1
2
3
4
5

 
<link rel="stylesheet" href="http://dl.dropbox.com/u/2466162/FEED_MENU_RSS/feed_menu.css" type="text/css" media="all" />
		<!--[if IE]>
<link rel="stylesheet" href="http://dl.dropbox.com/u/2466162/FEED_MENU_RSS/feed_menu_ie.css" type="text/css" media="all" />
		<![endif]-->

Your JQuery Files

1
2
3
4
5

<script type="text/javascript" src="http://dl.dropbox.com/u/2466162/FEED_MENU_RSS/jquery.js"></script>
  		<script type="text/javascript" src="http://dl.dropbox.com/u/2466162/FEED_MENU_RSS/feed_menu.js"></script>
		<script type="text/javascript">
			$ = jQuery;
		</script>

Your Link Files Set Up within your CSS

Place the following between your <head></head> tags , and replace with your own Info !

1
2
3
4

<link href='http://feeds.feedburner.com/YOUR_FEED_BURNER_NAME' rel='alternate' title='YOUR TITLE' type='application/rss+xml'/>
<link href='http://del.icio.us/rss/YOUR_DELICIOUS_USER_NAME' rel='alternate' title='USER_NAME del.icio.us bookmarks' type='application/rss+xml'/> 
<link href='http://twitter.com/statuses/user_timeline/1235678.rss' rel='alternate' title='My Twitter RSS Feed' type='application/rss+xml'/>
<link href='http://twitter.com/statuses/user_timeline/91011123.atom' rel='alternate' title='My Twitter ATOM Feed' type='application/atom+xml'/>

Your RSS HTML Div

Copy the HTML example below and place it anywhere within your HTML document where you would like it to be or create as a widget & hit Save !

1
2
3
4
5
6
7

 
<p><span class='jquery_feed_menu_example_7' style='padding:1em 0.5em;margin-right:0.5em;float:left;margin-right:10px;'/> </p>
<script type='text/javascript'>//<![CDATA[
var fm7= new FeedMenu(null,'trans_on_light');
fm7.write('.jquery_feed_menu_example_7');
//]]>
</script>

You may now pat yourself on the back & Enjoy your new JQuery RSS & Atom Menu Feed Button – and your readers will also
The beauty about this button is : Not only does it display all of your RSS & Atom feeds , but the second great thing about it is that once a user does in fact Subscribe to your Feeds , and clicks on any of the Feed Subscriptions , they Dont get Redirected to any other page ! ! This is the second great thing I love about this button & so will all of your readers .

For anyone wishing to implement this into their WordPress Blog / Site , as mentioned in the beginning : Please visit Rogie Kings site over @ Komodo Media , and download the zip file there – and just follow the steps provided here ( there isnt much difference in the mode of implementation ) , and I am certain if you know how to use WordPress , you will not have difficulty within installing this awesome JQuery RSS /Atom feed Button . Enjoy !