Customizing the "Continue Reading" Link with CSS

August 13, 2014

Note: Today's tip uses the Custom CSS feature, which is available at the Pro Unlimited subscription level and above. Upgrading is easy - learn how here.

If you use the Split Extended Entry feature, you know that it's a great way to tease your readers with an excerpt of your post on the main and archived pages of the blog. The link that appears then easily guides the reader to the rest of the post content.

Here's how it looks:

Default link

Let's learn how to jazz that link up a bit. The class name for the link is entry-more-link, so that will be our starting point. To keep things simple, let's make the link a little larger in size and bold, like this:

.entry-more-link a { font-weight: bold;  font-size: 125%; }

Changing the font is as easy as:

.entry-more-link a { font-family: Courier, Arial, sans-serif; }

It's a good idea to stick to websafe fonts. You can learn about those at w3schools.

A color change for the link is easy, too! You can find a ton of colors to choose from here. Just replace the CC6600 in the example below with your own color code.

.entry-more-link a { color: #CC6600; }

If you want to get really fancy, you can replace the entire link with one image. This is great if you have a special font you want to use or if you want to draw attention to the link with a graphic.

First, create your image and save that to your computer in a websafe file format - GIF, PNG or JPG. The image shouldn't be too large. Our example is 160 pixels by 35 pixels - large enough to stand out but it doesn't dominate the post too much.

Then, go to Library > File Manager in Typepad and upload your image. After uploading the image, click on the filename in the listing. That will open the image so you can copy the URL from the browser's address bar.

Next, go to Blogs > Design > Custom CSS and add in this code:

.entry-more-link a {
display: block;
text-indent: -999px;
background: transparent url(http://example.typepad.com/folder/read-more.gif) left center no-repeat;
padding: 10px 0;
}

Be sure to update the code with the URL for your image in the area highlighted above. You may also need to adjust the padding to allow your full image to show. When you save and view the blog, you should see your image where the "continue reading" link was, like this:

Link with image

Looking good! And it wasn't too difficult, right?

We love to share little ways to make your blog special. What are some customizations you'd like us to cover? Let us know in the comments!

Avoiding Common Blogging Mistakes: Filler Content

August 06, 2014

Avoid Common Blogging Mistakes - Filler Content

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.

In light of the recent Google Panda algorithm sending some bloggers' statistics into decline, one of the more common issues that bloggers reported being penalized for was having what we refer to as a filler post.

A filler post is one that doesn't consist of much content: a lone image or file; or a short paragraph without substance. The rare filler post, served as a quick update to your readers, may be acceptable, but we highly encourage blog owners to consider how they can write a more complete post so as not to be penalized for something that's avoidable.

Ways to Kill the Cheap Fill

  • Can't keep up with your posting schedule?
    Decide whether you need to change it to make it less demanding (it is your blog after all). Post your best and you won't disappoint yourself or your readers, even if that means posting once a week or less.
  • In a creative funk?
    Make better use of when you're feeling your most creative by jotting down notes, taking photographs, mapping destinations, writing a bulleted list, creating pie charts—it's up to you! Once you have those items, you can use the momentum to create drafts of posts in your blog that you can then go back to develop at a later time. This can help rejuvenate you when you're in a slump, saves you time, and reduces stress.
  • Still don't feel like some of your post topics can stand on their own just yet?
    Shelve them and go back to them later! Or perhaps what you need to do is challenge yourself in some way related to the topic—consider all angles, try something different, approach it from another direction, or completely flip it on its head and do the unexpected. Work it until it solidifies. Don't chew it to death, but there should be meat enough to entice the reader to keep looking, keep reading, and to keep coming back for more.

When You Can't Avoid the Fill? Reinvent it.

Reinvent what a filler post means for your blog. Instead of publishing a post that's essentially a fluffy bit of nothing, change what filler content means for your blog, without the fear of search engine penalties. How you choose to reinvent it is up to you, as well as what your goals are for your blog. You can brainstorm and decide what's right for you, but here are a few ideas to get the wheels turning:

  • Invite guest bloggers to post on a specific topic.
    This can be something you'd like to cover as well, giving readers different views on the same topic, or it can be something you'd like to learn more about and think your readers would as well.
  • Write up a report on some event or thing.
    This doesn't have to be a book report like the ones that made your insides squirm back in your school days (unless you were a lovable nerd like some of the support staff who loved book report days). Take a step back and consider how your readers might be curious about some of the things you do, create, have, succeeded or failed at, and so on. You may not have thought it would be of interest to them, but we bet there are more than you think.
  • Start a discussion with your readers.
    Blogging doesn't have to be a one-way street—in fact, it really shouldn't be, unless that's what you prefer. Posting discussion points, and trying to engage your readers, is more than just slapping questions in a post. Take care to answer them yourself so that it's communicative and real content. An added bonus of building a community through discussion is that it can provide a place where an unexpected exchange of ideas happens, giving you more to write about at a later time.

Quantity Isn't Everything

An important factor to remember about blogging is that the amount of posts you publish each week, month, or ever, isn't everything; that should never be your real goal. Quality beats quantity every time, and why that is lies in one aspect of blogging that is often forgot: the general format of blog posts and blogging is setup to foster connections.

Readers want to establish a connection, to find something interesting in what you say and share—to find that common denominator so they can relate. Giving anything less than that to your blog, and to your readers, so that you can appear to have more real content than you do, can become exhausting—more to the point, disheartening.

To feel like the quality of your work means something, and to avoid having your blog penalized for filler, strive for the quality. Stop thinking about filling the gaps between published dates. You'll find that even some of your shorter posts become less fill and more substance.

Have thoughts about filler posts and how to avoid them? Leave a comment and let us know!

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!

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.