Posts categorized "Weekend Projects" Feed

Weekend Project: Eye-Catching Sidebar Menus

TypePad's Pages feature is pretty nifty - compose your Pages with the info you want to include, drop a  module into your sidebar that lists them all out nicely, and voila - instant menu. But why stop there? You can use CSS to fancy it up and draw attention to that important information.

Let's turn this:

Pages-module-before

Into this:

Pages-module-after

If you're unfamiliar with TypePad's Custom CSS feature, this will be a good way to get your feet wet. First, let's hide the "Pages" header.

.module-archives .module-header { display: none; }

Next, we'll style the links so they're black with no underline:

.module-archives .module-list-item a {
color: #000;
text-decoration: none;
}

Finally, we'll style each list-item. I've made mine very simple and sleek, so they stand out but aren't too distracting:

.module-archives .module-list-item {
margin: 0 0 2px 0;
padding: 5px 5px 5px 14px;
background-color: #EFEFEF;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ccc;
}

See how the subtle borders make the links look almost like buttons? That's CSS magic! Of course, you can use any colors you want.


Weekend Project: Displaying Recent Photos in Advanced Templates

Warning: geekery ahead! If you're an Advanced Template user and want to add even more fun stuff to your blog, this post is for you. If you're a Basic Templates user and want to display the photos recently added to your blog all in one spot, you already have this functionality available as part of our Mixed Media layouts.

When you add an image in a post in TypePad, the backend generates a whole slew of image thumbnails that you can access via special TypePad tags. In this tutorial, we're going to use those tags to display a small gallery of image thumbnails in the sidebar of a blog. The special tags will generate a squared thumbnail of the first image inserted into each post, which link back to the associated post's individual archive URL. Below is an example on a live blog:

Recentphotosatscreenshot
The last image in this example is a placeholder that links to a post that doesn't have an image associated with it. Your placeholder image can be anything you'd like, you'll just want to make sure it's the same dimensions as the thumbnails you're generating.

The code for the above example:

<h2 class="module-header">Recent Photos</h2>
        <ul class="sidebar-thumbnails">
            <MTEntries lastn="10">
<MTEntryPhoto>
<li class="thumb"><a href="<$MTEntryPermalink$>"><img src="<$MTEntryPhotoURL spec="115si"$>" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>"></a></li>

<MTElse>
<!-- Posts without images show a placeholder -->
<li class="thumb"><a href="<$MTEntryPermalink$>"><img src="http://example.typepad.com/noimage.gif" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>"></a></li>
</MTElse>
</MTEntryPhoto>
            </MTEntries>
        </ul>

And the CSS used to style the thumbnails:

.sidebar-thumbnails {
margin: 0;
padding: 0;
list-style: none;
}

.thumb img {
margin: 0 5px 5px 0;
border: 1px solid #000;
float: left;
}

You can, of course, use CSS to style the images however you wish. The thumbnail size is determined by the <$MTEntryPhotoURL spec="115si"$> tag. In this case, the thumbnail is 115 pixels wide and 115 pixels in height. There are eight different thumbnail sizes available so you should be able to find one that fits your blog's design.


Weekend Project: Style Your Mobile Blog with Advanced Templates

This Weekend Project is for those of you with Advanced Templates, a Pro-Unlimited feature that lets you edit the HTML of your blog's design and layout. You'll need to already utilize Advanced Templates for your blog's design, or be comfortable coding with HTML and CSS in order to successfully create a new design using the Advanced Templates feature.

The Project for this weekend is on styling your mobile blog, by simply using one or two new custom template modules:

  • head-common-extra-mobile
  • footer-extra-mobile

The first module listed above is the key for being able to customize your blog's mobile design. When created, it is automatically inserted into the HEAD of the mobile template. Due to its position within the source code of the mobile design, you can use it to insert CSS to style only the mobile view.

The second module listed above allows you to add additional content below the footer of your blog's mobile design. When created, it is automatically inserted into the mobile template, above the closing BODY tag (e.g. </body>). This module is ideal for adding a link to the full version of your blog, if you so choose.

Continue reading "Weekend Project: Style Your Mobile Blog with Advanced Templates" »


Weekend project: 15 super quick CSS tips

We love the Custom CSS feature and we think there's even a lot fun to be had with it. Some of these tips come from help tickets and others you might not even know you wanted to try until now. These will work with most themes and can be adjusted to the colors you want to use.

1. Set a custom line height for text
The theme builder allows for standard sizing - normal, loose and tight. If you want to customize that, you can use:

body { line-height: 130%; }
.module-content { line-height: 120%; }

2. Round the corners of the blog container
You might want to add some space above and below so the rounding stands out.

#container {
margin-top: 15px;
margin-bottom: 15px;
border: 20px solid #FFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

3. Round the edges of the banner background color while you're at it

#banner
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Screen shot 2011-06-24 at 5.12.06 PM

4. Hide Page titles

.entry-type-page .entry-header { display: none; }

5. Style the featured post

.entry-featured .entry-content {
background-color: #EFEFEF;
padding: 10px 20px;
border-bottom: 1px solid #CCCCCC;
}

Screen shot 2011-06-24 at 5.14.15 PM

And you can hide the featured post's title and footer:

.entry-featured .entry-header,
.entry-featured .entry-footer { display: none; }

6. Set a default border around images in posts
This will apply to ALL of the images you include in your posts by default. This works best if you know the style you want to use and keep that consistent across all of your posts.

.entry-content img {
border: 1px solid #999;
padding: 10px;
background-color: #FFF;
}

Screen shot 2011-06-24 at 5.15.20 PM

7. Add a fancy divider between posts
You'll first upload your image and then copy the URL so you can use it in the following code.

.entry-footer {
padding-bottom: 60px;
background: transparent url(http://example.typepad.com/flourish.png) bottom center no-repeat;
}

Screen shot 2011-06-24 at 5.16.09 PM

8. Style every other blog comment

.comment-odd {
background-color: #EFEFEF;
padding: 10px;
}

Screen shot 2011-06-24 at 5.16.42 PM

9. Style your author image in the sidebar

.module-photo .module-content img {
border: 2px solid #999;
background-color: #efefef;
padding: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin-bottom: 15px;
}

Screen shot 2011-06-24 at 5.31.44 PM

10. Style the "email me" module

.module-email .module-content {
font-size: medium;
background: #EFEFEF;
text-align: center;
padding: 10px;
}

Screen shot 2011-06-24 at 5.32.15 PM

11. Remove the extra space between items in the archive and categories sidebar lists

.module-archives .module-list-item,
.module-categories .module-list-item {
margin: 0;
}

12. Fancify the RSS "subscribe" sidebar link

.module-syndicate .module-content {
font-weight: bold;
border: 1px solid #000;
background: #EFEFEF;
text-align: center;
padding: 10px;
}

Screen shot 2011-06-24 at 5.32.50 PM

13. Customize the search results highlight color

.search-results .search-results-highlight {
background: #88dddd;
}

14. Style the "Powered by TypePad" module

.module-powered .module-content {
background: #88dddd;
text-align: center;
padding: 10px;
font-size: 14px;
}

Screen shot 2011-06-24 at 5.33.23 PM

15. Add some pizazz to your TypeList thumbnails

.typelist-thumbnailed { margin: -6px 0 20px 0; }

.typelist-thumbnail {
    min-width: 50px;
    width: 50px;
    margin: 6px 18px 0 0;
    text-align: left;
    vertical-align: middle;
}

.typelist-thumbnail img {
margin: 0px;
border: 1px solid #000000;
padding: 4px;
}

Screen shot 2011-06-24 at 5.33.47 PM


Weekend Project: Rotate those Banners!

Have you ever considered having your banner change each time your blog is loaded? Ever created two or more banners you absolutely love, which perfectly fit your blog, but then had a terrible time choosing which banner you should use?

With this Weekend Project, you won't have that problem!

Here's what you'll need for this project:

  • Access to the Theme Builder feature (Pro-Plus and above)
  • Access to the Custom CSS feature (Pro-Unlimited and above)
  • Access to the Blog Description at Settings > Basics
  • Banner images you simply must have on your blog (tip: make sure they're all the same size)
  • A rotating image script

* note: this project utilizes the Theme Builder, it does not add any code via HTML or other advanced methods.

To get started, use the Theme Builder to begin building your custom theme. In the section for the banner, make certain to select the "text" option, not the "image" option. Weird, right? Don't worry, it'll make sense in the end.

Next, create your banner images, making sure to give them the same height and width so that they all fit within the same amount of visual space. If you're not sure what size to make them, then we have some tips on choosing a banner size that will help.

In the example below, I have created two images that are 960px wide and 200px tall...

2011-06-17_2236

Once you have your custom banner images created, and saved to your computer, upload them to your File Manager. You'll want to keep the File Manager open as it will come in handy in the following step.

Now here is the part where we setup the rotating script. Thankfully, there are numerous sites available which serve that very purpose. We're offering a link to a single resource, but you can find your own with a query for "free banner rotation generator" in your favorite search engine.

The one we're sharing has ads and pop-ups, but several users have used it with great success. The form is simple to understand, and generates the necessary script. If you have a favorite resource for this type of script, make sure to share it in the comments below!

To generate the script for the banner rotation, go to HTML Basix. Scroll down a bit, then select the following recommended settings:

  • New image with every page load
  • Open on the same page
  • The width of the banner images (for our example above, that would be 960)
  • The height of the banner images (for our example above, that would be 200)

The next set of fields will be for the image URLs, the links they should go to, and the text you want to appear should someone hover over them. You will fill each set of three fields for every image you want to appear in rotation.

To fit our example, we would enter details twice, which would look something like this...

2011-06-17_2246

To find the URL of your banner images, you would open the File Manager, then click on the filename for each of your banner images. The images will open in a new tab or window of your browser, and you can copy the URL of the image from the address bar of your browser.

Once complete, click the "Generate" button at the bottom of the screen. You'll then see a new window open with the code you need to use. Copy the code provided to you, then, in your blog, go to Settings > Basics. Paste the script into the Description field and save your changes.

If you load your blog at this point, you'll notice that the blog title still appears in the banner area. Mosey yourself on over to Design > Custom CSS, then enter:

#banner-header { display: none; }

Click the Preview button to see the changes, then click the Save button so that your blog reflects those changes.

* note: this tip may not work completely as expected due to theme variances. If this is the case for you, feel free to open a ticket within your account, then let us know you're trying to complete the Weekend Project for rotating banner images, and which part isn't working for you.


Weekend Project: Styling pagination links with Custom CSS

Time for another handy CSS tip! This time, we're styling the pagination links that direct readers to more posts from your main page, as well as category and datebased pages. The first step is making sure you have text filled in for those links in Blogs > Settings > Posts. The link text can be anything you wish - just keep in mind that you want it to be clear to the reader that there are more great posts to read if they click those links!

Continue reading "Weekend Project: Styling pagination links with Custom CSS" »


Weekend Project: Styling the Blockquote Tag

Blockquotes are used for a myriad of things--think recipes, quotations, poetry; it's something that has enough significance, or requires emphasis, to be set apart from the rest of your blog text.

Our goal with this Weekend Project is to show you a few ways in which you can style your blockquote tags to make what you emphasize stand out that much more.

This Weekend Project requires CSS, but this is a tip that all levels of TypePad bloggers can use. Note, however, that it'll be much simpler to setup (think "set it and forget it") for our Unlimited and above members. Plus users will need to manually add the CSS to the blockquote tags via the HTML tab. Don't worry, we'll give you the lowdown on how to implement the CSS in both ways. If you want the ability to only have to set it up once, though, we recommend upgrading to the Unlimited plan.

To get started, you'll need to think about your blog's design, what kind of impact you want to make with your blockquotes, and what fits your personal blogging style. Do you prefer simplicity, bold colors, lots of flourish? If we don't give you the exact example you're looking for, a quick search via your favorite search engine, and the tips we give you, will head you in the right direction.

Here are the examples we've setup for you at this time...

1) This blockquote is styled with a dark gray background, white text, and a thin, white, dashed border. It's also padded on the top, right, bottom, and left (5px, 15px, 5px, 15px, respectively). Here's what that looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, est sed congue sagittis, sem elit fermentum urna, ac posuere orci turpis quis nisl. Mauris et arcu libero, a hendrerit nunc. Aliquam tempor posuere libero, sit amet facilisis velit tempus a. Vivamus purus risus, cursus et venenatis nec, tempor non.

Unlimited+ users can go to Design > Custom CSS, or Design > Templates > Stylesheet if you're an Advanced Template user, and add the following CSS:

blockquote {
  background-color: #333; 
  color: #fff; 
  border: 1px dashed #fff; 
  padding: 5px 15px;
}

And that's it! Preview your changes, then, if you're happy with them, click "Save" and forget about it. You don't have to do anything else; just apply the blockquote in the editor and the CSS will do its magic to transform it using the settings you put into place.

Plus users will need to compose their post, select the text they want to offset, then click the blockquote icon (quotation mark) in the editor (note: you'll need to do this for every blockquote, manually via the HTML tab). Once that's in place, click the HTML tab and look for the <blockquote> tag. Then, add the CSS like so:

<blockquote style="background-color: #333; color: #fff; border: 1px dashed #fff; padding: 5px 15px;">

2) This blockquote is styled with a dark gray drop-shadow, and is padded on the top, right, bottom, and left (5px, 15px, 5px, 15px, respectively). Here's what that looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, est sed congue sagittis, sem elit fermentum urna, ac posuere orci turpis quis nisl. Mauris et arcu libero, a hendrerit nunc. Aliquam tempor posuere libero, sit amet facilisis velit tempus a. Vivamus purus risus, cursus et venenatis nec, tempor non.

Unlimited+ users can use:

blockquote {
  padding: 5px 15px; 
  -moz-box-shadow: 3px 3px 4px #000;
  -webkit-box-shadow: 3px 3px 4px #000;
  box-shadow: 3px 3px 4px #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow
(Strength=4, Direction=135, Color='#000000')";
  filter: progid:DXImageTransform.Microsoft.Shadow
(Strength=4, Direction=135, Color='#000000');
}

Plus users will need to use:

<blockquote style="padding: 5px 15px; -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');">

3) This blockquote is simply styled with a 2px wide border in red (the hexadecimal--#c00000--can be changed to a color that suits your blog), displayed only on the left side. It also has padding on the top, right, bottom, and left (5px, 15px, 5px, 15px, respectively). Here's what that looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, est sed congue sagittis, sem elit fermentum urna, ac posuere orci turpis quis nisl. Mauris et arcu libero, a hendrerit nunc. Aliquam tempor posuere libero, sit amet facilisis velit tempus a. Vivamus purus risus, cursus et venenatis nec, tempor non.

Unlimited+ users can use:

blockquote {
  border-left: 2px solid #c00000;
  padding: 5px 15px;
}

Plus users can use:

<blockquote style="border-left:2px solid #c00000;padding:5px 15px;">

4) This blockquote style is a classic, using a simple background image of a large quotation mark. There is a greater amount of padding used on the top, right, bottom, and left (25px, 15px, 5px, 75px, respectively). Here's what that looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, est sed congue sagittis, sem elit fermentum urna, ac posuere orci turpis quis nisl. Mauris et arcu libero, a hendrerit nunc. Aliquam tempor posuere libero, sit amet facilisis velit tempus a. Vivamus purus risus, cursus et venenatis nec, tempor non.

Unlimited+ users can use:

blockquote {
  background:url(http://www.example.com/image.jpg) 
no-repeat top left;
  padding:25px 15px 5px 75px;
}

Plus users can use:

<blockquote style="background:url(http://www.example.com/image.jpg) no-repeat top left;padding:25px 15px 5px 75px;">

5) This blockquote style actually uses a couple of things we've already made use of in the above examples. The blockquote is set to only be 430px wide, is styled with a background image at the top, which is centered and dragged up -7px, and has a white background color. The perimeter of the blockquote has small gray dots on the left, right, and bottom. There's also padding set for the top, right, bottom, and left (30px, 15px, 15px, 15px, respectively), to push the text away from the inside edges of the blockquote border.

Here's what that looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, est sed congue sagittis, sem elit fermentum urna, ac posuere orci turpis quis nisl. Mauris et arcu libero, a hendrerit nunc. Aliquam tempor posuere libero, sit amet facilisis velit tempus a. Vivamus purus risus, cursus et venenatis nec, tempor non.

Unlimited+ users can use:

blockquote { 
  width: 430px;
  background:#fff url(http://www.example.com/image.jpg) 
no-repeat center -7px;
  overflow:visible;
  border-right:1px dotted #c0c0c0;
  border-bottom:1px dotted #c0c0c0;
  border-left:1px dotted #c0c0c0;
  padding:30px 15px 15px 15px;

Plus users can use:

<blockquote style="width:430px;background:#fff url(http://www.example.com/image.jpg) no-repeat center -7px;overflow:visible;border-right:1px dotted #c0c0c0;border-bottom:1px dotted #c0c0c0;border-left:1px dotted #c0c0c0;padding:30px 15px 15px 15px;>

Note: The last couple of examples use background images, and if that's something that interests you, you'll need to first upload that image to your File Manager. Once uploaded, click on the file name of the image you uploaded, then copy the URL out of the address bar. You'll be using that URL to replace the http://www.example.com/image.jpg example in the CSS code above.

We hope you'll find these examples useful, possibly the oomph! an occasional post or two in your blog needs. Go ahead and steal some moments this weekend to figure out what works best for your blog. Remember: you can preview your blockquote changes, make some edits and preview again, then save when you've perfected the look you're going for.


Weekend Project: Optimizing Your Most Popular Posts

It goes without saying that all of your posts are gems but once in a while, a post will shine brighter than the others. As a blogger, you have a chance to make the most of these star posts, whether you want to generate revenue from them or simply direct more attention to them. This article will help you not only figure out which of your posts are the most popular but how to optimize those posts for maximum effect. This is a 'weekend project' because it's a little more time-intensive but it's time well spent!

Finding Your Star Posts

It's usually pretty obvious when a post is popular - you might get a slew of comments, the Facebook Like button gets a lot of clicks, and your Stats show many pageviews for that post. But let's dig a little deeper. You might have much older posts that get a lot of traffic from Google and other search engines because of the high quality content. Those types of posts are the meat and potatoes of your blog - the content that brings new readers to your site and keeps current readers coming back.

There are a couple of ways you can find these posts. First, we like the Top Posts widget from PostRank. You just put the widget in your blog's sidebar and Post Rank populates it with the posts that they rate the most popular on your blog. Not only will you get to see which of your posts are the most popular, your visitors will be able to see the list as well. This will help draw lots of attention to those posts.

If you don't want to share a list on the blog itself, a second option is Google's Analytics service. It's totally free and very easy to integrate with TypePad

Analytics To see your top content inside Analytics, log in and click View Report next to the blog you're working with. From there, look for Content Overview at the bottom, right side of the Dashboard page. Then click View Report to see more. The full report page will show all of your blog's pages in order of content performance. The listing is for all of the pages, including categories and archive pages. You'll want to focus on just individual posts for the purposes of this project.

Check Grammar and Spelling

Now comes the part that isn't super fun but we think is pretty important - editing your posts for spelling, grammar and overall correctness. Maybe you have a really popular post that you dashed off in a hurry. If so, you'll want to make sure to check for spelling and grammar errors. It's often helpful to have a friend or colleague read through the content for you, just to double check for any issues you might not spot yourself.

Another good idea is to read the post out loud to yourself. Does it sound natural and conversational or clunky and awkward? You can also check to make sure that outgoing links to other sites are still functional and that those sites or pages are still up.

These might seem like unimportant details but content rife with errors can flag a lack of credibility to the reader. It's worth taking some time to edit and correct any mistakes.

Enhancing Your Content

This part is more fun. Do you have a picture that would complement the content of the post? Go ahead and add it in, especially if you can place it near the most important part of the post. Simply stated, readers love pictures so don't be shy about adding a couple to your popular posts. Keep in mind that you want to keep the focus of these posts on the text itself so while pictures are great, too many might be distracting.

Your top posts present a great opportunity for getting people to subscribe to your feed, find you on Facebook, etc. You can add some text to the top or bottom of the post inviting new readers to subscribe, follow you on Twitter, or however else you like readers to find your content.

Another idea is to link to other posts within the same category or topic. There are widgets that will do this automatically for you but you can also link directly to specific posts that you want to drive more attention to. This can be a simple series of links at the end of the post.

Monetizing Your Very Best Content

There are a few ways you can use your top posts to generate extra money from your blog. In fact, you might find that using your best content to target specific ads is the best way to monetize your content.

Link to specific products via affiliates

Let's say you have a very compelling post about do-it-yourself carpeting. It makes sense to include a link to a product that you mention in the post itself, either as a text link or with a small, eye catching banner image. There are affiliate programs you can join that will pay you a small amount with each sale you generate from the link on your blog. There are many affiliate programs out there - some popular ones include LinkShare and Commission Junction.

If your post is about a smaller service or product, you could also consider contacting the owner of the business to see if they'd like to set up a direct affiliate relationship. These types of ads are less common but it certainly doesn't hurt to ask to see if the opportunity is there.

Link to your own products

If you have your own product - like an ebook or Etsy store - you can link to that product at the end of the post. This can be just a simple text link or an image of the product with a link. The format is up to you.

Use Google's Adsense or other targeted ads

Programs like Google's Adsense look at the keywords in the surrounding text and serve ads relevant to that text. It makes sense that if you put a Google Adsense ad in a post that's rich in a specific keyword or topic, the ads will be complementary to that content. Readers tend to click on ads more often if the links are related to their interests, so targeting your ads this way can lead to more click-throughs.

What are your favorite tips?

Of course, there are probably a million other little or big enhancements you can make to your most popular posts to make them even better. If you have any tricks that have worked wonders for your blog, leave it in the comments. We'd love to hear your tips!


Weekend Project: Display Content On A Specific Category Page

When using categories to organize your posts, you may feel like a specific category requires a little something more. What we have in mind for you today is adding a note to your sidebar, only on the pages for one specific category, to tell your readers what that category is about.

In the screenshot below, a paragraph beginning with "Books are awesome!" has been added to the "Books" category of a blog. Only when the Books category is being read will that paragraph appear.

image from content.screencast.com

Before we begin, note that the tip we're sharing with you uses Javascript, so you'll need to make sure your browser has it enabled, otherwise you may not see the tip work as expected.

So, how do we get the default sidebar to look like the one in the above screenshot?

To get started, you'll need to take note of the URL for the category you want to add a blurb to. It should be formatted similar to http://example.typepad.com/blog/category_name/. If you use your own domain name with TypePad, mapped to your specific blog, you'll probably see something closer to http://www.example.com/category_name/.

Next, you'll need to use the Embed Your Own HTML module to house the code that needs to be added. Once you've clicked to add the module on the Design > Content screen, you'll be prompted to add a title to the module to remind you what it is, then add the code provided below.

In our example above, we used the following code:

<div id="booksCategoryDiv" style="display:none; background-color: #fff; padding:5px 15px;">
   <p>
      <b>Books are awesome!</b> They frequently teach us things, take us out of our everyday, and they smell good. Yes, books smell good. In these pages you'll be able to read about the books I've picked up, put down, and what I thought of them.
   </p>  
</div>

<script language="javascript">
var pathis = window.location.pathname;
new_array = pathis.split('/');
subdirectory = new_array[2];

var CategoryDiv = document.getElementById("booksCategoryDiv");
    if ( subdirectory == "books" )
    {
        CategoryDiv.style.display="block";
    } else {
        CategoryDiv.style.display="none";
}
</script>

To use this for your blog, you'll need to change the reference to "books" in this line:

    if ( subdirectory == "books" )

to the category name, as it appears in the URL for that category. If your category URL is http://example.typepad.com/blog/knitting/ then you would replace "books" with "knitting".

In our above knitting example, the next step would be to replace references to "booksCategoryDiv" with "knittingCategoryDiv". Make sure the first letter of that reference is lowercase (e.g. "knittingCategoryDiv" NOT "KnittingCategoryDiv").

Note: If you use Domain Mapping with your blog, and it's mapped directly to your blog instead of your account, your categories will be one sub-folder deep instead of two. If that's case, you may need to change:

subdirectory = new_array[2];

to:

subdirectory = new_array[1];

Once you've made the above changes, you'll need to edit the content that's going to display on the category page. In our code above, we used:

<div id="booksCategoryDiv" style="display:none; background-color: #fff; padding:5px 15px;">
   <p>
      <b>Books are awesome!</b> They frequently teach us things, take us out of our everyday, and they smell good. Yes, books smell good. In these pages you'll be able to read about the books I've picked up, put down, and what I thought of them.
   </p>  
</div>

For your purpose, though, you'll want to edit the text between the <p> and </p> tags so that the content is custom to your blog and category. So long as the opening <div> and closing </div> tags are in place, you could even go so far as to remove the <p> and </p> tags. It's possible to even add an image in there, like:

<div id="knittingCategoryDiv" style="display:none; background-color: #fff; padding:5px 15px;">
   <img src="http://example.typepad.com/image.jpg" style="clear:right;padding-top:5px;" />
  <p style="padding:0px 5px;">
     Browse my knit projects and posts about the yarn I fell in love with!
  </p>
</div>

Which will look like this when it's added:

Knitting Rocks sidebar example
Once you have the edits in place, click OK to close the Embed Your Own HTML module, then click the Save button on your Content screen to save the changes to your blog. The final step will be to view your blog, then click the category link the content is associated with and verify that the new module displays on that page!

Generic Sidebar to Specific-Content Sidebar
And that's that! You'll have officially turned your general sidebar into a content-specific sidebar for a category of your choice. With a small code tweak you'll get big impact!

We hope that you enjoyed this weekend project from us. Check back next week for more tips and tricks from the TypePad team!


Weekend Project: Give your blog a good scrubbing

Spring has sprung! Many people take time at the beginning of spring to give their homes a good, deep cleaning. Why not do the same for your blog? It is your home on the internet, after all.

There are several benefits to taking the time to clean up your blog, including:

  • Faster load times.
  • Better cross browser compatibility.
  • A nicer reading experience for your visitors.

And those are just a few. Striving for a clean, clutter free blog does definitely pay off. Let's get started!

Banner
Most blogs, especially on TypePad, have an image banner. One issue that we see a lot is that banner images tend to be large, not just in pixel size but in file size. One way to help your page load more quickly is to make sure your banner image is the smallest file size it can be. A very quick way to do this is to save the image as a PNG file, which is suitable for both photographs and illustrations. A site like PunyPNG allows you to compress a JPG or other file into PNG format using an easy online tool.

Sidebars
The first step when tackling your sidebars is to go through each item and ask yourself what value it's adding to your blog. Do you really need that "beer of the day" widget circa 2001 or can it be removed? You can also check outgoing links to make sure they're still active and relevant, awards and other banners to make sure those sites still exist, and so on.

Another vital task is making sure that the most important sidebar content is easy to find. Is your search bar at the top, where visitors are expecting to see it? Or is it stuck at the bottom of a sidebar, below a dozen banners? Look at your blog objectively, like a new visitor would, and see if you can easily identify important navigation elements like archive links, your About page, and subscription options.

Lastly, even if you're not an an HTML guru, making sure the code in your sidebars is correct is very important. An open or missing tag can cause the display of the entire page to be off. Going through each sidebar element that includes custom code, look for things like:

  • Open or missing tags (ex: does each link have a closing tag?)
  • Extra or unnecessary tags (ex: can a huge block of code be condensed and still achieve the same thing?)

A great tool for cleaning up code is fixmyhtml.com. Just copy the code from the module in TypePad and paste it into the form there. It will spit out the updated, correct code that you can use to replace the old code.

Posts
Just like with banner images, images in posts can be condensed in file size so the overall load time of the page is improved. Other options include using small thumbnails that link to the full size image and using the split extended entry feature to put an image-heavy post behind a link to its individual archive page. You can also simply show fewer posts on the main page of the blog so that first page loads quickly. There are built-in navigation links at the bottom of each page so readers can easily click to the next series of posts.

Need a hand?
If you've been blogging for a while, chances are your blog has gotten a little messy, like a highly trafficked living room. If you're looking for a hand in sorting things out, the TypePad One team offers a Tune-Up service geared toward helping you make the most of your beloved blog.