Typepad 101: Displaying An Event Calendar On Your Blog

April 08, 2015

Do you have a tour coming up? Appearance dates to promote your new book?  Or upcoming yoga workshops you're teaching?

A quick way to share your upcoming dates with your readers is by including a Google Events Calendar either in your sidebar or as a link to a separate page.  (This is not the same as the Calendar module included in Typepad which helps readers look up blog posts by date.)

Screen Shot 2015-03-30 at 4.35.18 PM

If you have a Google account, you can get the embed code to display your Google Calendar on your blog. Open your Google Calendar and look for "My Calendars" on the left. Click the drop-down button next to “My calendars” and click “Settings.  If you have more than one calendar, click the link of the calendar you want to share.

Googlecal

There is a section titled “Embed This Calendar” which will allow you to customize how you want the calendar to appear on your blog. You can change the “width=800px” size to cater to the size of your column.

Screen Shot 2015-03-31 at 3.08.27 PM

Like adding other custom sidebar content, you can also paste this code into an “Embed Your Own HTML” module at Design > Content, so it can appear in your sidebar as shown above.

To display a larger calendar on your blog, you can create a Page to display a larger version of the same calendar.  Simply paste the same embed code using the HTML editor tab of the page.

Screen Shot 2015-03-30 at 4.52.56 PMAnother free calendar you can embed to your blog if you choose not to use Google is UpTo which also provides you with HTML to add to your blog.  Once you get their embed code, you can follow the same steps shared here on how to share it on your blog.

Do you have an event calendar on your blog? Do you use something else besides Google and UpTo? Let us know in the comments!

Typepad 101: Responsive Designs and Mobile Usability Issues

March 25, 2015

Recently you may have received an e-mail from Google about mobile usability issues on your blog.  It would look something like this:

Tool_reportThat looks scary, right?  It might look that way, but don't panic!  It actually isn't that scary at all.

All this means is that your blog needs to have a Responsive design applied to it. If you're wondering what exactly this does, it means that your blog will look as it should across all devices, whether it's a traditional laptop or desktop computer or the fanciest new tablet or smart phone.  With the number of people accessing the Internet from mobile devices, making sure your blog is readable on all of them is very important.

Responsive_set

All Typepad bloggers have access to three Responsive pre-made themes: Gourmet, Sol, and Snap.  You can use any of these themes to your blog by going to Design, clicking the green "Choose a theme" button, and looking for the Responsive category.  Click the one you like best, apply it to your blog, and you're set!

If you're a Beta Team member, you'll have two additional options: the Responsive Theme Builder and the Nimble Design Lab.

It's easy to use the Responsive Theme Builder.  It works just as the Theme Builder you know and love, but has a few more options, including the option to make the theme Responsive. When creating your theme, just check the "Create as Responsive" box and your blog is now a Responsive blog!

Finally, you can use the Nimble Design Lab to make your blog Responsive.  We've been talking about Nimble a lot around here lately (Check back tomorrow to find out about even more new features!), but that's only because it's the most exciting design element in Typepad.

Nimble's got options for just about everything and we're currently making weekly updates to the system to incorporate additional features that we've been planning on releasing and features based on your own feedback and suggestions.

Once you've selected one of these designs and applied it to your blog, you can check your blog in the Mobile-Friendly Test tool. You should receive a “mobile-friendly” score, indicating that your blog is now ready to be viewed across all types of devices.

You can also read more about Responsive themes in our Knowledge Base.  If you've still got questions or need any further assistance with figuring out how to move to a Responsive theme, just open a help ticket and one of our support team members will get you straightened out!

Typepad 101: Easy "Sticky" Navigation Bar

March 11, 2015

Note: This tip requires the use of Custom CSS, which is available to subscribers at the Unlimited level and above. Learn how you can upgrade your account to take advantage of this great feature here.

Today, we're learning how to make your blog's Navigation Bar "stick" at the top of the page. That means that the Navigation Bar will sit right at the top of the browser window and stay in that spot when a reader scrolls down.

This is awesome because it allows you to keep important navigation links front and center. And it's really easy to execute.

This tip works especially well in conjunction with the Theme Builder.

Special note for our Nimble beta testers: We'll have this as a built in feature for you soon, so you don't need to code this yourself.

First, go to Blogs > Design > Content and make sure you have the Navigation Bar turned on and populated with the links you want to use.

Next, check to see that the Navigation Bar is styled to your liking. If you're using the Theme Builder, that's via the Design > Theme Builder page.

Your blog should now look something like this:

Navigation Bar default

Next, decide whether you want the Navigation Bar to span the full width of the browser window or just the width of the blog container.

If you'd like to span the full width of the browser, add this code in Design > Custom CSS:

 #nav {
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

#banner { margin-top: 30px; }

When you view the blog after saving, you should see something like this:

Navigation Bar, full browser width

If you'd like the Navigation Bar to be the same width as the blog container, use code like this:

#nav {
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: 1050px;
    z-index: 2;
}

#banner { margin-top: 30px; }

The width is width of each column added together. You can see that under General in the Theme Builder. In our example, the main content column is 700 pixels and the sidebar is 350 pixels so that's 1050px total.

The above code will result in something like this:

Navigation Bar, blog container width

And that's it! Our Knowledge Base has even more tips for styling the Navigation Bar with Custom CSS.

Typepad 101: Shaking Up Your Front Page

February 25, 2015

By default, the front page of your Typepad blog will display the 10 most recent posts you've published, with the most recent at the top. This is a very common format, but sometimes you may want to configure your blog a bit differently. In this post, we will look at some of the different options Typepad offers for the front page of your blog.

Ten posts is usually a good number to display on the front page. People who would like to read back in your blog don't have to keep hitting the next page all the time, while at the same time the page doesn't get too long and unwieldy. If your posts are quite long or very short, however, you might want to adjust the number up or down. Or maybe you're doing something very different with your blog - our example photo showcase blog has just one post on each page so that it looks like a photo album.

To change the number of posts on the front page, go to the Settings > Posts page for your blog and look for the Posts to Display section. You can display a certain number of posts or even a certain number of days of posts (we only recommend using the Days setting if you post regularly or on a consistent schedule). Enter the number that you want to display and use the drop-down menu to choose posts or days, then scroll down to the bottom of the page to save your changes.

Posts to Display

Maybe 10 posts is a good number, but you're using your blog to tell a story that you'd like people to read from the beginning. In this case, you may want to have your blog display oldest posts first. Do be aware that if you use this format, readers who arrive at your blog won't easily be able to tell if or when you have published a new post. However, if you're using your blog to tell a complete narrative and won't be adding to it, the "oldest first" display might be ideal for your needs.

To adjust the display order, go to Settings > Posts and scroll down to the Order of Posts section. Choose either newest or oldest first, then save your changes.

Order of Posts

Another way that you can customize the display of your front page is to only display posts from certain categories. For instance, you might want more of a magazine format for your blog and to display only featured articles on the front page. Or maybe you have one or more categories you don't want on the front page, but you would like to display all of the other categories. First, make sure you know how to configure categories for your posts. Also, keep in mind that visitors arriving at your blog may not be aware that you have categories other than the ones that appear on the front page. We recommend displaying a listing of all categories using the Categories sidebar module or linking to categories using the navigation bar.

Once you've got everything set up with your categories, head on over to the Settings > Posts page and look for the section called Limit Recent Posts. When you click on the drop-down menu here, you'll see options to add a new category or to assign multiple categories and also a listing of all the categories on your blog. If you choose one of the categories in the listing, only the posts in that category will appear on the front page of your blog. Set up the category or categories you want to display, then save your changes.

Limit Recent Posts

All of these options are great, but perhaps you don't want to display your posts on the front page of your blog at all. Maybe you want to set up a landing page with important information for your readers, or you want to use your blog more like a website instead of having a stream of recent posts. First, you'll need to create the informational Page with the content for your landing page. If you plan to have posts as well as one or more Pages, you'll want to be sure to provide a link to the recent posts page in the sidebar or navigation bar.

On the Settings > Posts page, look for the Front Page section. Choose the option to display a Page and then select the Page that you want to use. After saving your changes, you will see that the Front Page section now lists the URL for the recent posts page for your blog. Be sure to copy this URL so that you can set up the link in your navigation bar!

Front Page

One other Typepad feature you may want to take advantage of in combination with any of the options discussed above - or just by itself if you want to - is the recently-added auto-generated excerpts option. This is especially helpful if you tend to write longer posts but you want to keep the front page of your blog from getting too long. You can use the split extended entry feature to manually create an introduction for each page, but if that's too much effort, just head on over to Settings > Posts and turn on the Auto-Generated Excerpts option. You can also choose whether or not to include a featured image. We recommend turning on this option to add more pop to your excerpts.

Auto-Generated Excerpts

Here's what your published posts will look like with the featured image option selected:

Featured Image

There you have it - five ways to shake up the front page of your blog. Have you customized the display of your front page? Tell us about it and share a link in the comments!

Typepad 101: Contribute to Typepad, Join the Beta Team

February 11, 2015

Catch all the bugs: Join the Beta Team

2014 saw a lot of new features and improvements released, all of which began with a Beta launch. Beta is the stage of testing where we ask those who've opted in to test the early development of new features and help run the updates through their paces. Testing is an important part of getting new tools out to you, and the Beta Team is an integral part of that process.

How to Join the Beta Team

We try to uncover as much as possible before releasing a feature to Beta, but sometimes the designs chosen and content added varies too far from what we consider an average blog. That's why it's so important to have an active Beta Team. That's where we hope a lot of you come in.

Joining the Beta Team is easy and will not impact your existing content. Go to Account > Summary, check the box to join, and click Save Changes. You can learn more about it in our Knowledge Base

Checking What's in Beta Now

It's easy to check what's in Beta, as you'll be able to refer to Everything Typepad's Features category or emails you've received specifically because you're a Beta Team member. Both options are the first step in knowing what's new, as some features may not be noticeable in the app right away.

Recent Beta History

Recent releases have seen features pushed from Beta to Production, meaning it's readily available to all Typepad users, while more are being sent to Beta for testing. Here's some idea of what the Beta team has either helped test and what they're testing now:

Now in Production

  • Disqus commenting
  • Spotlight Posts
  • Responsive themes
  • Post Excerpts
  • Domain Registration

Currently in Beta Testing

  • Post Carousel
  • Sidebar Carousel
  • Theme Builder Updates

...and we hope you'll join, too, as we have something that's getting ready for Beta that is unlike anything we've released before. 

How to Test and Report

You can always choose to not test a specific feature, but it's our hope that you'll find them interesting enough to try out. If you're ready to test something new, you can review the blog post or email to find out what it is, how to enable it, and where to find out more information.

Once the new feature is enabled, the first step is to check your blog. If you notice anything out of place, or you think something isn't working right due to enabling the feature, disable it to confirm. Turn options on and off. If it's movable, then try moving it to a different location. Put it through its paces, try to break it, take notes of what happened and how to reproduce the behavior. 

The next step is to share what you've found by opening a new help ticket by clicking the Help link at the top right of your dashboard. 

Testing without Impacting Main Blog

We cannot stress how much testing by users helps us to release a well-rounded feature. And because blogging is our business, we know how important it is to make sure expectations and livelihoods are not affected by features that could negatively impact your blog. Enter the test blog.

With a test blog, you'll be able to duplicate your existing blog's design, and import your blog posts, to see how new features will affect the design, the content, and the overall behavior of your blog. Being able to do this means that you can thoroughly test a new feature, and all of its options, without fear that it will be seen by readers. It also means that you can work with a feature to set it up for use with your blog, getting it exactly the way you want, before introducing it to your readers and fellow bloggers.

Gotta Catch 'Em All

The entire Typepad team works to catch as many bugs as possible during the Alpha phase of testing. We want the features to still be functional and presentable for Beta testers, but sometimes a pesky bug or two will slip through. It's our hope that you'll help take part in making Typepad even better by joining the Beta Team. We'd be fortunate to have you join.

Typepad University: Adding Instagram Pictures

January 28, 2015

If you're like most of us on the Typepad team, you love Instagram.  You love taking pictures while out and about, trying out all their nifty filters, and sharing them with your friends via social media.

But what if you want to share these pictures with your blog readers?  Using IFTTT, it's a straightforward process!

IFTTT is a service that lets you create connections between other services where no connection previously existed, using their special blend of channels, triggers, and actions (read more here). Just create an IFTTT recipe, add your ingredients, and boom: you're photo blogging.

Instagram hasn't yet added an option to publish directly to your blog from the app, but thanks to IFTTT and Gmail, cross posting from Instagram to Typepad is not only possible, but hassle-free.

To get started, either log in to IFTTT or start an account (it's free!), then click Create a Recipe:

Ifttt1 The next steps are pretty obvious! Just start clicking:

Ifttt2 And then! Ifttt3
Next, choose a "trigger," the thing that makes the cross-posting magic happen. If you want to have any new photo you post to Instagram appear on your blog, just choose "Any new photo by you." Want to have only specifically tagged photos post to your blog? No problem! Choose "New photo by you tagged" - you'll specify which tag during the next step.

Ifttt4
Then just click Create Trigger, and IFTTT will take you here: Ifttt5 Next, choose an action channel - in this case, we'll want to choose Gmail, so make sure you already have a free Gmail account. Click the red Gmail icon, then click Send an email and enter your information, starting with your Typepad Secret Email Address (make sure to use your own - it will not look the same as the one in the example), which you can find at Blogs > Settings > Post by Email. Next, you'll want to customize the rest of the fields or leave them as is - for instance, you may want to edit the Body field if you'd prefer for your post not to say "via Instagram."  You can also leave this blank. Ifttt6
Click Create Action, and you're almost done! Finally, give your recipe a name, and click Create Recipe. That's it! IFTTT will take you back home, where your new recipe is on and ready to go. There, you can turn your recipe off and on, delete it, share it with others, and edit, check, or view it. IFTTT runs triggers about every 15 minutes, so if you don't see your next Instagram photo on your blog right away, don't worry. It will appear there in short order.

Once you do that, your Instagram pictures will be created as new posts that look similar to this:

Ifttt_instagram

Are you looking to add your Instagram pictures to your sidebar instead?  If so, we've got you covered!  If you're using one of our responsive themes, you can use the widget described here.  If you aren't using a responsive theme, you can follow the steps here.

Have any questions or need help getting IFTTT started?  Just ask and someone will be happy to help you out!

Typepad 101: What Is My RSS Feed URL?

November 19, 2014

RSS FEED
“RSS Feed” is a term that is used a lot, especially when it comes to getting subscribers to follow your blog.  It is the URL you use to set up email subscription updates with a service like FeedBlitz, and it is also the URL you need if you want your blog updates to appear any place else outside of your blog.  This is a good link to know!

The easiest way to find your RSS Feed URL is by viewing the HTML Source of your blog.  You can do this on any browser by either right-clicking your mouse and select “View Page Source” or similar relating to seeing the source option.  Then use the “Find” feature of your browser and do a search for “RSS.”  The result should direct you to a series of code that look like this (click fo a larger view):

Screen Shot 2014-11-17 at 2.51.24 PM

This blog shows three different RSS feed URLs:

- http://mperezsay.typepad.com/myblog/atom.xml
- http://mperezsay.typepad.com/myblog/rss.xml
- http://mperezsay.typepad.com/myblog/index.rdf

Any of these can be used as your feed URL but only the "atom.xml" and "rss.xml" URLs will work if you are setting up a Podcast. The "index.rdf" feed does not include an enclosure that is required for podcasts. Most services requesting your blog feed will accept "atom.xml", "rss.xml", and your FeedBlitz feed URL - if you have your blog connected to FeedBlitz, the link would be http://feeds.feedblitz.com/*yourusername*.

Another way to use your RSS feed URL is to set up a connection between your blog and other social media accounts using a third-party service like IFTTT (If This, Then That) at www.ifttt.com. With IFTTT, you can set up a connection between your blog feed with a series of “channels” including Facebook, Twitter, LinkedIn, and much more.

Screen Shot 2014-11-04 at 7.50.05 PM

If you are having a problem connecting your blog to Facebook or Twitter, IFTTT is a great alternative to look into for sharing your blog updates.

Lastly, your RSS feed URL is automatically displayed when you first set up your blog in the Navigation Bar with the "Subscribe" link.  This is to make the URL available to your readers so they can add it to their favorite web feed applications like Bloglovin and Feedly.  There are extensions you can add to your browser which can add an RSS feed right in your browser like Google's RSS Feed Reader for Chrome.  Adding an extension to your browser will make it easier to locate a websites RSS feed link.

Typepad 101: Create a Photo Showcase Blog

November 05, 2014

One of the great things about Typepad is the ability to create blogs with many different designs and layouts, including blogs that don't look like a "traditional" blog. Today, we're going to learn how to set up a photo showcase blog.

Photo showcase blog

The photo showcase blog serves as a kind of album or slideshow that puts all the focus on your big, beautiful photos.

The first step is to choose a minimalistic design theme that doesn't distract attention from your photos. We've chosen the Loft theme, one of our great one-click themes, but you can choose from any of our themes, or create your own with the Theme Builder.

Go to the Design > Overview page for your blog and click Choose A Theme. This takes you to a new page where you can view the themes on offer. Loft is one of our featured themes so it's easy to find, or you can select another theme of your choice. Click on the theme you want to use to select it, then click Choose over to the right.

Loft theme

If you're using Loft, you'll be taken to the Colors page to select one of the three available colors. Be sure to select the option "Apply this design to [Blog Name]" (where [Blog Name] is the name of your blog), then save your changes.

Next, you'll want to set up the layout for your blog. We recommend a one column layout to put the full focus on your photos. Go to the Design > Layouts page and choose the "One Column" option, then save your changes. (Please note that depending on the theme you choose, you may see different options on this page. The Theme Builder allows you to customize the width of the main content column.)

One column layout

To create the album or slideshow look, we're going to configure the blog's settings so that only one photo is displayed on each page. Go to the Settings > Posts page for your blog and look for the "Posts to Display" section. Enter "1" as the number of posts to display both on the recent posts page and on the archive pages. Scroll down to the bottom of the page and save your changes.

Posts to display

If you want to go super-minimalistic, go to the Design > Content page and de-select all the options except "Post Title", then save your changes.

Content page

And that's it! Now all you need to do is to start taking photos and uploading them to your blog.

Check out our sample photo showcase blog here - click the "Next" link at the bottom of each page to see how you can page through one photo at a time.

Have you set up a photo showcase blog? Do you have any other design tips? Share them in the comments!

Typepad 101: Responsive Instagram Widget for Responsive Designs

October 08, 2014

With more responsive designs being readied for release, we want to help you make the best use of your responsive design by pointing out widgets that help your sidebar content to be fluid as well. In this Typepad 101 article, we'll provide information on how to setup and add the Instagram widget Instansive.

Configure the Widget

Below is the general setup of the widget. The first option available to you is to choose whether you would like to pull in photos from your entire Instagram account, or if you would like to crowdsource Instagram images from a specific hashtag. Use a unique hashtag for certain photos in your account? Even better.

Responsive Instagram widget for your Responsive Design
Responsive Instagram widget for your Responsive Design

Additional options available for customizing the widget are:

  • Type of widget (select from: grid, seen above; slideshown; and columns)
  • number of columns and rows
  • fade in or out
  • preload the images to help with load time
  • show the caption from the shared image
  • remove photo padding so the images sit closer together in the widget

There are advanced options, which many won't need to use, but they allow you to choose a different widget setup depending on the size of the window/device in which the widget loads.

You can use the slider, positioned on the right side of the example, which allows you to adjust the widget size so that you can see what it will look like at different widths.

Get the Code

When you've configured the widget, you can click Preview to confirm it appears the way you would like it to display on your blog. If it's looking good, click the Get Code button and copy the code provided.

Responsive Instagram Widget
Copy the generated code

Add the Widget

With the code copied, log into your Typepad account and go to the Content screen at Design > Content. Click to add the Embed Your Own HTML module. You'll want to give it a name/label so you remember what it is when making future changes to the Content screen. Paste the code into the HTML portion of the configuration pop-up, then click OK and place the module where you would like to see it displayed before saving your changes.

If you would prefer the widget have a header above it, then you can use a Notes Typelist in place of the Embed Your Own HTML module.

When you're done, load your blog in your preferred browser, or on your mobile or tablet device, to see the widget in action.

Responsive Instagram widget
Instagram widget live on blog

Do you know of other services that have responsive-friendly widgets? Leave a comment to let us and others know!

Typepad 101: How To Sell Your Book On Your Blog

September 24, 2014

Flea-market-237460_640

It has been your dream to become a published author and the day finally came! You have a hard copy in your hands and it feels awesome!  Of course you want everyone to know, you announced it on your blog and include it your About Page but is that enough? No, it's never enough!

Did you know that you have a few options to sell your book right on your Typepad blog? It's true, and today we will explain how. 

Typepad blogger Emily Martin from The Black Apple writes children's books. In her sidebar she has thumbail images of each book linking to it's Amazon and Powell Book's listings.  You can do the same by adding a sidebar image and linking the image to your book listing online.  We have an Amazon plug­in you can easily insert into your sidebar too. If you have a special affiliate widget you would like to use, you can insert the widget the code by going to Design > Content > Embed Your Own HTML.

If you sell your book directly and you have a PayPal account, you can grab a "Buy Now" button widget from PayPal and also include it in your sidebar following the same embedded HTML instructions.

Finally, if you would like to share a little more information about your book(s) and a sidebar module just isn't enough, create a page dedicated to your books where you can include a link to purchase too.  You can add the link to your new page in your sidebar or Navigation Bar.

By following these simple steps, you will bring more exposure to your work, gain a new fanbase, and *fingers crossed* more writing opportunities.

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.