Yahoo has recently added support for RSS syndication, allowing users of the My Yahoo! service to add their own RSS news sources to My Yahoo! pages. This article explains how to create a custom component to your BlogHarbor weblog containing a button which allows your readers to add your weblog to their My Yahoo! page.

We wrote about the topic of creating Custom Components for your weblog in this article, and we also wrote about BlogHarbor's support for RSS Syndication in this article.

Example BoxIn this article, we're going to explain how to create a Custom Component like the one on the right containing the "little orange XML icon" often used to signify the location of an RSS feed, and an Add to My Yahoo! button which when clicked, will allow your readers to add your weblog headlines into their My Yahoo! page. Of course, the box will match the color and style you use on your BlogHarbor 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. Right-click on the 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 add it and the add to My Yahoo! icon to a Custom Component.

  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 MyYahoo Box.
  4. Copy the following text and paste it into the content area: 
    <div class="component">
  <div class="componentHead">RSS Newsfeed</div>
  <div class="componentContent">
    <div class="componentRssLink" style="padding: 2px 0px 10px 0px;"><a
      href="{{blog.rss_url}}"><img src="/images/xml.gif"
      alt="RSS Newsfeed" border="0"
      align="center"></a>
      </div>
    <div
      class="componentRssLink" style="padding: 2px 0px 10px 0px;"><a
      href="http://add.my.yahoo.com/rss?url={{blog.rss_url}}"><img
      border=0
      src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif"></a>
      </div>
    </div>
</div>
    After you have pasted the above text 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: MyYahoo Box). 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!

That's it... Maybe it seemed a little complicated but you've now mastered the ability to upload images to your weblog using the File Manager and also learned how to create Custom Components. The result? Here it is:

Example Box

Now your readers can place your blog headlines right into their My Yahoo! pages with just one click!