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

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.

Back to Basics: More Advanced HTML

March 26, 2014

Back to Basics HTML

Welcome to our special series on getting to know HTML! Every other week, we've debuted a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out the other posts in our series: part 1, part 2, part 3, and part 4.

We have covered some of the basics of HTML over the last few weeks, but there are many, many more HTML tags. Here's a quick introduction to some more advanced HTML elements and how you would use them:

Anchor tags are added within the content of a webpage to allow readers to jump to various sections of the post. We use this element often in the Knowledge Base as you can see by visiting this article and clicking a link in the list. Additionally, we have a great tutorial on Anchor Tags in the Knowledge Base.

Script tags are seen in widgets and ads and other dynamic elements added with HTML. For example, if you were to configure the Twitter Timeline widget, you would be provided with a block of HTML including script tags that you can copy and paste into the custom sidebar module. You likely won't need to write your code which includes script tags, but you may see it frequently when adding third-party content to your blog.

Embed tags are commonly used to embed audio and video players. Example: <embed src="http://example.typepad.com/weblog/files/video.mov" height="315px" width="460px" autostart="0"></embed>

Iframe tags are also used to embed content, and if you embed YouTube videos, for example, the share code uses iframe tags. Example: <iframe width="560" height="315" src="http://www.youtube.com/watch?v=N1FNL_iIp5c" frameborder="0" allowfullscreen></iframe>

In our next special series of posts, we will be discussing the basics of CSS to make changes to design elements. CSS uses HTML tags to group together a section of content which can then be formatted using CSS, so it's helpful to understand div and span tags and their associated attributes.

Div (short for division) tags are used to group a large block of content. The content surrounded by div tags is block-line which applies paragraph like formatting with a line break above and below the content.

Span tags are used for small blocks of content typically within a larger paragraph. The content surrounded by span tags is in-line, or inside a paragraph.

The attributes for span and div tags are id and class.

The id attribute is used to identify one element.

The class attribute can be used to classify multiple elements.

Like all HTML tags, it is important to make sure to open and close all div and span tags. An open div tag can cause major display issues on your blog, so make sure every <div> has a corresponding </div>.

Here's an example of how you would use div and span tags:

<div class="author-quote">
<p>To read well, that is, to read true books in a true spirit, is a noble exercise, and one that will task the reader more than any exercise which the customs of the day esteem. <span id="author">Henry David Thoreau in <em>Walden</em></span></p>
</div>

In the next series on the basics of CSS, we'll explain how to then use CSS to make formatting changes to the elements in the div and span containers.

We have certainly not provided a complete list of HTML tags in this series, and we've only touched on some of the tags. A wealth of information is available online, and you'll also find HTML generators that will guide through the process of getting the proper HTML without the need to hand code it. Let us know if there is some HTML you want to learn about in the comments, and we'll write up additional tutorials.

Back to Basics: Understanding and Using Tables

March 12, 2014

Welcome to our special series on getting to know HTML! Every other week, we'll debut a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out the other posts in our series here.

So far in our HTML series, we've covered the basics, HTML for images, and lists and headers. Today, we're going to learn how tables work and how to use them in blog posts.

It's likely that you've used a table in a spreadsheet or other document - they're great for laying out information in an easy-to-read format. The HTML for tables can be a little tricky to grasp, though. So let's break it down into bite sized pieces.

Let's start with a very basic table, like this:

Name Age Location
Bob 25 California
Lisa 35 New York

First, we'll use a table and a tbody tag to get the table started:

<table>
<tbody>
....
</tbody>
</table>

All of the table elements will go within those tags.

Continue reading "Back to Basics: Understanding and Using Tables" »

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.