BlogHarbor weblogs automatically create RSS newsfeeds for your blog, not only for the blog as a whole, but for each category as well.

A standard component is installed on your blog called Category RSS Feed which is designed to be used as part of your header and link to the RSS feed for the category being viewed. Also available is a header component called RSS Link which links to your blog's main RSS feed. This article will show you how to create a component for the left or right sidebar of your weblog, which will show a link not only to the main RSS feed for the weblog, but also for the Category RSS feed based on the page being viewed. This component, as seen on the sidebar of the BlogHarbor demo blog, will dynamically change depending on the Category of the page being viewed.

Note: Recent BlogHarbor weblogs have this component built-in, and it is not necessary to create this component.
  • When you see this component on the Main Page, only one link will appear: the XML icon will point to the main RSS feed for the entire blog, located at the path /blog/index.xml.
  • When this component is viewed from the Photos Category for example, 2 icons will appear: one for the main RSS feed, and an additional link to the RSS feed for that specific category of the blog, located at the path /blog/Photos/index.xml.

This capability of providing category-based newsfeeds allows your readers to subscribe their RSS newsreader to one specific category of your weblog. If your weblog features a variety of topics or is updated often, your readers may prefer to subscribe to specific categories of your blog rather than to the entire blog. We hope that this component will provide your readers with a better understanding of the multiple RSS newsfeeds available on your weblog.

Adding the Orange XML Icon

Often a site will identify its RSS Syndication newsfeed with the orange XML icon:

To identify the RSS feed of your weblog using the orange XML icon, you will need to upload the icon to your weblog using the FileManager.

Note: All BlogHarbor weblogs are created with the XML icon available at the path /xml.gif. Check the File Manager to see if the image is already installed on your blog; if so, then skip this step and go to the Creating the Custom Component step.

Right-click on the orange XML icon above and download it to your own computer. Now let's upload the image to your weblog using the following steps:

  1. Login to your Blog Control Panel. Click the File Manager tab at the top of the Control Panel. The File Manager provides you with a system for managing your blog's files similar to the system of files and folders on your computer's hard drive.
  2. It is often useful to organize your images in directories, so let's create a directory named images. In the box next to the words Create subdirectory: at the top right side of the page, enter images and click Create.
  3. The File Tree on the left side of the File Manager page shows the hierarchy of folders in your blog. Click on the images directory to navigate into it. Now let's upload an image file into this directory. Click on the Browse button in the Upload New File section. A File dialog will appear that will allow you to browse your hard disk and select the file you wish to upload. Find the file xml.gif file you downloaded to your computer earlier and select it.
  4. When you have selected the file, click on the Upload button. The Upload button will change its appearance so that it says "Uploading" and a progress bar will appear below it to indicate that your image file is uploading. Once your image has been uploaded, the File Manager page will be refreshed and the File Contents List will show your new file. In the screenshot below, you will see that we have uploaded a file named xml.gif.

Creating the Custom Component

Now we've got the xml.gif icon uploaded to the weblog, and we're ready to use it in the Custom Component we're going to create.

  1. Log into the BlogHarbor Control Panel if you haven't already, and click on the Look and Feel tab at the top.
  2. Now you are in the Layout Manager; Click on the Advanced tab. The first thing you will see at the top of the page is the Custom Component tool.

    Layout_Manager_AddCustComp.gif

  3. The Name box is used to identify Components within the Layout Manager, the Name will not be visible on your weblog. Enter a Name that you will find easy to associate with the contents of this component, like Dynamic Category RSS Feed.

  4. Copy the following text and paste it into the content area: 

    {{if category.label eq "Main Page"}}
<!-- Dynamic RSS Custom Component START -->
  <div class="component">
    <div class="componentHead">RSS Newsfeeds</div>
      <div class="componentContent">
        <div class="componentTopicItem">
          <a href="{{blog.rss_url}}"><img
            src="/xml.gif"
            alt="{{blog.name}} Main RSS Feed" width="36"
            height="14" border="0"></a>
          Main Page RSS
        </div> <!-- componentTopicItem -->
      </div> <!-- componentContent -->
  </div> <!-- component -->
{{else}}
  <div class="component">
    <div class="componentHead">RSS Newsfeeds</div>
      <div class="componentContent">
        <div class="componentTopicItem">
          <a href="{{blog.rss_url}}"><img
            src="/xml.gif"
            alt="{{blog.name}} Main RSS Feed" width="36"
            height="14" border="0"></a>
          Main Page RSS
        </div> <!-- componentTopicItem -->
  
        <div class="componentTopicItem">
          <a href="{{category.rss_url}}"><img
            src="/xml.gif"
            alt="{{category.label}} RSS Feed" width="36"
            height="14" border="0"></a>
          {{category.label}} RSS
        </div> <!-- componentTopicItem -->
      </div> <!-- componentContent -->
  </div> <!-- component -->
<!-- Dynamic RSS Custom Component END -->
{{/if}}

    If the XML.gif icon was not already present in your File Manager and you uploaded the XML.gif icon to your images directory, use this code instead: 

    {{if category.label eq "Main Page"}}
<!-- Dynamic RSS Custom Component START -->
  <div class="component">
    <div class="componentHead">RSS Newsfeeds</div>
      <div class="componentContent">
        <div class="componentTopicItem">
          <a href="{{blog.rss_url}}"><img
            src="/images/xml.gif"
            alt="{{blog.name}} Main RSS Feed" width="36"
            height="14" border="0"></a>
          Main Page RSS
        </div> <!-- componentTopicItem -->
      </div> <!-- componentContent -->
  </div> <!-- component -->
{{else}}
  <div class="component">
    <div class="componentHead">RSS Newsfeeds</div>
      <div class="componentContent">
        <div class="componentTopicItem">
          <a href="{{blog.rss_url}}"><img
            src="/images/xml.gif"
            alt="{{blog.name}} Main RSS Feed" width="36"
            height="14" border="0"></a>
          Main Page RSS
        </div> <!-- componentTopicItem -->

        <div class="componentTopicItem">
          <a href="{{category.rss_url}}"><img
            src="/images/xml.gif"
            alt="{{category.label}} RSS Feed" width="36"
            height="14" border="0"></a>
          {{category.label}} RSS
        </div> <!-- componentTopicItem -->
      </div> <!-- componentContent -->
  </div> <!-- component -->
<!-- Dynamic RSS Custom Component END -->
{{/if}}

    After you have pasted the above code into the Content area, click Add Component.
  5. Now that you have created a Custom Component, it's time to add it into your layout. Click on the Columns tab in the Layout Manager tool, and scroll down to the Component Layout area. In the Inactive column, you should see the name of the Custom Component you just created (it will have a name like Custom: Dynamic Category RSS Feed). Drag the component into the Left or Right Column, and click on the Save button at the bottom of the page. Your Custom Component will now appear on your weblog!

You're finished! Each page of your weblog will now display a component which shows a link to the Main RSS newsfeed for your blog, and also to the RSS feed specific to the category being viewed.

Related Articles

Feedback

Comments, questions or feedback to this article? We inivite you to share them on our Community Forums!