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)

Mp3 and video player - 21 Oct 2016 12:48
Mail to all moderators - 10 Jun 2015 09:34
Put comments in the editor that won't show - 05 Jun 2015 09:39
Carousel - 24 May 2015 01:18
Modal Image - 01 May 2015 17:20
Todo List with Data Forms - 30 Apr 2015 14:59
Countdown timer - 22 Dec 2014 08:31
Html(embed) code opening in new window/tab - 29 Oct 2014 09:05
Todo List - 18 Aug 2014 15:28
Bootstrap Image Box - 19 Jul 2014 01:27
Extended NewPage Module - 15 Jul 2014 15:08
Facebook Button - 27 Dec 2013 15:03
Togglecheck - 17 Dec 2013 20:27
Alternative Specific Users Only - 11 Dec 2013 18:04
Image Box - 10 Dec 2013 03:14
Sorted-ListPages-List - 19 Aug 2013 15:56
Specific Users Only Include - 24 Jul 2013 06:16
Toggle Tag - 19 Jul 2013 11:13
Pretty Tables - 29 May 2013 06:14
Custom Page Title - 29 May 2013 06:04
Hide Tags - 14 Feb 2013 21:35
Multicolumn Layout - 17 Dec 2012 19:51
404 (Page does not exist) Redirect - 20 Nov 2012 11:40
Custom HTML Blocks - 25 Oct 2012 11:30
Per-User CSS - 07 Aug 2012 04:05
iframe Redirect - 30 Jul 2012 22:41
Plurality Checker - 16 Jul 2012 03:21
Identi.ca feeds on your site - 12 Jun 2012 18:51
Genuinely Random Link Generator - 31 May 2012 16:28
Mini Chat Area - 15 May 2012 12:04
Chatbox - 26 Mar 2012 11:07
Google +1 Button - 19 Mar 2012 19:40
Per Category CSS Module - 06 Mar 2012 03:38
Advanced Search - 25 Feb 2012 12:29
This Site Last Updated... - 16 Feb 2012 02:37
Zoho Writer - 16 Feb 2012 01:57
Zoho Sheet - 16 Feb 2012 01:56
Zoho Show - 16 Feb 2012 01:55
Zoho Polls - 16 Feb 2012 01:53
Yahoo! WebPlayer - 16 Feb 2012 01:53
WoW Tooltips - 16 Feb 2012 01:52
Wishlist - 16 Feb 2012 01:52
Widgetbox Panel - 16 Feb 2012 01:52
Welcome - 16 Feb 2012 01:52
Voicethread - 16 Feb 2012 01:51
Vimeo - 16 Feb 2012 01:51
Video Quiz - 16 Feb 2012 01:51
Video Player - 16 Feb 2012 01:50
Video from Revver - 16 Feb 2012 01:50
Using Divs - 16 Feb 2012 01:50
URL Title with Slash Redirect - 16 Feb 2012 01:49
Tweet Button - 16 Feb 2012 01:49
Top Nav Menu with ListPages - 16 Feb 2012 01:48
TOC's from many pages - 16 Feb 2012 01:47
Thumbnail page list using ListPages - 16 Feb 2012 01:47
Thumbnail images with caption - 16 Feb 2012 01:46
Teachertube - 16 Feb 2012 01:46
Tags as variables - 16 Feb 2012 01:46
Tabs - 16 Feb 2012 01:45
Table Alterations - 16 Feb 2012 01:45
Syntax Highlighter - 16 Feb 2012 01:45
Standalone Page Buttons - 16 Feb 2012 01:44
Sproutbuilder - 16 Feb 2012 01:44
Social Bookmarking - 16 Feb 2012 01:42
Slideshare - 16 Feb 2012 01:42
Slideboom - 16 Feb 2012 01:42
Slideaware - 16 Feb 2012 01:41
Simple Gallery - 16 Feb 2012 01:41
Show A YouTube Video Saved On Your Page - 16 Feb 2012 01:41
Shoutbox.Us - 16 Feb 2012 01:40
Search and tags in the same page! - 16 Feb 2012 01:40
Schooltube - 16 Feb 2012 01:40
Schedules - 16 Feb 2012 01:40
Remove Duplications - 16 Feb 2012 01:39
Remember The Milk Todo - 16 Feb 2012 01:39
RegExp Date Wizard - 16 Feb 2012 01:39
Reflections - 16 Feb 2012 01:39
Referencing to a Common Reference Page - 16 Feb 2012 01:38
Redirect: To - 16 Feb 2012 01:37
Recent Changes (mini) - 16 Feb 2012 01:36
Rating Summary - 16 Feb 2012 01:35
"Random Page!" link - 16 Feb 2012 01:35
Use any html code on a page - 16 Feb 2012 01:34
Quoted Blockquotes - 16 Feb 2012 01:33
Quimble Poll - 16 Feb 2012 01:33
Quikmaps Maps - 16 Feb 2012 01:33
Previous Next - 16 Feb 2012 01:32
PollDaddy - 16 Feb 2012 01:32
Poll - 16 Feb 2012 01:31
Playlist - 16 Feb 2012 01:31
Pictures with the text under it - 16 Feb 2012 01:31
Picasaweb - 16 Feb 2012 01:30
picasa flash - 16 Feb 2012 01:30
Photobucket Widget - 16 Feb 2012 01:29
Page Previews (Snap.com) - 16 Feb 2012 01:29
Page Collections and Sequence Boxes - 16 Feb 2012 01:28
Pabpixies Gadgets - 16 Feb 2012 01:28
Os Detection - 16 Feb 2012 01:27
Ohloh - 16 Feb 2012 01:27

page 1 of 212next »

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