• Shortcuts : 'n' next unread feed - 'p' previous unread feed • Styles : 1 2

» Publishers, Monetize your RSS feeds with FeedShow:  More infos  (Show/Hide Ads)

Date: Tuesday, 22 Apr 2014 00:42

Please follow us on Twitter for the most current updates on this issue.

Update 21-April-2014 9:45AM PT: We're sorry to inform you that Typepad was attacked again overnight. Our team has been working around the clock to restore service. While most blogs are available and the application is up, some mapped domains are showing a message that the domain is "unknown", but there is no problem with the domain itself. We're working to correct the error on our end.

First, let us say how much we appreciate all members of the Typepad community. We know the last few days have been trying and stressful to you all and us. Please know you have a team of people who love Typepad who have been working and continue to work to keep Typepad up 24/7.

What happened? Beginning Thursday evening, Typepad was hit with a distributed denial of service (DDoS) off and on through today. A DDoS attack is an attempt to make services unavailable, but in no way was your Typepad account compromised. All information in your Typepad account is secure, including billing information. The attack on Typepad was similar to an attack on Basecamp which you can read about here.

The Typepad blogs and application have been restored. We put in place some roadblocks to mitigate the attack, but we are on high alert as attackers change their tactics regularly.

We really appreciate all members of the Typepad community and your patience during this time. We're here to answer any questions you may have about the attack.

Author: "The Typepad Team" Tags: "News"
Send by mail Print  Save  Delicious 
Date: Thursday, 17 Apr 2014 19:21

Late last year we retired the Blogside Toolbar in order to address some minor security issues, loading time, and the like.  Several of you were saddened that this removed the ability to edit your posts on the fly, so we've added a new feature that brings this back, available today to our Beta Team.

To enable this, go to Settings > Posts and make sure the "Edit Links" option is set to On.  Once you do this, you'll see an "Edit Post" link under your blog title like this:


Now, you can click on that link and the Compose page for the post will open in a new window.  You can make edits without hunting for the post on the Posts tab.  We have more information on this in the Knowledge Base.

If you'd like to add this now, sign up for the Beta Team and you can start using it right away.  Otherwise, expect this to show up in your account soon!

Author: "The Typepad Team" Tags: "Features"
Send by mail Print  Save  Delicious 
Date: Wednesday, 16 Apr 2014 16:32

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.

Indent Author Comments

The CSS to indent comments submitted by the post author is:

.comment-by-owner { margin: 0px 0px 0px 40px; }

You can adjust the 40px to be more or less depending on how you want your comments to appear.

If you are using the new responsive Snap Theme, you may also want to remove the border which appears below all comments with the CSS:

.comment { border-bottom: none; }

Change Background Color For Author Comments

Applying a background color can make the author comments really stand out from the other comments. The CSS to add a background color is:

.comment-by-owner { background-color: #F6F6F6 !important; }

The color code #F6F6F6 can be changed to your preferred background color. For help with color codes, you can use a color picker to get the color's hex code.

If you've set userpics to appear next to each comment, then you'll need to also include:

.comment-by-owner .comment-avatar {
 padding: 5px 0px 0px 5px;
.comment-by-owner .comment-content {
 padding: 5px 0px 0px 0px;

If you are using the new Snap Theme, you don't need the above code for comment userpics, just the .comment-by-owner { background-color: #F6F6F6; } code.

Add Border Around Author Comments

In addition to or instead of a background color, you can add a border around author comments with the below CSS:

.comment-by-owner { border: 1px solid #C0C0C0; }

If you've set userpics to appear next to each comment, then you'll need to also include:

.comment-by-owner .comment-avatar {
 padding: 5px 0px 0px 5px;
.comment-by-owner .comment-content {
 padding: 5px 0px 0px 0px;

Again, with the new Snap Theme, you don't need the CSS to accommodate for the comment userpics, but we do recommend including some padding. Here's the recommended code to add a border around author comments when using the Snap Theme:

.comment-by-owner { border: 1px solid #000000; }
.comment-by-owner { padding: 0px 16px 16px 16px; }

If you combine all the above tips together on the Snap Theme, the below screenshot shows how the author comments appear compared to reader comments.

Styled Author Comments

These tips work for the default commenting system and Typepad Connect comments. If you are using Disqus for comments, you can set a Moderator label to make your comments stand out in the Disqus thread. Learn more.

What do you think? Do you have other ideas for how to style comments? If so, let us know in the comments, and we can share more tips.

Author: "The Typepad Team" Tags: "Typepad University"
Send by mail Print  Save  Delicious 
Date: Friday, 11 Apr 2014 21:00

Once a month, we scout for great blogs in the Typepad Showcase that fit a particular theme and are guaranteed to inspire. This month, we've hand-picked six great fashion and style blogs we think you'll love. Each one is guaranteed to captivate, inspire you, and make you think about your next style move - whether you're a fashionista or not. Click through the photos below to visit each blog, and see why we think they're fantastic.

Ready? Let's go!

Irenebrination: Notes on Architecture, Art, Fashion and Style


Style Bubble


Kingdom of Style


Fashion Copious


Wolf Whistle


Suzanne Carillo Style Files


We hope you enjoyed this month's roundup of fantastic Typepad blogs! Check out more great style blogs right here. We'd love to see your blog in the Typepad Showcase, so go ahead and submit it today - you might just see yourself in the spotlight!

Author: "The Typepad Team" Tags: "Blogging Community"
Send by mail Print  Save  Delicious 
Date: Friday, 11 Apr 2014 17:32

We were hoping that our post last week about customizing our new Snap theme would tempt more of you to try the design out and give us some much desired feedback. Alas, we're just not getting the input we've been hoping for. So, we're upping the ante with new features that are only available if you use the Snap theme.

First, we have two additions to the navigation bar: you can center the links and include social media icons. Here's what to look for in Blogs > Design > Content: Navigation Bar:

image from http://s3.amazonaws.com/hires.aviary.com/k/mr6i2hifk4wxt1dp/14041023/5688cd26-8cea-44e7-a8d1-db9e91dc174b.png

And here's how the two options look together on a blog:

image from http://s3.amazonaws.com/hires.aviary.com/k/mr6i2hifk4wxt1dp/14041023/3c1dcf28-ceaa-4204-9219-80b9dc10389a.png

Cool, right? The social icons come from the profiles you've added on the Account > Other Accounts page, so make sure you have your social media profiles listed there.

The second new feature is what we're calling Post Link Tooltips. This can be selected from the Blogs > Design > Content page as well. Here's what to look for:

image from http://s3.amazonaws.com/hires.aviary.com/k/mr6i2hifk4wxt1dp/14041023/7be6130b-cad9-448b-80c6-5dc320bf25a0.png

This feature adds a little hover effect to the links you include in your blog posts. The tooltip will use the title field from the Insert Link tool. Here's a visual of how that works:


Also cool, yeah? Don't you want to give this awesome theme a whirl? If you do, head over to our original announcement post for all the details. Then, after you've had some time to play with the bubble wrap and kick the tires, open a help ticket and let us know what you think. If you find something that looks amiss, we need to know. If you love it and think it's perfect, we won't turn away that feedback, either.

Author: "The Typepad Team" Tags: "News"
Send by mail Print  Save  Delicious 
Date: Thursday, 10 Apr 2014 17:53

We know that search engine optimization is important to all of our Typepad subscribers, so we wanted to let everyone know about a neat little feature we've recentally released - meta descriptions for Pages. We've had meta descriptions for posts already, but now your Pages have the same option.

When composing your Page, the Excerpt field can be used to generate a short summary of it. If you do not write an excerpt yourself, one will be generated automatically from the first 100 words of the post or the number of words you have set in Settings > Posts & Pages, under Auto-Generated Excerpt Length. This excerpt will also be used as the Meta Description for the Page and picked up by search engines like Google.

It's just another great way that Typepad helps your and your blog get the attention it deserves.

We've also added a new account level, Enterprise. Enterprise is aimed at small companies and other organizations who would like to add a blog administrator to their blog but for whom Typepad Business Class has been out of their budget. You can sign up for the Enterprise level here.

Author: "The Typepad Team" Tags: "Features"
Send by mail Print  Save  Delicious 
Date: Wednesday, 09 Apr 2014 19:58

An encryption flaw called the Heartbleed bug has exposed a collection of popular websites, posing a potential security threat to credit card information and passwords. We want to assure you that Typepad is not one of the websites affected, and your information is safe.

The security of our bloggers is a top priority. We were able to confirm that Typepad was not vulnerable to the Heartbleed bug as soon as the bug itself was discovered, and we worked diligently to ensure that none of our bloggers' personal information was compromised. As always, we will continue to work to protect the security of Typepad users and their data.

Your Community and Support team is always here to help, so please reach out if you have any lingering concerns about the Heartbleed bug.

Author: "The Typepad Team" Tags: "News"
Send by mail Print  Save  Delicious 
Date: Wednesday, 09 Apr 2014 17:28


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!

Author: "The Typepad Team" Tags: "Tips and Tricks"
Send by mail Print  Save  Delicious 
Date: Tuesday, 08 Apr 2014 22:55

NAME: Alice Feiring
BLOG: The Feiring Line
WHY YOU'LL LOVE IT: Alice Feiring is a journalist, author, and former wine and travel columnist for Time magazine, known as an advocate for natural wine. In addition to contributions to publications such as The New York Times, New York Magazine, San Francisco Chronicle, LA Times, Condé Nast Traveler and Forbes Traveler, her blog has been rated among America's leading wine blogs, and her voice described by Mike Steinberger as part of a new wave of "real flowering of high-quality wine journalism".


FOLLOW: Typepad | Twitter

Author: "The Typepad Team" Tags: "Featured Blogs"
Send by mail Print  Save  Delicious 
Date: Friday, 04 Apr 2014 19:36

Did you know Typepad is on Pinterest? It's true! We love pinning and repinning great content from Typepad blogs in every genre, and we're always looking for great, inspirational content. Are you on Pinterest? Drop your link in the comments, and don't forget to follow Typepad right here! If you're not on Pinterest yet, check it out - it's a great way to promote your blog and connect with others! 

Want some inspiration? Check out our featured pinner, Attic24!

Last month Attic24 celebrated their six year anniversary on Typepad. A source for the crochet enthusiast filled with colorful pin worthy images.


FOLLOW: Pinterest | Blog

Want to promote your pinterest account on your Typepad blog? Just go to Blogs > Content and add the Pinterest Widget to your Sidebar via the center menu. While you're there, make your blog posts "pinable" by adding the Pin It button to your post footers.

Want even more? Learn how to promote your blog on Pinterest and follow Typepad at www.pinterest.com/typepad.

Author: "The Typepad Team" Tags: "Blogging Community"
Send by mail Print  Save  Delicious 
Date: Friday, 04 Apr 2014 16:44

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.


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,
.module-header a,
.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.

First, you'll create your banner image. For the banner width, we recommend 1170 pixels. That seems really large but it will scale down in the code to suit smaller screens. For the height, we recommend keeping it under 200 pixels to prevent the image from pushing the blog content down below the fold.

After creating your image, go to Library > File Manager and upload it. Click on the image's file name in the listing and keep that open in another tab - you'll need the URL soon.

Next, go to the Custom CSS page and paste this in:

.container .jumbotron { padding: 0; }
.jumbotron { padding: 0; margin-top: 15px; }
.jumbotron h1 { margin: 0; }
.jumbotron h2 { display: none; }

That just removes some padding, hides the blog description, etc. Now let's add in the image:

.jumbotron h1 a {
background: url(http://example.typepad.com/folder/banner.jpg) center top no-repeat;
background-size: contain;
display: block;
left: 0;
top: 0;
height: 200px;
width: 100%;
text-indent: -1000em;
min-width: 320px;

Make sure to switch out the URL with your own, using the full URL. You'll also need to set the 200px for the height to the height of your image. Finally, add this:

/* Extra Small */
@media (max-width: 768px) {
.jumbotron { height: 90px; }

/* Small */
@media (min-width: 768px) {
.jumbotron { height: 140px; }

/* Medium */
@media (min-width: 992px) {
.jumbotron { height: 180px; }

/* Large */
@media (min-width: 1200px) {
.jumbotron { height: 200px; }

That tells the screen to scale the height down based on the width. Start with the Large - that's the height of the banner image at its starting point. Then it should progressively get smaller, using about the same changes shown in our example code.

In the image below, you can see how the banner will look on a 800x600 screen versus a 1024x768 screen. The banner is slightly smaller to fit into the screen properly.


Bonus tip!

At the smallest screen sizes, it looks really nice to hide the large banner and switch out the "Home" link in the navigation bar with a smaller version.

To do this, create your smaller banner and upload that to Library > File Manager. The width should be no wider than 250 pixels and the height should be 50 pixels.

Then instead of this code from the above:

/* Extra Small */
@media (max-width: 768px) {
.jumbotron { height: 90px; }

Use this:

/* Extra Small */
@media (max-width: 768px) {

.jumbotron  { display: none; }

.navbar-header a:hover {
display: block;
left: 0;
top: 0;
text-indent: -1000em;
height: 50px;
width: 200px;
background: transparent url(http://example.typepad.com/folder/banner.jpg) center center no-repeat !important;

.navbar-brand a {
height: 50px;
width: 200px;

Make sure to change out the image URL with your own and adjust the width size to match your image. Here's an example of how that would look on a mobile device:


We need your help!

We really want you to try out the Snap theme - we're going to be basing a lot of our upcoming themes on the responsive structure and we need your feedback. We'll be releasing it to all subscribers soon, so that means beta users get the first crack at it but not for long. If you have any questions about the theme, just let us know! We're eager for your feedback.

Author: "The Typepad Team" Tags: "Tips and Tricks"
Send by mail Print  Save  Delicious 
Date: Wednesday, 02 Apr 2014 23:52

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.

Author: "The Typepad Team" Tags: "Tips and Tricks, Typepad University"
Send by mail Print  Save  Delicious 
Date: Tuesday, 01 Apr 2014 20:13

NAME: Jennifer Casa
BLOG: JCasa Blog: Make Something Special
WHY YOU'LL LOVE IT: A self-taught designer who sews and knits, JCasa creates original pieces that add both function and style to everyday life. In her extensive collection of patterns and projects, she taps into her many years of teaching experience while designing and strives to encourage beginners to embrace needlework and crafts with simple instructions, and a goodly sense of humor. Her blog is a lovely slice of life, with great photos and anecdotes that will inspire and entertain you.


FOLLOW: Twitter | Typepad

Author: "The Typepad Team" Tags: "Featured Blogs"
Send by mail Print  Save  Delicious 
Date: Friday, 28 Mar 2014 18:52

After receiving requests from our bloggers to see Loft with layout options, we're giving you what you've been asking for! The popular theme now boasts two different two-column options, looking gorgeous with a sidebar on the right or the left. 

Go on, tell it it's pretty.

Loft - two column layout

With both a two-column-right and a two-column-left option, it's now easier than ever to keep the look of your blog in place while reducing the need to scroll to view sidebar content. Loft remains clean, swank, and a bit too hipster for its own good, which is why we all love it so much.

Note: The Loft theme in a two-column layout automatically hides the reblog, digg, and delicious buttons in the post footer in order for the alignment to remain intact. Other than that, everything else is the same.

Go to Design > Layouts, and preview your blog with one of the two-column options to see how your content looks. Did you fall in love? Then click to apply the theme and save your changes! 

Author: "The Typepad Team" Tags: "News"
Send by mail Print  Save  Delicious 
Date: Wednesday, 26 Mar 2014 16:07

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>

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.

Author: "The Typepad Team" Tags: "Tips and Tricks"
Send by mail Print  Save  Delicious 
Date: Tuesday, 25 Mar 2014 22:29

NAME: Dina Remi
BLOG: Dina Remi Studios
WHY YOU'LL LOVE IT: Dina Remi is a talented photographer who focuses on lovely visual storytelling in wedding, lifestyle, and family photography. She uses Typepad in a unique way, showcasing her blog, portfolio, and a complete package of information about her services, all in one place; the perfect example of how well running a business on Typepad can work.

Dina's site design is clean and modern, and with the addition of some clever coding, rather fancy too (take a look at her gorgeous portfolio, here). Make sure to take a look through the stunning photography on her chic, simple blog as well - it is absolutely enchanting.


FOLLOW: Typepad | Facebook

Author: "The Typepad Team" Tags: "Featured Blogs"
Send by mail Print  Save  Delicious 
Date: Wednesday, 19 Mar 2014 16:18

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

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

Blog Post Title

Screen Shot 2014-03-01 at 2.13.29 PM

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

Your Permalink

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

Body Content

Screen Shot 2014-03-01 at 2.14.00 PM

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


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


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

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

Settings > Posts & Pages, under Auto-Generated Excerpt Length. - See more at: http://help.typepad.com/compose_overview.html#sthash.jvyCINj8.dpuf
or the number of words you have set in Settings > Posts & Pages, under Auto-Generated Excerpt Length. - See more at: http://help.typepad.com/compose_overview.html#sthash.jvyCINj8.dpuf
or the number of words you have set in Settings > Posts & Pages, under Auto-Generated Excerpt Length. - See more at: http://help.typepad.com/compose_overview.html#sthash.jvyCINj8.dpuf
Author: "The Typepad Team" Tags: "Typepad University"
Send by mail Print  Save  Delicious 
Date: Monday, 17 Mar 2014 21:48

NAME: Anna Farmery
BLOG: The Engaging Brand
WHY YOU'LL LOVE IT: The Engaging Brand is an award-winning business blog written by Social Media and Business Maven Anna Farmery, an industry powerhouse and veteran Typepad blogger who is a master of creative ideas for developing both businesses and business people. Energetic and engaging, Anna spends much of her time speaking and delivering workshops on branding, social leadership and social media. She runs a popular podcast and offers up a veritable cornucopia of free ideas and resources for growing a successful business.

The Engaging Brand

FOLLOW: Typepad | Twitter

Author: "The Typepad Team" Tags: "Featured Blogs"
Send by mail Print  Save  Delicious 
Date: Monday, 17 Mar 2014 20:17

We have a very special and exciting new feature that we hope all of you Beta users will try out: a Responsive blog theme! This is for all of you folks who have asked for blog designs that look great at any screen size, from tiny mobile phones all the way up to giant widescreen monitors. Oh yeah, it's awesome.


There are a lot of technical details around responsive design but all you really need to know is that your blog will look good at any screen size, without the need for a separate mobile version of the blog or the theme. It's all in one - the design itself adapts and responds to the size of the reader's screen.

Because this is a brand new thing for us, we wanted to start with a simple theme that Beta users can try out and put to the test. If you don't want to use it on your blog, we understand! We have instructions for creating a test blog so you can see the design in action before making a committment.

To use the theme, just go to Blogs > Design: Choose a theme and look for Snap in the list of all themes. Then take a look at your blog on your computer, your mobile, your tablets, your microwave ovens - anything you can use to get online.

Here are some notes to keep in mind:

We're mostly testing for functionality at this point. We'll be adding fancier looking responsive themes soon but we need to get the foundation in place first. You can still jazz the current theme up with Custom CSS, if you're so inclined.

Some features are different with the responsive theme:

  • The navigation bar has four options for where it shows (sticky at the top or bottom of the page, above the banner or below the banner) but you won't be able to use Advanced coding there. We think the enhanced positioning is worth the trade off. Plus, something neat happens at the smallest screen size, so you'll want to check that out.
  • We've streamlined the post footer sharing options and styled those to look nice.
  • Images in blog posts are responsive, too! They'll scale down at smaller screen sizes automatically. It works best if you insert your images at the small, medium, large or "full" settings, rather than a fixed pixel width.

With the above points in mind, we really, really want you to try the theme out and give us your feedback and findings. You'll be helping us build a solid foundaton for future responsive themes.

If you see anything that looks like it doesn't belong or isn't quite right, just open a help ticket and tell us what you're seeing. Please be sure to include browser/device info, the link to your blog that's using the theme and if you have a screenshot, that's helpful, too.

Author: "The Typepad Team" Tags: "News"
Send by mail Print  Save  Delicious 
Date: Friday, 14 Mar 2014 17:36


Last year, we developed the Typepad Advisory Panel (TAP), a group of Typepad bloggers who helped us to make decisions throughout the year about Typepad's features and future. It was a fantastic team and a big success, and now it's time for an all new Typepad Advisory Panel for 2014. Interested in having your voice heard? Read on:

Is this you?

You have an active Typepad blog where you communicate with your readers on a regular basis. You love blogging on Typepad, but there are one or two things that you feel could be just a little bit better, and you think you might know how to make it happen.

Get on board:

We all know that Typepad is the best blogging service around, and in order for us to develop and grow (and remain the best), we need your help. That's why we're forming a new advisory panel for 2014 made up of Typepad bloggers like you, powered by enthusiasm, dedication, and the zeal to get things done.

So, if you are:

- Enthusiastic about blogging with Typepad
- Full of ideas and the need to share them
- Building a decent following on your blog and Twitter/Facebook Fan Page

Then TAP may be perfect for you. If you don't meet all of the criteria above, don't worry! Enthusiasm, consistent blogging, and a desire to make Typepad the best it can be are the most important factors.

What's in it for you?

As a dedicated Typepad blogger, joining the advisory panel provides you with the opportunity to continue to shape and improve Typepad. Other benefits include a better blogging experience, the opportunity to have your voice heard, and a special place on the Typepad Team. You'll also receive Typepad swag, discounts, and maybe even some free service time on us.

Sounds good, right? If you're interested in joining or just want more information, send an email to hello@typepad.com - making sure to include your blog URL - and let us know! We'd love to have you on board.

Author: "The Typepad Team" Tags: "Blogging Community"
Send by mail Print  Save  Delicious 
Next page
» You can also retrieve older items : Read
» © All content and copyrights belong to their respective authors.«
» © FeedShow - Online RSS Feeds Reader