Avoiding Common Blogging Mistakes: Your Sidebars are Languishing

July 23, 2014

Be a Better Blogger
Welcome to our series on common blogging mistakes, and how to avoid them. Every other week, we'll debut a new post designed to help you avoid mistakes that are common to both new and veteran bloggers, full of tips and tricks guaranteed to help you become an even more passionate, engaged blogger with a growing audience.

Typepad offers easy ways to add all types of content to your blog's sidebars - images, links to other sites and pretty much anything else you might want to include. The downside is that it's easy to add content to the sidebar and then forget about it. This can lead to slow load times, broken outbound links, and a blog that appears unkempt.

When we perform a Blog Tune-up Service, one of the very first things we check is the health of the blog's sidebars. You can do this yourself easily and it can help reduce clutter on your blog while improving load time.

At Blogs > Design > Content, you can see each item that you have set for the blog's sidebars. First, look at the general number of modules you have in the sidebars. If it's a lot (maybe more than 10 in each sidebar), it's time to consider getting rid of non-essential items. Some widgets and banners are only relevant for a specific time, so those are easy to remove.

Then, starting at the top, go through each item that's not a built-in function, like ads and outside links, and check for:

Correct HTML tags: Simply open the module, copy the code and paste it into a validation service. If there are incorrect tags, replace the old code with the corrected code and save. It's important that HTML tags are formatted properly - it's not something you can approximate!

Functionality: If you have a banner or link to an outside site, click through it from your blog and make sure the site is still functional and the content is what you expect to see there. If you have a dedicated blogroll, it's a good idea to do this periodically so you know you're directing your own readers to sites you'd visit yourself.

Relevance: Each item in your sidebar should either aid readers in getting around your blog, learn more about you, or provide information that's in some way relevant to your blog. If you write about food and have links to different cookbooks or other chefs, that makes sense and adds value. If you have content that is not related to you or your content, consider removing it. Readers will likely ignore it anyway.

Finally, check to see that your sidebar items are in an order that puts important elements at the top. A good order is something like:

  1. A welcome blurb and photo of yourself
  2. Links to your major social media profiles
  3. Subscription options
  4. Search module
  5. List of categories
  6. Outside links and banners

This prioritizes information about you and navigational items so your readers can easily find more of the content they're interested in. A quick sidebar check up once a quarter will ensure that your blog remains in tip top shape.

Avoid Common Blogging Mistakes: Are you using Keywords effectively for SEO?

July 09, 2014

Be a Better Blogger

Welcome to our series on common blogging mistakes, and how to avoid them. Every other week, we'll debut a new post designed to help you avoid mistakes that are common to both new and veteran bloggers, full of tips and tricks guaranteed to help you become an even more passionate, engaged blogger with a growing audience.

A common mistake for bloggers seeking to achieve a high ranking in Google and other search engines is forgetting the importance of keywords. Keywords from your post should be included in the Title, Permalink, and Meta Keywords.

The Title is probably the most important part of your post in determining whether or not the entire post is read. When you compose a new post (or page), the Title should concisely describe the post by including keywords to entice the visitor to read more.

Every post and page should include a Title. The Title is included in the page source within the <title> </title> tags which is what is seen by search engines. Without a Title, search engines, like Google, are going to have a harder time indexing your post to be included in search results.

For more tips on crafting a page title, the Google webmaster help guide is an excellent resource.

Like the title, the Permalink should include keywords which give a visitor an idea as to the content of the post in the URL. Keep in mind the URL for your post or page and should not be too long. By default, the title will be used as the Permalink Filename, but this can often be too long and needs to be reduced to a few keywords. It’s easy to set your own Permalink Filename with keywords.

Edit Permalink

When composing your post, click the Edit button below the title to the right of the Permalink, edit the Permalink, and click Save before publishing your post. It is important to edit the Permalink before making the post live to prevent any outside links from breaking when the Permalink is changed. No spaces or special characters should be included in the Permalink. It is recommended that you use a dash to separate keywords in the Permalink.

The Meta Keywords are also important for search engine optimization (SEO). When composing your post, enter keywords which you expect to be used when finding your post in search results in the Keywords field. Keywords and phrases can be separated by a comma.

Meta Keywords

Keywords will be included in the webpage meta data which is used by search engines to better categorize your webpages. Visitors to your blog will not see the meta keywords.

Unsure what keywords to use? Google offers a Keyword Planner to help you choose the appropriate keywords for your posts and pages.

What tips do you have for utilizing keywords in your posts and pages? Let us know in the comments!

Avoid Common Blogging Mistakes: Autoplaying Sound

June 25, 2014

Better_blogger

Welcome to our series on common blogging mistakes, and how to avoid them. Every other week, we'll debut a new post designed to help you avoid mistakes that are common to both new and veteran bloggers, full of tips and tricks guaranteed to help you become an even more passionate, engaged blogger with a growing audience.

Let's imagine a scenario.

It's late in the evening, you've had a long day.  You're finally home, sitting on your computer.  You're relaxed and settling down, browsing some of your favorite sites.  Suddenly, out of no where, a loud song starts playing through your computer's speakers.  You're startled and immediately close the browser so as to not wake anyone else up.  "What in the world just happened?" you wonder.

What happened is that you came across a site that has music enabled to automatically begin playing when you visit.  This is usually - at best - an inconvenience or an embarrassment.  Maybe you're at home and the song wakes up your sleeping dog or family.  Maybe you're at work and now everyone knows you're visiting a site that probably isn't approved by your HR or IT team.

If you're a blog owner, it's possible that you just alienated the reader in the above scenario enough to get them to decide that visiting your site again isn't worth it.

While you might like having a song or greeting play for your readers, it's worth it to consider how it can impact how they view your site.  What can you do to make sure that this doesn't happen?

Disable Autostart on Videos

When you add a video to your blog from a site like YouTube, many times there will be an option to have the video start playing automatically.  We recommend that you do not choose this option and let the reader decide when to the play the video themselves.  This goes for any videos embedded in your posts or if you happen to have any in your sidebars.

You can read more about inserting videos in our Knowledge Base here and more about uploading your own videos here.

Consider Removing Background Music

While you may enjoy the music playing on your own site, visitors may prefer to listen to their own music while they are browsing the web or they might be in a situation like the one above.  We recommend that you do not have any background music on your blog, but if you do, make sure there's a way for a reader to quickly pause or stop it.

Keep an Eye on Third-Party Widgets

Some third-party widgets may unexpectedly play sound.  Make sure you know and agree to what you're putting on your blog before teaming with a third-party service.  Some may place advertisements as well, so it's always a good idea to double check exactly what it does and what you're agreeing to in its Terms of Service.

Allowing your readers control over music or video ensures that you never surprise them or get them in trouble for viewing your blog. A happy visitor is often a return visitor.

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" »

Avoiding Common Blogging Mistakes: Subscription Options

June 11, 2014

Better_blogger

Welcome to our series on common blogging mistakes, and how to avoid them. Every other week, we'll debut a new post designed to help you avoid mistakes that are common to both new and veteran bloggers, full of tips and tricks guaranteed to help you become an even more passionate, engaged blogger with a growing audience.

Today we begin a new series where we share common blogging mistakes to avoid.  We all make mistakes early on with our blogs but have learned from them. Now we would like to pass that knowledge on to you.  We will cover mistakes or oversights bloggers make and how to overcome them.  Today we start with offering different blog subscription options for your readers.

A mistake made often with blogging is not offering options to subscribe for blog updates.  You want visitors to know when you post an update right?  Don't just rely on the "Subscribe" link that appears in your Navigation Bar and call it a day.  Readers have different preferences when following their favorite blogs. Some people like to get blog updates or digest sent directly to their inbox, others visit a blog reader and read all of their blog updates at once, or they get their blog fix through Social Media.

Here are some of the more common options you can give your readers for getting updates.

Link Back To A Feed Reader

A blog reader is an application that collects and syndicates all of the blogs you follow into one place.  The Subscribe link in your Navigation Bar gives readers your feed URL (ending with atom.xml or rss.xml) that can be added to feed readers.  Make sure you have your Feeds enabled at Settings > Feeds to make your posts viewable. 

Some popular feed readers are Bloglovin' and Feedly.  They both have a selection of "follow" buttons to choose from. You can see how they look here and  here.

Connect to FeedBlitz

By connecting your blog to FeedBlitz, you can share the FeedBlitz sign-up widget in your sidebar.  Anyone who signs up using this widget will be taken to a page showing options to subscribe to the feed via Google, Facebook, and several other services.

Email Updates

If you set up an account with FeedBlitz, you can utilize their Email Subscription option.  Every time you update your blog, an email will be sent directly to your subscribers linking back to your blog. 

Facebook/Twitter

Not everyone wants to get email updates.  People check their social media accounts several times a day, every day.  Offer the option to "like" your blog on Facebook by adding a Like button or badge.

If you share blog updates on Twitter, choose one of their "follow" buttons to let readers know you're there too.   You can also use a service like IFTTT to share your blog updates to your Facebook, Twitter, and more automatically.

By offering different choices to share your blog updates with your readers, you make the most of getting your blog content out to be read and shared with others.

How do you keep updated with your favorite blogs?

Getting to Know CSS: the Wrap-Up

May 21, 2014

image from everything.typepad.com

Welcome to our special series on getting to know CSS! Every other week, we debuted a new article full of valuable tips and tricks that helped you to understand how CSS works and how to apply it to your blog. We've covered everything from the very basics, to fancy tricks, to the best way to find the code you need for your very own blog. Get ready to advance your skill set!

Back to Basics has covered what you need to familiarize yourself with HTML, and now we've concluded Getting to Know CSS. We've shared what CSS is, how it works, and how to find what you need to target specific Typepad selectors. The rest just takes practice.

Let's review what we've covered in this series.

With what you've learned, you can attempt our Typepad University tips, as well as our Weekend Projects and Tips & Tricks. Practice your new skills and understanding of what CSS can do in a test blog. You may find some of our past posts a little difficult at first, but with some perseverence you'll be able to pull of even our most challenging of tips and projects. If you really get stuck, then remember we're always here to help!

Getting to Know CSS: Typepad-specific CSS

May 07, 2014

Back_to_basics_header_css

Welcome to our special series on getting to know CSS! Every other week, we'll debut a new article full of valuable tips and tricks that will help you to understand how CSS works and how to apply it to your blog. We'll cover everything from the very basics, to fancy tricks, to the best way to find the code you need for your very own blog. Get ready to advance your skill set!

We've previously introduced you to the concept of CSS and provided information on how to format general CSS elements for use with your blog. Now, we'd like to provide gudiance for using elements that are specific to your Typepad blog.

It's common for websites to use their own CSS names for features, like the banner or sidebar headers. Let's see how you can figure out those names for Typepad. Whether you're using the theme builder or one of our built-in themes, the names will be the same.

The very easiest method is to view the HTML source of the main page of the blog or a page of the blog that shows the element you'd like to customize. In most browsers, just right click on the page and choose "View page source." You'll then see a bunch of code, like the screenshot below.

Screen Shot 2014-05-06 at 1.34.04 PM

Scroll through until you find the element you want to customize, like the post title or a sidebar header. You don't need to locate each instance, just one will do. You'll then look for the "class" or "ID" name right before that element. The below example shows the post title highlighted.

Highlight

The class name for the post title is entry-header so you can add that to your Custom CSS page as:

.entry-header { }

And then add your CSS, like:

.entry-header { font-size: 200%; }

The view source method is great if you just want to customize a few things. If you want to dig even deeper or make lots of changes, we recommend letting browser add-ons do some of the work for you. One we use a lot when designing blog themes is Firebug.

It has a lot of features but one of the handiest is showing you the classes for every element on the page and allowing you to edit the code right there so you can see how it will look. The screenshot below shows that in action.

Firebug

There are other plug-ins and tools you can use. We recommend:

Every element of a Typepad blog has a corresponding CSS class or ID, making it possible to use Custom CSS to fine-tune everything on your blog. If you have a favorite tool that we haven't mentioned, or a tip for fellow Typepad users, please leave a comment below!

Getting To Know CSS: Writing Your Own CSS Code

May 01, 2014

Back_to_basics_header_css

Welcome to our special series on getting to know CSS! Every other week, we'll debut a new article full of valuable tips and tricks that will help you to understand how CSS works and how to apply it to your blog. We'll cover everything from the very basics, to fancy tricks, to the best way to find the code you need for your very own blog. Get ready to advance your skill set!

Recently we introduced you to CSS. Within this post, we helped you learn what CSS stands for, what it can be used for, its basic structure, and more.  In this post, we're going to teach you how to write your own CSS and give you some examples for changes you can make to your own blog.

As we mentioned previously, when you write out CSS code, it's into two areas: the selector, which can be an Element, Class or ID; and then the property and property value. These are grouped together within a curly brackets set.

You may be thinking, "Well, what does this mean in plain English?" so we're going to break it down for you.  Remember, while you will need to be willing to learn a little bit of "techy" stuff to understand things like CSS, the support team is always here to help you and happy to give you a hand.

Breaking It Down

Let's take a look at a common CSS element - the p tag.  The p tag is used for the paragraphs within your posts.  This paragraph that you're reading, for instance, is created using a p tag.  Here's an example of a CSS statement:

p { font-size:10px; }

In this case, p (the paragraph tag) is the selector, font-size is the property (what you're changing about the text) and 10px is the property value (setting the font to 10 pixel).

You can also combine property values, like font-size and color.  Here's the CSS code that you would use to change the font to 10 pixel and set its color to black.  You'd use this:

p { font-size:10px; color:#000000; }

Now all parapgraph tags would be set to this size and this color.  There's no need to individually change paragraphs; you set it once and you're done!  That's the beauty of CSS.

CSS isn't just used for fonts, though.  It can change a multitude of elements on your blog.  For instance, to add a color to your blog's background, you'd use the following:

body { background:#fdd0a6; }

Again, you've got the selector (body) the property (background), and the property value (#fdd0a6).

Some of the attributes you can change are as follows:

  • margins
  • padding
  • borders
  • alignment
  • text-decoration (underlining, overlining, etc.)
  • text-transform (uppercase, lowercase, capitalize)

And many more!

Our CSS Cookbook is a great place to get ideas of even more changes you can make to your blog.  Our Tips and Tricks category also has more great CSS to try out on your blog. And don't forget - we're here to help!

Getting To Know CSS: Getting Started

April 09, 2014

Back_to_basics_header_css

Welcome to our special series on getting to know CSS! Every other week, we'll debut a new article full of valuable tips and tricks that will help you to understand how CSS works and how to apply it to your blog. We'll cover everything from the very basics, to fancy tricks, to the best way to find the code you need for your very own blog. Get ready to advance your skill set!

Now that we're all HTML experts (thanks to our Back To Basics To HTML series), it's time to move ahead and learn how to apply CSS to what we have built on our blogs.   Today we'll be going over what CSS is, and how and when to use it.

What is CSS?

CSS stands for Cascading Style Sheets and is used to style the markup language you've created on your site.  CSS gives you more control and flexibility over your layout than what HTML can offer.  HTML provides the foundation and content where CSS will enhance the presentation of the HTML.  It is best to not mix CSS with HTML together which is why a stylesheet is saved separately.

Where can I add CSS on my blog?

On Typepad for Unlimited users and higher, we've made it easy to add custom CSS to your layout by going to Design > Custom CSS, there is no need to set up Advanced Templates.   Some examples of element changes you can make are fonts, colors, column widths, background images, advanced positions and more.

Screen Shot 2014-04-04 at 1.14.11 PM

CSS minimizes the amount of coding needed for your site which will save on loading time.  For instance, if you have H2 sized headers throughout your blog but you wish to have them appear as bold, with HTML you will have to insert the bold HTML code <b></b> on every header which can be time consuming and clunky code-wise. With CSS, you can just set up all header elements to appear as bold at once.

How is CSS formatted?

The written format for CSS code is broken into two areas: the selector, which can be an Element, Class or ID; and then the property and property value. The selector and property info is grouped together within a curly brackets set.  

An Element selector specifies HTML tags (e.g. p, img, a), which can be as general as applying to all instances of the tag selected, or can be a child of a specific class or ID

p { property: value; }
.entry-body p { property: value; }

A Class is denoted by a period prefixed to the selector name. Classes are used for items that often appear in multiples (e.g. modules, list items, posts).

CSS classes are coded as: .element { property: value; }

IDs are used for when you want to specify one section of your layout (e.g. banner, navigation bar) and are denoted by prefixing the selector name with a hash or "#": #element { property: value; }

When can I use CSS?

CSS comes into play when you want to change or tweak your design and format.  It is not used to add additional content like advertisements and third-party widgets.

Need CSS? Yes No
Position your Navigation Links or Banner? X  
Inserting Javascript?   X
Changing the size of your columns? X  
Change the font of your blog post titles? X  
Add an image as your background? X  
Hide post footer links like tags, comments, permalink? X  
Add to a blog post or comment?    X
Change default post font? X  
Add banner to pre-defined theme? X  
Add buttons, badges, widgets?    X

Ready to level up? You're in luck! Over the course of our Getting to Know CSS series, we will be going over other features and functions of CSS, teaching you about editing and adding elements to your stylesheets, and finding which classes will work best with your specific Typepad theme. Stay tuned!

Tips for Customizing the New Responsive Snap Theme

April 04, 2014

We recently released a brand new theme to beta subscribers called Snap. The main feature that makes this theme special is that it's responsive. Check out our announcement post for more details about the theme and how to use it on your blog.

Snap

If you like the way the theme works but want to make it a little more yours, we're here to help with that, too. There are some easy changes you can make using CSS that will allow you to use your own colors, fonts and banner images. We'll be going into some of those ideas in this post. Please note that we're using the Custom CSS feature, which is available at the Unlimited level and above.

Custom Colors

We got a little carried away with flavors for the Snap theme and created a dozen to choose from. But it's possible that none of those colors suit your blog. Let's rectify that with some super easy code, like this:

h1 a,
.entry-header a,
.entry-header,
.module-header a,
.module-header,
.entry-body a,
.module-content a:hover,
.module-calendar a { color: #D60077 !important; }

.navbar { background: #D60077; }

.navbar a { color: #fff !important; }

That's the default code to make the banner text, post headers, sidebar headers, links and navigation bar pink. Just switch out the HTML color code with your own and you're done. You can pull out specific classes if you want to use different colors in specific areas.

Custom Fonts

We kept the fonts for this theme very simple so they'd be easy to customize with your own. Here's the default code:

body { font-family: Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6, .module-email  { font-family: Georgia, Times New Roman, serif; }

That makes body text Helvetica/Arial and headers Georgia/Times New Roman. Just switch out the font names with your favorite web safe font for an easy update. Or you can use a web font from a service like Google Web Fonts for even more customization options.

Custom Image Banner

This is the one we've heard the most requests for and we wanted to get the code just right. Due to the nature of responsive design, there isn't a one-size-fits-all solution for this but we'll make it as straight forward as possible.

Continue reading "Tips for Customizing the New Responsive Snap Theme" »

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.