Weekend project: 15 super quick CSS tips

June 24, 2011

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!

June 17, 2011

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

June 10, 2011

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

May 14, 2011

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

May 06, 2011

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

April 22, 2011

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

April 15, 2011

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.

Weekend Project: Draw Attention to the Comments Link

April 08, 2011

We know commenting is an incredibly important part of blogging. The interaction between blogger and reader is pivotal in reaching a larger audience--they share with their friends, who share with their friends, and so on. We want to share with you some of our favorite tips for making the "Comments" link in your post footer more prominent to help build a community within your blog between you and your readers.

(note: the following tips require Custom CSS, a feature of the Pro Unlimited plan, and can be found at Design > Custom CSS)

image from content.screencast.com
Up above we have a generic and unassuming post footer. It belongs to a blog post, just begging to be commented on. As you can see, there aren't any comments yet, but we can definitely improve those odds using some of the tips we're going to share with you.

Let's spruce up the "Comments" link to make it more noticeable, okay?

Tip #1: Make it bold!

Bold text can capture your attention. It says, "hey, I'm special!" And your comment link is definitely special, so let's make it bold!

In your Custom CSS, add the following line:

.entry-comments {
        font-weight: bold !important;
}

Preview and save your changes to see something a bit like:

image from content.screencast.com 
Tip #2: Make it loud!

Netiquette states that using ALL CAPS LIKE THIS is a form of shouting and shouldn't be used, lest you want to be considered rude. Since we can't give your comment link an obnoxious flag to wave, or tell it to bounce around, we can certainly let it be heard via uppercase letters.

To do that, try the following CSS:

.entry-comments {
        text-transform: uppercase !important;
}

Preview and save your changes to see something a bit like:

image from content.screencast.com 
Tip #3: Pump up the volume!

Why not go for broke and create a custom button or background image to go behind the comment link? We'll cover two different methods--use a background image with the existing text link or use a custom button--for pumping up the volume of the comment link.

Option One is to add a custom button image, like the following icon... Comment-button

To do this, we'll need to use CSS a bit more complicated when compared to the earlier tips. Get up and walk around for a couple of minutes, stretch, pet your cat, dog, gerbil, or fish. Ready? Good, let's do this.

First, create an image you like that fits your theme or custom design. Make sure it's not so large that it takes up the same space as your post, but not so small that it will get overlooked. Anything between 15px and 30px square should do the trick, like the image we have above.

Next, upload that image to your File Manager at Library > File Manager. Once uploaded, click on the filename and copy the URL of the image from the address bar of your browser. Hurrah! We still have more than half the fun left to go...

Go to Design > Custom CSS, and enter:

.entry-comments {
        background: url(http://everything.typepad.com/files/comment-button.gif) !important;
        background-repeat: no-repeat !important;
        background-position: 0px 0px !important;
        display: inline-block !important;
        padding: 2px !important;
}

Preview your changes.

image from content.screencast.com
That's not exactly what we had in mind, is it? No worries, let's fix it up! We just need to tell the text to disappear, but the link to remain. To do that, we'll make a small tweak and add some new commands to the existing CSS:

.entry-comments {
        background: url (http://everything.typepad.com/files/comment-button.gif) !important;
        background-repeat: no-repeat !important;
        background-position: 0px -3px !important;
        display: inline-block !important;
        width: 30px !important;
        height: 21px !important;
        text-indent: -1000em;
}

Preview your changes.

image from content.screencast.com
Wow! That's looking pretty sharp, isn't it? What if we want to keep the "Comments" text and have it appear as though it's part of a button? We can do that! In fact, why not just make it look like the pretty sweet buttons that TypePad already offers for Favorite, Reblog, Tweet This, and more?

Option Two will do exactly that, and this is the image we'll start with... Comment-link

Looks like too much, right? It's not, we promise. You'll need that extra space in the button in the event that every single person to use the internet drops in to read your blog and leaves you a comment.

Here's the CSS we'll need to achieve the awesomeness that will soon be gracing your blog post footer:

.entry-comments {
        background: url(http://everything.typepad.com/files/comment-link.gif) !important;
        background-repeat: no-repeat !important;
        background-position: 0px 0px !important;
        display: inline-block;
        border: 1px solid #ddd;
        padding: 2px 6px 2px 28px;
        color: #666 !important;
        font-size: 9px !important;
        font-weight: normal;
        font-style: normal;
        font-family: Verdana, sans-serif;
        text-decoration: none;
        text-transform: none;
        vertical-align: bottom;
        background-color: #ededed;
        background-repeat: no-repeat;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
}

It's a lot of CSS, but it's going to make some magic. Just preview your changes.

image from content.screencast.com

Striking! Phenomenal! Look how much more your eye is drawn to that button than it was to its original link state.

We love these tips, and we love our users, so we hope today's tips were fun, educational, and will prove useful to you. Check back each week for more ways to enhance your blog here at TypePad!

Weekend Project: Styling Sidebar Headers

March 25, 2011

If you've used TypePad's Theme Builder to create a custom design for your blog, your sidebar content might look something like this:

Screenshot

If you're a subscriber at the Pro Unlimited plan and above, you can use Custom CSS to style the sidebar headers to make them look even better. This does require some basic knowledge of CSS. Two great resources for CSS beginners can be found here and here.

Here are some examples to get you started on your way to styling your sidebar headers like a design pro.

The Theme Builder adds a bit of spacing between the letters in the headers so they're easy to read. To remove the default spacing, use:

.module-header { letter-spacing: 0; }

Or you can simply adjust it down, for example:

.module-header { letter-spacing: .1em; }

The Theme Builder also allows you to make the text all uppercase but if you'd like it to be all lowercase, use:

.module-header { text-transform: lowercase; }

If you want to capitalize just the first letter of each word, use:

.module-header { text-transform: capitalize; }

Adding a background color behind the text is easy, too. We've included padding around the text to give it some room to breathe.

Screenshot

.module-header { background-color: #EFEFEF; padding: 4px; }

The Theme Builder has an option for adding borders but what if you want a border on two or three sides, instead of just one or all four? You can use:

.module-header {
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}

Border attributes include border-top, right, bottom, and left and you can adjust the pixel size, color and line type (solid, dashed, or dotted).

If you want to really make the headers fancy, you can use a background image behind the text. This can be an image that repeats behind the entire header area or an image that's aligned just to the top, bottom, left or right. It's these types of little touches that really make a design extra special.

Here's an example using an image just to the left of the sidebar header text:

Screenshot

.module-header {
background: transparent ur(http://example.typepad.com/image.gif) left center no-repeat;
padding-left: 20px;
letter-spacing: 0;
}

The padding on the left ensures that the text doesn't overlap the image. And of course, you can combine any of the above style attributes into one .module-header statement.

If you have an idea for how you'd like your blog's design to look but you don't have the time to implement it yourself, let us do it! Contact us via our Custom Design Center and we'll be happy to assist you in setting up a fantastic new design for your blog.

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.