Typepad 101: Managing Blog Designs

September 10, 2014

Over time, while working on your blog, you've probably noticed that at the bottom of the Design tab, there's a list of designs.  It will look something like this:


This list is all of the designs that you've created for all of the blogs within your account.  But what does all of this mean?

You'll see a thumbnail for each design, giving you a quick idea of what the design looks like.  Next is the design's name.  If you created it using a different blog other than the one you're working on, you'll see "for" and then the name of the blog you created it for.  If there's an asterisk at the end of the name, that means it's applied to a blog within your account.  Finally, the orange CURRENT next to a blog means that this is the design that is currently being used on this blog.

Using the buttons next to each design, you can perform actions like customizing the design, applying it to a different blog, or even deleting it from your account completely.  You can read about all of these options in our Knowledge Base.

One of the things we get asked about a lot in support is why a design change applied on one blog also appears on another blog in the same account?  This is because blogs are shared across the entire account, allowing you to apply a design to more than one blog.  That means that if a design is applied to Blog A and Blog B, any changes you make will be applied to both blogs.

If you'd like to have similar, but not exactly the same designs for a blog (maybe you want different sidebar content, for instance), we would recommend that you instead duplicate the design and apply the duplicate to one blog.  Setting up a testing blog is a great way to test the duplicated design out before it's ready for prime time.

As always, we're here to help, so just let us know if you have any other questions!

Typepad 101: A Recap of Newness

July 30, 2014

In case you missed it, we over at Typepad have been hard at work introducing a ton of new things for you to play with. Let's take a look at all of the new goodies!

First up, we have the Post Carousel, which adds a slideshow of the latest posts to the top of your blog.

Post Carousel: Working Hard on Your Blog

We didn't want to make your sidebars jealous, so we've also introduced the Sidebar Carousel as well. This is similar in concept, but highlights a specific category in your sidebar as opposed to all of your latest posts. Have more than one category you want to highlight? Add as many Sidebar Carousels as you like!

Continuing the fun with sidebars, we've got the Spotlight Posts widget as well as the Copyright and Introduction widgets.

The Spotlight Posts widget displays a list of posts from a category in your sidebar, even giving you the option to show the thumbnail for the first image in the post along with the post excerpt.

Spotlight (on Dogs)!

The Copyright and Introduction widgets come pre-loaded with some text that we think is useful: the Copyright widget contains the HTML code for the copyright symbol and your blog's name and the Introduction widget contains a few sentences to give you some ideas. The text for both of these widgets can be edited as you like.

Finally, the new Signature Module is a great way to add signature images, sign-offs, advertisements, or anything else you want to have automatically inserted into the bottom of each post. Add it once and it's applied to all of your posts so that you don't have to copy and paste the same thing in each time.

Until Next Time: The Signature Module in Action

We've also made some changes to our Disqus comment integration and would love it if you'd give it a whirl on your blog. We're particularly interested in those blogs using domain mapping and would ask that you open a ticket or reply back so that we can take a look at your integration.

In addition to all of this, we also released a new responsive theme called Gourmet that comes in both Spicy and Sweet designs. We think you'll love both its responsive functionality - which allows it to look great on all types of browsers and devices - and its fantastic design.

Gourmet: The Spicy Version

It's important to note that many of these features are for the Beta team only, so if there's something you want to try out but don't see, swing by the Account tab.  From there, check the Beta team option, save your changes, and you'll see all of this Typepad goodness at your fingertips!

Typepad 101: Adding Google Web Fonts

July 02, 2014

With a vast number fonts available for design, Typepad keeps it simple by offering the most common fonts available to all systems and devices.  Did you know, though, that the range of fonts available can grow exponentially with services like TypeKit, MyFonts.com and Google Web Fonts  If you're a Pro Unlimited (or higher) user, you can use our tip below to easily customize your blog with a custom font(s).

Today we will focus on using Google Web Fonts as it is free and easy to use. In this example, we're using the default text that comes with the Block Party theme. 

Before DMP

Choosing Your Font

Let's change the font as it appears in our blog posts to "Merriweather". In the font listing, click the "Quick-use" button:

Screen Shot 2014-06-19 at 4.29.25 PM

Scroll down to Step 3 and copy the code given in the Standard tab:

<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>

This code is added to the Head Module in Typepad under Design > Head.   Next, we add our new font to our Custom CSS at Design > Custom CSS:

body { font-family: 'Merriweather', serif; }

Blog posts now have a new font!

After DMP

We also share these instructions in our Knowledge Base.

Blog Element Font Changes

Want to use a different type of font for other parts of your blog like Post Title or your Sidebar?  Follow the same steps starting with adding the Standard code to the Head Module (you can have more than one saved in this field), then include your new CSS additions.  For example, if you want the post title font to match your blog post, include this to Design > Custom CSS:

.entry-header,  .entry-header a { font-family: 'Merriweather', serif; }

If you can't find a font you like on Google Web Fonts, there are other sites like MyFonts.com and Fonts.com that offer a large selection of fonts for a fee. You must use their Webfont option in order to add the fonts directly to your blog, otherwise you're just downloading fonts to your device.

One Last Tip...

Now that you're able to add some font customizations, let us offer a word of caution: keep it simple.   Too many font types, styles, or sizes can make your blog look busy and distract readers from the content. Consider the style/type of fonts you like and how best to pair and use them. For example, a handwritten font looks best as titles and headers but may be difficult to read as the body of your posts and modules. We recommend looking for great pairing ideas online in places such as Pinterest or Google.

Have you added some custom fonts to your blog? Leave us a link in the comments so we can all check it out!

Typepad Master Class: Layering Header Text Over an Image

June 18, 2014

layering header text over an image

In this Master Class we're offering a tip for making a header and related image work together. This can be used across multiple types of blogs, and multiple types of content. Think giveaways, fashion, photography--you name it, we're sure this tip can be used in some way to grab a reader's attention.

Headers are used to do just that--grab attention. In blogging, images are often used to the same end (e.g. to break sections of text up with a relevant image, to showcase an item(s), to just look pretty--the list could go on). Our class today blends the two together, with the goal to keep it simple, keep it effective, and keep it attractive (SEA; look at us making up cool acronyms!).

Continue reading "Typepad Master Class: Layering Header Text Over an Image" »

Typepad 101: A few words about following

June 05, 2014

We recently reintroduced you to your Typepad Profile, where we covered all the things you can do to customize your profile and make it your own. Now that you've had time to get to know your profile, we'd like to talk to you about the little green button you can see on the left here - the Follow button.

image from everything.typepad.com

Something we hear from our bloggers from time to time is that you want to find other Typepad blogs to read, but you're not sure exactly how. We want to make it easier for you to discover great blogs, keep tabs on your favorite bloggers, and to help you engage more easily (like with quick comment replies) with your readers, so we're here today to talk about Following people via the Typepad Profile. Once you've pressed that little button on a fellow Typepad blogger's profile and followed them, you'll start to see their activity right in your Dashboard.

Your Dashboard helps you to know when someone you're following comments, follows another Typepad blogger, or adds a post to their Typepad blog. You'll also get a little alert when other Typepad bloggers follow you!


Best of all, it’s fun! Being able to track what your most pithy and interesting commenters say and do is a great way to get inspired to be an even better blogger.

"So, how do I find people to follow?"

For a strong start, check out the Typepad Showcase! It's full of blogs on every subject from parenting to lifestyle to design to tech, and features some of the best bloggers on Typepad.

Once you start following a few people, you can follow the people they're following, or you can also follow the people who've commented on your blog with Typepad Connect.

Using your Typepad Profile and Dashboard is a simple, easy, and effective way to find great new blogs to follow, keep tabs on your favorite Typepad bloggers, and build your community at the same time!

Not so sure you want that content on your Dashboard after all? We've got the skinny on how to unfollow and remove recent activity from other bloggers right here.

Typepad 101: Don't Forget Your Typepad Profile!

May 28, 2014

You may or may not know it, but your Typepad account comes with a free Typepad profile.  You can check out the Typepad Team's profile here.


So, what should you do with your own profile?

To start with, giving your profile a unique URL that reflects your name or brand is a great way to personalize it.  Right now, when you view your profile, the URL might have a long string of numbers. Not ideal, right?

To change this, start by going to the Edit Profile page inside your account. There, look for the "Profile URL" section and replace the existing URL with the one you want to use. Then just scroll all the way down to the bottom of the page to save your changes. That's it!

One of the most important features of your Profile is that it allows you to share your blog activity and links to your social media accounts such as Facebook and Twitter. Adding those sites to your Profile is extremely easy.

To share your blogs, just go to the Edit Profile page and look under Your Blogs. There, select the blogs from your account that you'd like to show. Activity from the selected blogs will show on your followers' Dashboards and in your Recent Activity stream on your Profile.

The URL you use for your Homepage URL will be the site that's linked with your name when you comment on TypePad blogs. This should be your main blog or the site you want to promote the most.

To share your social media accounts, click on Add an account to go to the Other Accounts page. You'll use the "Add an account" menu to add links to Facebook, Twitter, etc. We have full details about the Other Accounts page in our Knowledge Base.

You can also make other changes on the Edit Profile page to personalize it.  This includes your display name, your bio, your location, and more. You can also upload your own picture to be used as your profile image. After you select the image, make sure to scroll to the bottom to save your changes.

Now that you've got your profile more to your liking, you can add it to your blog's sidebar.  Go to Design > Content, look for the "About You" category, select the "Follow Me" option, and click the "Add this module" button.  You can then choose to display the following and followers count if you like.  Save your changes and your readers can now easily view your profile.

You can read more about your Typepad profile and how to edit it in our helpful Knowledge Base.

Typepad Master Class: Customize the Look of Auto-Generated Excerpts

May 14, 2014

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy.

We've released a lot of new features to Typepad in 2014, and one of our favorites is the ability to automatically display post experts on index pages with a thumbnail image.

With Custom CSS, you can customize the look of the excerpts. If you don't already have the Custom CSS feature, you can upgrade to Unlimited at Account > Billing Info > Upgrade anytime.

If you want to learn the basics of CSS, check out the latest series of posts on Getting to Know CSS: part 1, part 2, and part 3.

The auto-generated excerpts can be enabled at Settings > Posts. Learn more. All CSS code included in the tips below can be added below any other code you have added at Design > Custom CSS.

Let's get started!

Add Border to Thumbnail Image

A border can be added to the thumbnail image with a quick line of CSS:

body.index .entry-body a img {
     border: 2px solid #000000;

If you want to add a frame around the image, insert some padding:

body.index .entry-body a img {
     border: 2px solid #000000;
     padding: 2px;

The screenshot below shows you how the above CSS impacts the thumbnail image.

Thumbnail Image with Border

The elements you can change for the border are the width (2px), style (solid, dashed, dotted), and color (#000000). For additional options, see the w3schools article on borders and color code generator.

Style the "Read more" Link

Just like with other text in your blog's design, you can change the style of the "Read more" link. Below is an example of changes you can make to the style:

.excerpt-more-link {
     font-family: Georgia, serif;
     font-size: 14px;
     font-weight: bold;
     padding-left: 5px; /* space btwn excerpt and link */
     text-transform: capitalize;

Additionally, you can change how the link appears when you hover over it. The below code changes the color and adds an underline when you move your mouse over the link:

.excerpt-more-link a:hover {
     color: #6E6E6E;
     text-decoration: underline;

Force the "Read more" Link to a New Line

If you do not want the "Read more" link to float with the excerpt text, you can easily force the link to start on a new line with the CSS:

.excerpt-more-link {
     display: inline-block;

Change "Read more" Text a bit

Although the "Read more" link is hard coded into the template, you can add some text before "Read more" to make it your own. Some ideas: Click here to read more, You know you want to read more, Please read more.

Here's the CSS to make these changes:

.excerpt-more-link a:before {
     content: "Click here to " ! important;

You'll want to make sure to add a space before the last " to separate the last word from the "Read more" text. Additionally, you may want to transform the text to be all caps, all lower case, or first letter of each word capitalized.

.excerpt-more-link a:before {
     content: "You know you want to " ! important;
     text-transform: capitalize; /* or uppercase or lowercase */

By implementing many of the above elements, the resulting update to the excerpts is:

Customized Excerpts

Here's the CSS used to achieve the above result:

.excerpt-more-link {
     font-family: Georgia, serif;
     font-weight: bold;
     text-transform: capitalize;
     display: inline-block;

.excerpt-more-link a:before {
     content: "Click here to " ! important;

.excerpt-more-link a {
     color: #000000;

.excerpt-more-link a:hover {
     color: #6E6E6E;
     text-decoration: underline;

body.index .entry-body a img {
     border: 2px solid #000000;
     padding: 2px;

Are you using the Auto-Generated Excerpts feature? If so, what changes are looking to make to the look of the excerpts? Let us know in the comments!

Typepad Master Class: Spice Up Your Own Comments

April 16, 2014

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Unlimited or higher plan is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.

All comments submitted to your posts will use the same style by default. However, you can use a little CSS to make your own comments stand out. Readers of your blog will then see which comments were submitted by the author of the post at a quick glance.

When you sign in to comment on your own blog, your comment will have the .comment-by-owner class applied to it, and we can use this class to make changes to the formatting.

You are currently signed inFor the specific styling to be applied to your comments, you'll need to make sure you see the You are currently signed in as... note above the comment form. (See screenshot.) If you don't see the note, click the Sign in with Typepad link and follow the prompts to confirm you are signed in to your account.

In this Master Class, we'll provide you with the CSS to make the following changes to comments submitted by the post's author:

All CSS can be added at Design > Custom CSS. If you don't see the Custom CSS option, you can upgrade to the Unlimited plan. Learn more.

Continue reading "Typepad Master Class: Spice Up Your Own Comments" »

Typepad Master Class: Styling TypeLists

April 02, 2014

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Pro Unlimited account is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.

Features like TypeLists allow you to showcase a wide variety of content in your sidebar for readers to enjoy. Gone are the days when all TypeLists shared the same style, making custom styles complicated. Today, custom IDs are generated based on the title given to the TypeList, making styling a (relative) snap. Pretty genius, right?

With the unique identifier, you can use CSS to style each TypeList, and nearly all modules, using their custom ID or Class selector. It's easy to get started, easy to implement, and the only real difficulty you may face is coming up with the CSS for the styles you want.

Here are a couple of simple style options to get you started. Once you're comfortable with them, you can root around in your favorite design inspirations for ideas, use our tips and tricks articles in the Archives or in the Knowledge Base for CSS you can use, and so on. If there's anything you can't work out, just open a ticket at Help > New Ticket and we'll get you sorted.

Simple Header Changes

Font and Background Color

Style TypeList HeaderIn this example, we've changed the background color, font color, and font style, of a Links TypeList called "& You May Enjoy..." It originally looked like the two modules above it, but we really want to make this list pop to show them as featured items on the blog.

To make this change, we first had to locate the ID of the TypeList. As we mentioned earlier, every TypeList will have a custom ID assigned to it based on its title. To find exactly what the ID is, we simply use our browser to view the source of the blog (this is typically at View > Source or Page Source). Use your find command (Command+F or Alt+F) and search for the title of the Typelist. When we did this for the above TypeList in our example, our result looked like this:

image from content.screencast.com
We highlighted the ID so it's easier for you to take note of. Yours will look similar, except it will use your TypeList title (e.g. A TypeList called "Bloggers Unite" will appear as "bloggers_unite" or similar).

With this information in hand, we then scooted over to Design > Custom CSS and typed the following:

#_you_may_enjoy .module-header {
    color: #D9826E;
    background: #E5E5E5;
    font-style: italic;

The above CSS indicates that we want to select the TypeList we found the ID for, then target specifically the header area, not its content. We then set a font and background color to match the style of the post titles. We also made sure to set the font style to italic so it stood out a bit more but kept with the style of the blog design. When doing something similar, you can choose your own font and background colors, not use a font style, add a border, background image--whatever you choose.

Simple Border Change

Continuing with the simple changes, but wanting to make the TypeList fit the design of the theme we've set, this next example mimics the navigation bar by implementing borders.

Simple Border Change

Back at Design > Custom CSS, we added the following:

#_you_may_enjoy .module-header {
    border-top: solid 5px #6B6662;
    border-bottom: solid 1px #C6C1BD;
    padding-top: 9px;
    padding-bottom: 9px;

We again focused on the header of the TypeList, using the custom ID and Class selector to pinpoint where the style changes should be reflected. With a thick top border, a thinner bottom border, and some padding above and below the header title to make things vertically centered to match the navigation bar, we've got a slick, perhaps more subtle emphasis on the TypeList we want to feature.

Come up with a design boost for your sidebar content, then repeat the steps to locate the unique identifier for your TypeList, and work out the CSS you'll need to get to look the way you want. You can do quite a lot with a little inspiration, ambition enough to push your design to that next step, and some CSS. Don't try to make it more complex than it has to be, but if you find yourself in over your head, don't hesitate to reach out to us.

Typepad 101: Making SEO Work For Your Blog

March 19, 2014

You've heard of SEO (Search Engine Optimization) but maybe you're not sure how to apply it in your blog posts. We all want to connect with new readers and SEO is a way for others to discover your latest posts.

In addition to your SEO blog settings, we have some more tips and tools to keep in mind when putting your post together on the Compose page.

Blog Post Title

Screen Shot 2014-03-01 at 2.13.29 PM

Search engines look at your post title and its URL for keywords.  Your Permalink is generated either by what is written in the Title bar so choose your words wisely.   "SEO In Your Blog" may work better in a search than "Get Seen By A Lot Of People".

Your Permalink

Screen Shot 2014-03-01 at 2.13.40 PMWe know sometimes you can't think of a title right away so you start writing your post and the title will come to you later.  When saving your draft this way, your permalink will be the first several word of your posts so remember to go back and edit your Permalink!  The keywords in your link are also scanned in searches so avoid using vague link names to your post (ie: Monday_jan142014.html)

Body Content

Screen Shot 2014-03-01 at 2.14.00 PM

Think about your topic and what type of search one would use to find your blog.   How you begin your blog post is important because the first 100 words will be used as your post excerpt if you do not write one separately in the Excerpt field.


Screen Shot 2014-03-01 at 2.15.25 PMDon't pass this up!  Your keywords should reflect the overall subject of your blog posts plus a little extra that can still be related to your topic.  To best utilize your keyword, it should appear throughout your post.   Keywords and excerpt text are saved as meta data which help categorize your post and is what search engines use when seeking results.


Screen Shot 2014-03-02 at 5.07.01 PMThe Excerpt field is optional but as mentioned previously, this is generated automatically using the first 100 words in your blog post unless you have your settings changed under Settings > Posts, under Auto-Generated Excerpt Length.

We hope this gives you a better understanding of how SEO works and how you can apply it to draw traffic to your blog.

Settings > Posts & Pages, under Auto-Generated Excerpt Length. - See more at: http://help.typepad.com/compose_overview.html#sthash.jvyCINj8.dpuf
or the number of words you have set in Settings > Posts & Pages, under Auto-Generated Excerpt Length. - See more at: http://help.typepad.com/compose_overview.html#sthash.jvyCINj8.dpuf
or the number of words you have set in Settings > Posts & Pages, under Auto-Generated Excerpt Length. - See more at: http://help.typepad.com/compose_overview.html#sthash.jvyCINj8.dpuf


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.