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!

Profile

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.

Et_profile

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.

Keywords

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.

Excerpt

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

Typepad Master Class: Highlight the blogside search

February 18, 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.

blogside searchTypepad offers great built-in features for helping readers navigate your blog. One of those is the blogside search form, which you can enable in Blogs > Design > Content. We recommend placing it near the top of the sidebar so it's easy to find.

A great way to draw attention to the search form is to make it a color that stands out. You can then take that code one step further and use a fancy background image to really draw focus to the search form. It's also a nice way to add visual interest to your sidebar.

This tutorial uses the Custom CSS feature, so it's geared toward our Pro Unlimited and Premium subscribers. Let's get to the code!

First, let's remove the "search" header:

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

Next, we'll set a background color, a font color, and a font size.

.module-search input[type="search"],
.module-search input[type="submit"] {
background-color: #ffcccc;
color: #000;
font-size: 10px;
}

The #ffcccc is light pink with #000 for black text. You can set those colors to anything you wish. Here's how that code should look in action:

Search1

Looking better but it's not there yet. Let's set a narrower width so the search field and button are closer together, remove the border around each element, add some padding so everything looks nice and make the "search" button text uppercase just for fun.

Continue reading "Typepad Master Class: Highlight the blogside search" »

Typepad 101: Make Facebook Really Pop(Up) On Your Blog

January 20, 2014

Just about everyone now uses Facebook.  They use it to keep up with friends, relatives, and - importantly for you - the blogs they read and the products they love.

If you have a Facebook Page, you can add a pop-up box to your blog so that your readers can Like your Facebook Page, allowing them to get updates on Facebook about anthing you post to your Page.  This can include blog posts, promotions, and more.

Facebook_overlay
Your New Pop-Up!

This is what we're going to teach you to add to your blog using the steps below.

First, you need to go to Design > Content and create a new "Embed your own HTML" widget. 

Then, you can click (left click to view, right click and save as to save to your hard drive) this link to view and copy the necessary code, or copy it from the box below - just make sure to copy all of it or your overlay will not work.

Remember, make sure to copy the entire thing! Click in the box and key Cmd+A on a Mac or Ctrl+A on a Windows computer.

Next, paste the code into the pop up area of the Embed your own HTML module as we mentioned just above.

Towards the bottom of the code, you'll want to look for this block of code:

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftypepad&amp;width=300&amp;
colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;
stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

and replace typepad with the trailing name (the bit from the very end) from the URL of your own Facebook Page.

As an example, if your Facebook Page was Sony's - https://www.facebook.com/Sony - you would replace typepad with sony in the code.

You can also look for the code to change the pop-up's wording to something more you. To do that, look for this line:

Get our updates on Facebook! Just click the Like button below

and simply change the text there to whatever you'd like.

Once you're happy with the message and you've got your own Facebook URL in place, click OK and drag the module into place on your Sidebar - the best place for it is at the very top. Scroll down to save your changes, and click View Blog to see your very own Facebook Like Box overlay!

Now when a reader visits your blog, they'll see a pop-up with the option to like your Facebook Page. So as to not annoy your readers, this will only appear on their first visit to your blog.

Important! If you're already using jQuery script elsewhere on your sidebar, remove this line from the code (shown in red in the file linked above):

< script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' >

After your readers sign up to get these updates, they're more likely to share them on Facebook for even more people to see, garnering more readers for your blog.

Remember before when we mentioned sharing your Typepad posts to your Facebook Page?  If you're not already doing this, you can learn how to automatically cross post from Typepad to Facebook here.

We hope you found this a useful tool to increase readership of 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.