How to Add a Blogroll on Tumblr

With a Tumblr theme like Kalalalani, Prologue or Vignetti, you can add a blogroll-like listing directly on the sidebar by adding a few lines of custom code to your template. If your theme does not support a sidebar, however, you can still add a blogroll by creating a new Tumblr page that contains all the blogs you personally follow and want to share with others.

Add Blogroll to Theme Sidebar

Log in to your Tumblr account, click "Customize," and then select "Edit HTML."

Scroll through the HTML code until you find the section containing the theme's sidebar. For instance, the sidebar for the Kalalalani theme begins with "<ol id="nav">" and ends with "</ol>."

Insert a blank line above the "</ol>" tag to make room for additional HTML code.

Type a new "<li>" tag in the blank line you created to add another list item. Tumblr's editor automatically adds the closing tag for you.

Type "Blogroll" at the insert point between the "<li>" and "</li>" tags to create a label for the blogroll section of the sidebar.

Click "Update Preview" to see if the text "Blogroll" appears in the sidebar. Some themes require some additional CSS code to make your new text visible. For example, to make "Blogroll" visible in the Kalalalani theme, replace the "<li>" tag with the following code that will change the label text's color to white:

<li style="color:white">

Click above the "</ol>" tag, and then press "Enter" to create a blank line for a blogroll link.

Type the HTML code for the list item that will contain the first blogroll link. For example, type the following line below the blogroll label:

<li><a>

The editor automatically adds the closing tags for you as you type, so that your code look like this:

<li><a></a></li>

Type the HTML code to add the URL for the first blog inside the "<a>" tag. For example, if your first blog has the URL "http://myfavoriteblog.com," your code should resemble the following:

<li><a href="http://myfavoriteblog.com"></a></li>

Click in front of the "</a>" tag, and then type the name of the first blog. For instance, if the blog is called “My Favorite Blog,” your code should resemble the following line:

<li><a href="http://myfavoriteblog.com">My Favorite Blog</a></li>

Click "Update Preview" to view your changes.

Add CSS code to reduce the size of the first blog's name. For example, if you use the the Kalalalani theme, change the font size to about 10 pixels. Your adjusted code should look like the following:

<li style="font-size:10px"><a href="http://expectedend.com">My Favorite Blog</a></li>

Click "Update Preview" to view your changes. Use the first blogroll link you created as an example for adding additional blogs.

Click "Save" to make your changes permanent.

Add Blogroll Page

Click the back arrow on the Customize panel, and then click the "Add a page" button.

Type a name to complete the URL for your new page. For example, if your Tumblr URL is "goodblog.tumblr.com," your completed URL should look like the following line:

goodblog.tumblr.com/blogroll

Type a title for your blogroll page, and then click the "Show a link to this page" toggle switch to turn it on.

Type the name of your first blog in the edit box.

Select the blog's name, and then click the "Insert/Edit Link" button.

Type the URL for the blog in the input box labeled "Link URL," click the "Insert link" button, and then click "Save."