Previous month:
March 2011
Next month:
May 2011

Posts from April 2011

Keep It Simple: Placing Ads on your Blog

TypePad Pro allows you to place advertisements on your blog to generate income from your blog. You can use a third-party ad service - SAY Media, AdSense, BlogAds, etc. - or sell and create your own ads.

Ad services will provide you with HTML for the ads which can be placed within your blog's design. Vertical ads can be placed in your blog's sidebar using the Embed Your Own HTML module at Design > Content for most designs. Information on adding content to the sidebar using TypeLists or Advanced Templates is available in the Knowledge Base.

The advanced configuration options for the Navigation Bar and Blog Footer modules are perfect for horizontal ads.

You may also want to sell ads for your blog without using a third-party service. Advertisements may be a text link or linked image. You can use Embed Your Own HTML module to add custom ads to your blog as well.

We have more information in the article on including ads on your blog.


Leslie Sarna: The Dainty Vegetarian

WHO: Leslie Sarna
BLOG: Leslie Sarna: The Dainty Vegetarian
TYPEPAD MEMBER SINCE: 2009
WHY WE THINK LESLIE SARNA ROCKS: Tasty recipes, gorgeous style and stellar advice!

Leslie_sarna_beauty

Leslie is a model, actress, host, and most importantly self-taught cook and foodie with an amazing eye for style. This Los Angeles dwelling vegetarian loves food and entertaining, and shares tasty recipes (veg and non-veg!) and charming, engaging stories to help her readers plan their own meals and parties, always accompanied by gorgeous photos.

Leslie believes in eating whole, real food, and making things from scratch and buying or growing local organic ingredients.

FOLLOW LESLIE SARNA: TypePad, Twitter, Facebook


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.


Zooborns

WHO: Chris and Andrew
BLOG: Zooborns
TYPEPAD MEMBER SINCE: 2008
WHY WE THINK ZOOBORNS ROCKS: Cutest! Baby Animals! Ever!


Zooborns

Chris and Andrew love baby animals and it just so happens that they know a bunch of folks at zoos. These insitutions are always welcoming new arrivals, so they decided, much to our delight, to put them all in one place! The coolest thing about Zooborns is that while we're squeeing over the newest and cutest baby animal births at zoos and aquariums around the world, we're also learning about the need to protect these animals in the wild, and the ways in which accredited zoos and aquariums contribute to this cause. Edutainment!


FOLLOW ZOOBORNS: TypePad, Twitter, Facebook


Keep It Simple: Integrating Social Media With Your Blog

Social networks like Twitter and Facebook are great ways to keep up with your friends and to share information with people who have similar interests. If you're into social media, TypePad makes it easy to connect your blog with your other accounts.

First, you'll want to go to the Account > Other Accounts area of your TypePad account and connect to your Twitter, Facebook, or other social media accounts.

Want to share your blog posts on your Twitter or Facebook profiles? Head over to the Settings > Sharing page for your blog. The Twitter or Facebook accounts that you linked to on the Other Accounts page are shown here. Put a check next to each account that you want to automatically share your posts to. Now, whenever you publish a new blog post, the post will show up on your Twitter stream or Facebook profile. This is a great way to let your Twitter and Facebook friends know about your blog.

Next, you'll want to let your blog readers know about your Twitter or Facebook accounts. TypePad's Other Accounts module displays links to all your social media accounts with an icon for each service. Go to the Design > Content page for your blog to add this module. Or, if you would like larger and more eye-catching icons, check out these (you'll need to do a little extra work to display them in your sidebar, though).

Otheraccountssidebar

So now your Twitter or Facebook friends and your blog readers are coming together as one big, happy group. Empower them to share your blog posts to their own Twitter and Facebook friends and expand your reach. Add Tweet This and Facebook Like buttons to your post footer.


Otheraccountsfooter

There you have it. Three quick and easy ways to integrate social media with your blog.


Oh Joy!

WHO: Joy Deangdeelert Cho
BLOG: Oh Joy!
TYPEPAD MEMBER SINCE: 2005
WHY WE THINK OH JOY! ROCKS: Inspiring design, fashion & food!

Oh Joy!

Launched in September 2005, the Oh Joy! blog covers inspiration & design with a focus on Joy's favorite things: design, fashion, and food. Updated 2-3 times a day, the site reaches over 18,000 readers a day on the main site, 33,000 readers via RSS, 18,000 Twitter followers, and an average of 760,000 page views per month. Impressive, yes, but what we really love about Oh Joy! is the tasty food photos and real-life DIY inspiration. You can even take a bit of Oh Joy! home yourself from Target!


FOLLOW OH JOY!: TypePad, Twitter, Facebook


Did You Know?: Using http:// In Your Links

If you ever create a link to a site outside of your blog and notice that the link isn't working plus it's using your own URL, there's an important piece of the link missing - the http:// part!

When you don't add the http:// to the beginning of a link, your own TypePad URL will be added to the beginning which will create a broken link on your site.

To fix this, simply go to the Compose page for the post with the broken link, highlight your link with your mouse, and click the Insert Link icon (the one with the picture of a chain). In the pop-up window that opens, change the URL section so that it includes http:// at the beginning.

For instance, if you have linked to www.example.com you would change it to http://www.example.com instead.

Examplelink 
We hope you found this useful! Check back every other week for more "Did You Know?" tips to help make your blog even better!


The Happiness Project

WHO: Gretchen Rubin
BLOG: The Happiness Project
TYPEPAD MEMBER SINCE: 2006
WHY WE THINK THE HAPPINESS PROJECT ROCKS: DIY Life Coaching!


The_happiness_project

A few years ago, bestselling writer Gretchen Rubin had an epiphany on the cross-town bus. She asked herself what she wanted from life, decided that she wanted to be happy, and then started a project as a companion on her search for happiness, which turned into a successful blog, which was then turned into a New York Times bestselling book.

Every Wednesday, Gretchen posts a list of tips about how to be happier; every Friday, she proposes a resolution for your own happiness project, and every Sunday, she posts a quotation to get readers thinking more deeply about happiness. It's like having your very own life coach.

FOLLOW THE HAPPINESS PROJECT: TypePad, Twitter, Facebook


Weekend Project: Draw Attention to the Comments Link

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!