Create an RSS Feed Button with Caption

By (user deleted)

Description

Wikidot provides some interesting ready-made RSS Feeds that you can offer to the public at http://community.wikidot.com/help:rss#toc3. If you're like me, getting that RSS feed URL into a nice button and caption that fits into your side-bar may not be self-evident. Here are the steps:

Code

1. First you need to decide which RSS Feed you want to make available. For my example, I'll just use the "any changes" feed which is http://your-wiki-site-name.wikidot.com/feed/site-changes.xml

2. Next you need an RSS icon. For the example below, I used a small, horizontal icon that measures 36 x 13 pixels called rss-feed-blue.gif.

4. Once you have your icon, upload it to nav:side (or to some other page), using the Files…Upload a file…etc. at the bottom of the page.

4. Now open up your side-bar page for editing, place your cursor where you want the RSS Feed button to appear, and insert the hyperlink as follows:

[*http://your-site.wikidot.com/feed/site-changes.xml Get RSS Feed]

5. Now you have a link to the RSS Feed, which may be all you want, but I wanted a button to accompany the link. If you want that too, keep going…

6. Turn your link into a Div section by adding [[div]] and [[/div]] before and after the code. Also give the section an appropriate class name as follows:

[[div class="RSS-Button"]]
[*http://your-site.wikidot.com/feed/site-changes.xml Get RSS Feed]
[[/div]]

What this does is it gives you a handle you can use to apply CSS code for formating.

7. Now add a CSS module at the beginning of the page as follows:

[[module css]]

[[/module]]

The CSS module allows you to insert CSS code into any wiki page without adding it to your theme's style page. Pretty cool hugh?

8. Within that module, add the CSS code that will add an image to the background of the RSS Feed link that you created above. Notice that I'm placing the image to the left and center of the link. Notice also that I allowed 38 pixels of space to the left of the link. That is the length of the icon plus a couple pixels more to add some space between it and the link. The code should look like this when you're done:

[[module css]]
div.RSS-Button a {
    background: transparent url(http://your-site.wikidot.com/local--files/nav:side/rss-feed-blue.gif) no-repeat left center;
    padding-left: 38px;
}
[[/module]]

[[div class="RSS-Button"]]
[*http://your-site.wikidot.com/feed/site-changes.xml Get RSS Feed]
[[/div]]

That's it! If all worked, then you should have something that looks like the example below.

In action


Thanks to tsangk for this great snippet: conditional-blocks


text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]



Other snippets posted by (user deleted)

Module Feed Drilldown: Details Page - 16 Feb 2012 01:24
Module Feed Drilldown - 16 Feb 2012 01:24
Module Feed: Collapsible - 16 Feb 2012 01:23
Module Categories - 16 Feb 2012 01:23
MiniRecentPosts With Limit - 16 Feb 2012 01:23
Minialist theme - 16 Feb 2012 01:22
Mimic Colspan With Multiple Tables - 16 Feb 2012 01:21
Mibbit - 16 Feb 2012 01:21
Meebo me - 16 Feb 2012 01:20
Making default templates work - 16 Feb 2012 01:20
ListPages: Horizontal? - 16 Feb 2012 01:20
Layout With Tables - 16 Feb 2012 01:19
LaTeX Table - 16 Feb 2012 01:19
"Last Changes" - Double Panel - 16 Feb 2012 01:17
Js Kit Ratings - 16 Feb 2012 01:15
Jotform - 16 Feb 2012 01:14
JavaScript Addition - 16 Feb 2012 01:14
Java Applets - 16 Feb 2012 01:13
jamendo widgets - 16 Feb 2012 01:13
Invisible edit-sections button with fixed screen position - 16 Feb 2012 01:12
Instacalc - 16 Feb 2012 01:12
Indent - 16 Feb 2012 01:12
Include Any Page - 16 Feb 2012 01:11
Import the Digg Feed - 16 Feb 2012 01:11
Import a News Feed - 16 Feb 2012 01:10
iframe embed - 16 Feb 2012 01:08
Google YouTube Videobar - 16 Feb 2012 01:06
Google Translate - 16 Feb 2012 01:06
Google Maps - 16 Feb 2012 01:05
Google Gadgets - 16 Feb 2012 01:05
Google Document - 16 Feb 2012 01:04
Google Analytics - 16 Feb 2012 01:04
Glossary - 16 Feb 2012 01:03
Gametrailers - 16 Feb 2012 01:03
Gadget. Calendar - 16 Feb 2012 01:02
Gabbly chat - 16 Feb 2012 01:02
Forum Summary for the Front Page - 16 Feb 2012 01:02
Footnotes - 16 Feb 2012 01:01
Foldable List - 16 Feb 2012 01:01
Flickr Video - 16 Feb 2012 01:01
Flickr Images By Tags - 16 Feb 2012 01:00
Feedburner - 15 Feb 2012 00:53
Find untagged pages - 15 Feb 2012 00:52
Feed And Zoho Creator Integration - 15 Feb 2012 00:52
Feed Aggregator - 15 Feb 2012 00:52
Fancy <hr> Dividers - 15 Feb 2012 00:51
Extra Side Bar - 15 Feb 2012 00:51
Embed your latest Twitter tweets - 15 Feb 2012 00:50
Embed Code From Other Services - 15 Feb 2012 00:50
EditGrid Spreadsheets - 15 Feb 2012 00:49
Easy Table Title Footers - 15 Feb 2012 00:49
Drop Caps - 15 Feb 2012 00:48
Display Random YT Video - 15 Feb 2012 00:48
Delicious Linkrolls - 15 Feb 2012 00:48
Dailymotion - 15 Feb 2012 00:42
Custom Toolbar Separators - 15 Feb 2012 00:41
CSI Cross site includes - 15 Feb 2012 00:40
Cornify - 15 Feb 2012 00:39
Conditional Blocks - 15 Feb 2012 00:36
Compact Feed Display - 15 Feb 2012 00:35
Collapsible Text Block - 15 Feb 2012 00:35
Collapsible Block Unleashed - 15 Feb 2012 00:33
Choose A Page! - 15 Feb 2012 00:32
Center Video - 15 Feb 2012 00:28
Cbox chatroom - 15 Feb 2012 00:28
Category Templates And Newpage - 15 Feb 2012 00:27
Categories - 15 Feb 2012 00:27
Calc5 - 15 Feb 2012 00:27
Block In Fixed Position In Browser - 15 Feb 2012 00:26
Blip TV - 15 Feb 2012 00:26
Bibliography/Footnotes/Comments Listed in TOC - 15 Feb 2012 00:26
Babelfish Translation - 15 Feb 2012 00:25
Automatic Sitemap - 15 Feb 2012 00:25
Animoto - 15 Feb 2012 00:23
Alexa traffic ratings - 15 Feb 2012 00:23
Adding A Site Logo - 15 Feb 2012 00:23
3d tagcloud - 15 Feb 2012 00:22
Custom Permissions Error Message - 14 Feb 2012 03:42
New Tabview - 24 Oct 2011 23:53
Random Page - 18 May 2011 09:50
Previous and Next Navigation With ListPages - 24 Nov 2010 15:14
Redirect - 11 Feb 2010 10:00
Spoiler tags - 03 Nov 2009 13:30
How to format wikidot pages using HTML - 04 Aug 2009 15:05
Redirect: From (1st) - 01 Mar 2009 18:18
Redirect: From (2nd) - 01 Mar 2009 18:17
WEB 2.0 tools for Database - 16 Oct 2008 10:48

page 2 of 2« previous12

Rate this solution

If you think this solution is useful — rate it up!

rating: +6+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License