Posts categorized "Weekend Projects" Feed

Forward your Typepad Email to Gmail

Forward your Typepad Email to Gmail

When you purchase a domain through Typepad you get 2 free email addresses with that domain. To learn how to set up your free emails, check out the "Get an email address with your domain!" post. Once you have successfully set up your email address, you may not want another place to check emails. Here we will walk through how to forward your emails to your Gmail account. 

After you have set up your email address, you are given the POP, IMAP, and SMTP information to configure your account in other email clients. For Gmail, you will need the POP and the SMTP. We recommend you  save this information somewhere safe.  You will also need the Email address (Username), Password and webmail URL. You will need to log into your webmail account because Gmail will send a verification to that email address to complete the set up.

Tip: If you misplaced this information you can find it in your domain account. Go to and log in. Click on My Account, then under Manage Free Service type in your domain and select Email Services from the drop down. Click on Manage Users/ Accounts, then you click on the email address. Here you will see the mail settings. If you forgot your webmail password you can reset it here too. To log into your webmail go to:

Let's get started! 

First, log into your Gmail account and Click on the Cog on the top right, then click on Settings. Click on the Accounts and Import tab across the top (in some versions it is just Account). Next to Check mail from other accounts, click on Add a mail account. In the pop-up,  add the new email address and click Next. On the next page, select Import emails from my other account (POP3) and click on Next.

Here you will add the Username, Password and POP link  you received for your webmail account. We recommend you select Leave a copy of retrieved message on the server. You will have the email in your webmail account and in your gmail account. This is helpful in case there is ever an issue with Gmail servers receiving your email. Then click on Add Account.

Gmail forward 1

You will be asked if you want to send emails from this address. Click on Yes, I want to be able to send mail as (your email address) and click on Next. Enter the name you want to be shown and make sure to check Treat as an alias, then click Next Step.  Now you are asked to configure the SMTP. Enter the SMTP link, Username, and Password to your webmail. Click on Add Account.

Gmail forward 2

An email will be sent to your webmail account to verify. Log into your webmail account by going to and open the verification email.  Click on the link or get the verification code from that email. After you have clicked on the verification link, you will also be sent an email to your gmail account asking to verify your information.  Once both email clients have verified the accounts, you are all done.

You will start receiving your emails in Gmail and you can send from your new email address as well. If you have not bought a domain yet, what are you waiting for? Purchase your domain through Typepad today!  

Next in the series will be how to set this up in Outlook. If you would like instructions for another email client, please put it in the comments. 

Get an email address with your domain!

Email domain

When you purchase a domain through Typepad you also get two free email addresses that use your domain. You can use the webmail services to send and receive emails or you can forward them to a different email address. An email address from your domain has a professional look, it will give your blog and business more credibility.  

Set up your email address

First, you will need to log in to Typepad Domains by going to:

Manage Free Services

Once logged in, you will click on the Welcome tab, then click on My Account. Under Manage Free Services, type in your domain  and select Email Service from the drop down menu. You will be taken to a new page. Under Actions click on New User to create a new email address with your domain. You will need to fill out:

  • Name
  • Desired Email Address
  • Alternative Email Address for important communications
  • Country of User
  • Language of User

Once you have filled out the information you will click on Add User. After you have successfully created your email address you are given a personal webmail URL to check your email and a username and password. Make sure to copy this information and save it in a safe place.

Final successful registration

Next up....

Busy bloggers may not need another place to check email. You can forward your emails to Gmail, check out the post Forward your Typepad Email to Gmail.

Check back and we will provide instructions on how to forward your emails to popular email clients. 

Customizing the Other Accounts module with your own social icons

In our last theme release we unveiled a customized Other Accounts module, which makes use of the default icon and overrides it with a custom social icon of our choosing.

Custom Social Icons for the Other Accounts module

We created 7 custom social icons for various services, then used CSS to override the Other Accounts module when it is in Grid format. (To add the Grid format, go to Design > Content, then add the Other Accounts module and check the Grid option. Save your changes.)

Here are the icons we created and used:

Facebook_chevronFlickrGoogle+InstagramTypepadPinterestRSS feedTwitter

Want to know more? Then...

Continue reading "Customizing the Other Accounts module with your own social icons" »

Weekend Project: Display Your Recent Pinterest Content In Your Blog's Sidebar

Important Update: We've added a built-in Pinterest widget, which can be added to your blog in Blogs > Design > Content. Read more here. Pinterest has also added easier options for displaying Pinterest content to your blog - we have instructions for that here.

Everyone seems to be talking about Pinterest lately, and for good reason - with Pinterest, you can organize and share all the beautiful things you find on the web, plan weddings, decorate homes, and even organize recipes - visually and socially.

We recently introduced the Pin It button to Typepad blogs, and we even taught you how to embed a pin in a blog post, but if you've ever wanted to display your most recent Pinterest pins on your blog's sidebar, then this weekend's project is for you. Thanks to Typepad blogger Zalary for the inspiration!

This project can be done easily with Basic Templates, and folks at all skill levels should be able to tackle it, so lets get started!


Step 1: Grab the code! Though this project is super easy, the block of code is quite large, so we've placed all of the code you'll need into a handy text file, which you can download right here. ***Note*** Make sure to open this file in plain text! For Windows users, that usually means using Notepad, and for Mac, that usually means using TextEdit. Using a rich text editor or an application like Word can break the code!

Step 2: Next, you'll be looking for a couple of lines of code in the text file, and replacing them with your relevant information. The first section of code to look for includes your Pinterest RSS URL and the number of pins you want to display, which looks like this:

$(document).ready(function () {
$('#pinterest').rssfeed('', {
limit: 6,
snippet: true,
header: true,
date: false


You'll need to change the URL there to your own Pinterest URL. To display your latest pins from all boards, use To show a specific board, use

The default code is set to display your six most recent pins side by side in your sidebar. If you want to display more or fewer pins, just change limit: 6 to reflect that.

Step 3: The next step is for folks who want to customize the size of the thumbnails to fit perfectly within their sidebars. The default code provided works great for anyone with a 300 pixel sidebar, but if your sidebar is more narrow, you'll need to resize the images and change the padding a bit. Look for this bit of code:

.square {
width: 125px;
height: 125px;
overflow: hidden;

Taking into account the 30 pixels of padding that Typepad adds to each column, decide on how large or small you want your thumbnails to be, and update the width and height values, keeping them the same to maintain the proper ratio.

Next, look for this code:

.rssBody li.odd {
position: relative;
color: transparent;
/* overflow: hidden; */
padding-right: 20px;
float: left;
z-index: 1;

And change padding-right: 20px; to coincide with however many pixels you subtracted from the thumbnail size. That's it! You're done with code changes.

Step 4: Finally, copy all of the code in the text file (which has now been updated with your changes), and go to Design > Content in your Typepad account. There, click to add an Embed your own HTML module, and paste everything into the box provided. Click OK, then drag the module into place on your sidebar, and save your changes. You're all set! You should now see your most recent pins on your sidebar.

Extras: If you'd like to display a title above your pins, just paste the code into a new Notes TypeList and add that to your sidebar instead of using the Embed module.

You can also display a "Follow on Pinterest" button below your pins, by grabbing the "Follow Button" code from here and pasting it under the code for your pins in the same space.

Want to see the project in action? You can see my most recent pins on the sidebar of my blog, Hello Melanie! And we'd love to see it on your blog, so leave a comment and let us know if you're using it!

Weekend Project: Replace your banner with a fancy image slideshow

This weekend's project is for Basic Templates but because there's Custom CSS involved, you'll need to be at the Pro Unlimited plan to implement it on your blog. Upgrade if you aren't currently taking advantage of the Pro Unlimited plan.

Slideshows are a great way to show off groups of images without taking up a lot of space on a site. They haven't always been easy to set up, though. Fortunately, we have simple code that you can add to your blog via the Advanced area in the Navigation Bar.

Continue reading "Weekend Project: Replace your banner with a fancy image slideshow" »

Weekend Project: Automatically add a custom signature to each post

Important update: We've added a built-in Signature Module, which will allow you to add content to the end of each blog post automatically. 

Note: This project uses the Custom CSS feature, which is available to subscribers on the Pro Unlimited plan and above.

Today's project is all about adding a personal touch to each of your posts - without having to do any extra work. We're going to show you how to use the Custom CSS feature to automatically place a custom signature to the end of each post. You can use a scan of your actual signature or an image created with an image editing program.

Here's an example of how your posts will look when we're done.

custom signature
First, you'll need an image. It should be reasonably sized - not too large, since it's just a little personal touch, not a full-on design element. It can just be your name, a small icon or logo, or a little greeting. Either way, it should be personal and unique to your blog.

Save the image as a PNG, GIF or JPG and upload the file in Library > File Manager. Click the name of the file to open it in your browser. Leave that open - we'll need the URL for the image shortly.

The image will basically just be the background for each post, aligned to the bottom. First, we need to create some space for the image. In Blogs > Design > Custom CSS, add the following:

.entry-content {
padding-bottom: 75px;

You'll need to adjust the padding to accomodate your image, plus a bit of space for padding. So if your image is 70 pixels tall, you could make the space 90 pixels to accommodate it.

Now, we'll add in the code for the image, like this:

.entry-content {
padding-bottom: 75px;
background: transparent url( bottom left no-repeat;

That places the image at the bottom of the post, aligned to the left. You can also align it to the center or to the right.

Finally, you may wish to add some space right below your image and above the post footer, like this:

.entry-content {
padding-bottom: 75px;
background: transparent url( bottom left no-repeat;
margin-bottom: 10px;

That's it! When you view your blog, you should see your special image at the end of each post.

Have a great weekend and happy blogging!

Weekend Project: Display Your Photos from Instagram

If you're already using Instagram, you know how fun and addictive it is. If you're not, then all you need to know is that it's a bit like Twitter but for images. You snap a photo on your iPhone (Android users will get Instagram soon!), upload it to Instagram and the app shares the image across your social profiles like Twitter and Facebook.


But you don't just upload and share your images, you can also apply really awesome filters that make your pics look much more vibrant and interesting. A picture of your yummy dessert just looks better when you apply one of Instagram's moody filters.

So now you're hooked on Instagram and you're shooting and sharing with friends and family. What if you want to display those images somewhere on your blog?

That's what today's tutorial is all about. We're going to offer two ways for you to automatically post those images onto your blog's sidebar. Once you have it set up, the images will automatically update as you add more to Instagram. Presto!

The first option is super easy. Just go to SnapWidget and scroll down to enter your Instagram username. From there, you can enter in a specific hashtag to pull from, thumbnail sizes, and so on. There's a preview feature so you can see how your images will look before grabbing the code.

You can add the code to your sidebar via a Notes TypeList or the "Embed your own HTML" module in Blogs > Design > Content. We have more details in our Knowledge Base. Below is an example of how SnapWidget looks on a real blog.


The second method is a bit more complicated but allows for more control over the thumbnail size that shows in your sidebar. You'll use your Instagram RSS feed, a service that will convert that feed to JavaScript, and some Custom CSS to style the thumbnail.

Continue reading "Weekend Project: Display Your Photos from Instagram" »

Weekend Project: Customize Module Headers

We showed you some basics on styling module headers before, but this weekend we've decided to show off how you can use Custom CSS to customize the headers even further. Look at the cuteness!

From our example below you can see we've decided to customize three specific modules: the Search; the Categories List; and the Post Feed. There are more sidebar items with their own CSS class, but the three in our example are the most often asked about.

Customizing Module Headers with CSS

Continue reading "Weekend Project: Customize Module Headers" »

Weekend Project: Getting Started with Google Web Fonts

This project is for subscribers at the Pro Unlimited level and above, since you'll be using the Custom CSS feature. Want to do this too? Find out how to upgrade to Unlimited!

One bit of feedback that we hear a lot is that there isn't enough variety in the fonts available in the Compose editor and blog themes. There's a technical reason behind this - if you use a special font on your blog that your readers don't have installed on their computers, they won't be able to see it.

That's a bummer, right? Luckily, services like TypeKit and Google Web Fonts can help you bring more exciting fonts to your blog. We have instructions for getting started with TypeKit in our Knowledge Base and this project will get you started with using Google Web Fonts.

The first step is to head over to the Google Web Fonts site and take a look at the fonts they have for use. There are nearly 400 available so you'll be there a while. Don't say we didn't warn you!

Continue reading "Weekend Project: Getting Started with Google Web Fonts" »

Weekend Project: Featuring Images with a One-Column Layout

This Weekend Project is perfect for anyone who wants to display images in a gallery-like format, where the images are wide and don't have to contend with other design elements.

In the example below we've made use of the One-Column Layout, combining it with the Theme Builder and Custom CSS. You can setup something similar with only the Theme Builder.


Remember that images, by default, will be restricted to 30px less than the width of the column. Keep in mind that the current max-width of the Theme Builder post column is 500px. The widest an image can be, without using CSS to increase the column width, is 470px.

Knowing that, and knowing we wanted to display much larger images, we setup a custom column width for our One-Column Layout by using the following CSS:

#container { width: 900px !important; }
#alpha { width: 900px !important; }

This means our images can be shown at a max-width of 870px!

We also chose the following Content settings at Design & Content to limit the design elements:

  • no date-header
  • no navigation bar
  • no module content
  • minimal post footer content (we kept it to just the permalink, comments link, and a few buttons)
  • no blog footer

You can choose your own preferred settings for what appears in the blog, but we really love the simple design that doesn't distract from the image.