Adding a blogroll to the sidebar
584 views
Skip to first unread message
sneak
Oct 10, 2010, 3:21:08 PM10/10/10
to Scaffold Tumblr Theme
Here are some instructions I quickly put together for creating a
'blogroll', showing thumbnails of the Tumblr sites you follow. This
will sit just under the Twitter block at the bottom of the sidebar.
---
1. Add the following code into your theme HTML. You will want to put
this in the sidebar, probably just after the {block:Twitter} ... {/
block:Twitter} section:
{block:Following}
<div id="tumbleroll">
<h3>Following</h3>
<ul>
{block:Followed}
<li>
<a href="{FollowedURL}"><img src="{FollowedPortraitURL-48}"/></a>
</li>
{/block:Followed}
</ul>
</div>
{/block:Following}
2. Add the following CSS into your Custom CSS field (under
'Advanced'):
#tumbleroll {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-top: 15px;
overflow: hidden;
padding-bottom: 2px;
}
#tumbleroll h3 {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
Verdana, Tahoma, sans-serif;
font-weight: normal;
font-size: 1.6em;
font-weight: bold;
padding: 6px 5px 7px;
text-transform: uppercase;
}
#tumbleroll ul {
overflow: hidden;
}
#tumbleroll li {
float: left;
display: inline;
margin: 0 0 5px 5px;
}
#tumbleroll li a {
float: left;
display: inline;
text-decoration: none;
}
3. If you would like the subheading font to match the custom font of
the header/nav, then in the <head> section of the theme HTML add this
code into the last <script> block:
$(document).ready(function(){
Cufon.replace('#tumbleroll h3', { fontFamily: 'Titillium-800' });
});
'blogroll', showing thumbnails of the Tumblr sites you follow. This
will sit just under the Twitter block at the bottom of the sidebar.
---
1. Add the following code into your theme HTML. You will want to put
this in the sidebar, probably just after the {block:Twitter} ... {/
block:Twitter} section:
{block:Following}
<div id="tumbleroll">
<h3>Following</h3>
<ul>
{block:Followed}
<li>
<a href="{FollowedURL}"><img src="{FollowedPortraitURL-48}"/></a>
</li>
{/block:Followed}
</ul>
</div>
{/block:Following}
2. Add the following CSS into your Custom CSS field (under
'Advanced'):
#tumbleroll {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-top: 15px;
overflow: hidden;
padding-bottom: 2px;
}
#tumbleroll h3 {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
Verdana, Tahoma, sans-serif;
font-weight: normal;
font-size: 1.6em;
font-weight: bold;
padding: 6px 5px 7px;
text-transform: uppercase;
}
#tumbleroll ul {
overflow: hidden;
}
#tumbleroll li {
float: left;
display: inline;
margin: 0 0 5px 5px;
}
#tumbleroll li a {
float: left;
display: inline;
text-decoration: none;
}
3. If you would like the subheading font to match the custom font of
the header/nav, then in the <head> section of the theme HTML add this
code into the last <script> block:
$(document).ready(function(){
Cufon.replace('#tumbleroll h3', { fontFamily: 'Titillium-800' });
});
Reply all
Reply to author
Forward
0 new messages