Posts categorized "Typepad University" Feed

Typepad 101: Design Your Blog

Now that your blog is up and running and you are publishing content, let's make sure your blog is looking the way you would like it to look. The look of your blog is really important - it is the very first impression a visitor gets when checking out your blog for the first time. Today's Typepad 101 is about what's available to create a design for your blog.

When you create a blog, it defaults to the "Journal Black" theme. You can stay with this theme if you'd like as it's offered in five different colors.  Or you can switch to another pre-designed theme. 

Choose Your Theme

Choose Your Theme

To see what themes are available to apply to your blog, go to the "Design" tab.  This page is broken up into three sections:

Current Design: This section shows your current design with options on how to customize your current design (Banner, Style (for Design Lab themes), Layout, Content). 

  • Banner: upload your new banner
  • Style: customize the overall appearance of your blog (fonts, colors, borders)
  • Layout: select 1, 2, or 3 column layout
  • Content: Add and edit what is shown in your sidebars, post & blog footers, etc.

Create a New Design: This includes a green button "Choose a Theme."  This will take you to a new page with a gallery of thumbnails showing pre-made designs you can apply to your blog.

Screen Shot 2019-07-03 at 4.52.29 PM

You can view your options by Feature, New, Customizable, and All.  

Your Designs: Every time you add a new design to your blog, it saves in your Typepad account so you can always go back and reuse it instead of starting over.

About Customizable Options

The Customizable option includes Design Lab, Theme Builder, Styleless, or HTML aka Advanced Templates.   The Styleless or Advanced Templates options are recommended only if you are comfortable working with HTML and CSS code and building your custom design from scratch.  These two options are available for Unlimited plans and higher.

Design Lab and Theme Builder are easy to use with no code required to customize the look of your blog. You can select the colors, fonts, and upload your banner.  You can add additional CSS code to customize your design further but not required. Design Lab is responsive and looks great on all devices, large and small, and meets Google's mobile-friendly requirements.  Theme Builder also has an option to create a responsive design

If you ever get stuck or have questions about how to make something work with your blog design, you can always open a Help Ticket and a member of the team will be happy to help!

 


Typepad 101: Let's Get Started - Manage My Blog

Get Started With Typepad

Welcome to Typepad! Or if you previously had a Typepad account and are starting up your blog again - welcome back!  When you begin your free 14-day trial, the first place you go to is your Dashboard.  This is where you can quickly access your blogs, account settings, profile settings, files, open a Help Ticket, view updates from other Typepad accounts you follow, and even purchase your own custom domain name if you continue with a paid Pro account.

Typepad Dashboard

Manage My Blog

Located on the top, right sidebar of your Dashboard, you can access specific settings to your new blog starting from here.  As you add more blogs to your account, you will find more blog names listed in this box as well as the "Blogs" link in the top menu bar. From the "Blogs" menu, you can select the name of the blog to manage the settings of that blog.

View Blog: You can see what your blog looks like clicking "View Blog" under the thumbnail image.  Right now, there is not much there, it is just a skeleton of what your blog could look like but you can design it to your liking.

Blog Setting Tabs

Compose: If you want to get started blogging right away, you can access the Compose page by clicking the "Compose" link under "Manage My Blog".  You will also see a yellow "Compose" button on every page within your blog settings.

Stats: This is your Overview tab. It displays analytics and referrals to your blog. The more you publish and share your blog post links elsewhere, the more data will appear on this page.

Posts: As you publish more posts, this list will grow.  It displays all of your blog posts - published, and saved as drafts in chronological order.   You can change the status of blog posts from Published to Draft or vice versa, or delete posts.  You can select more than one posts to change their status by checking the box on the left of each title, then scroll to the bottom to publish, draft, or delete.  You can also assign posts to categories, open and close comments from the drop-down menu on the bottom right.

Comments: If you use Typepad for your comments, you can view all comments left on your blog on this tab.  You can reply, edit and view comments directly from this page. You can also publish, unpublish, delete, and mark comments as spam.

Design: Typepad has many pre-made designs you can easily apply to your blog or you can customize your own design using Design Lab or Theme Builder.  In "Create a New Design" click the green "Choose a theme..." button and select a theme from our gallery. 

Settings: This is where you create the backend settings to your blog including your blog name and description, welcome message (optional), whether you want to create password protection, search engine optimization, category creation, comment configuration,  post-by-email, and more.

Settings Page

A word about Getting Started Tasks

There is a drop-down menu on the right of your Dashboard titled Getting Started Tasks.  These can be completed at your own time while you are blogging. The Getting Started Tasks on the Dashboard are only suggestions, and you do not need to complete all tasks in order to utilize all the features of Typepad.

Getting Started Tasks

Stay tuned for more Typepad 101 blog posts on how to get started with your blog and publishing your posts!


Blog Smarter with Master Templates

Blog Smarter with Master Templates


Everyone has heard the saying "Work smarter, not harder." At Typepad, we are here to give you tips and tricks to make sure your blog is a success! Today we are going over how to create a Master Template for sharing recipes.  

First, you want to copy the code below and put it into a new blog post by clicking on the HTML tab on the Compose page. 

Code For Recipe Template

Now click on the Rich Text tab to see the post and make changes. 

TIP: Name this post Master Recipe and save it as a draft. Make any changes to the font, color, and branding you want to have in every post.  Change the status to Draft and click Save. Now you have code to reference for future blog posts. 

Table For The Recipe

The recipe is in a 1x2 table. This gives you a section for the ingredients and a section for the instructions. You can change the background of the table to match your brand colors. 

To edit the background color, click in the table then click on the Table Properties icon in the bar under the table. On the Advanced tab, click on the little square to select a color. Put in the hex value or RGB values of the color you want. Click Ok. You will see that color in the little box and the hex value next to it. Click OK to save your changes. 

You can do the same thing to add a border around the table. Keep in mind this will add a border around each cell. 

Advanced Table
Recipe TemplateAdd Code To New Post

Now that you have the Master Template post set up, you want to save it as a draft. Next to Status click on the drop down and select Draft, then Save. 

When you are ready to create a new recipe post, search for the Master Recipe post and click on the title to go to the Compose page. From the Compose page, click on the <> button to view the source code, copy the source code. Next, click on the Posts tab, and create a new post. Click on the <> button and paste in your code. Select Ok. 

Adding A Printed Version

Some home chefs don't like to have their phones out while they are preparing food. Always offer a way for your readers to print out your recipes. We recommend that you write them up in a document and save as a PDF. PDF's are easy to upload, download, and print on a multitude of devices. Look for 'Print Recipe' in the recipe template, then click on the File icon. Choose the PDF file of your recipe, then click OK to upload and link it to the highlighted text. The 'Print Recipe' text will change to 'Download NAME OF FILE'" where "NAME OF FILE" is italicized but not capitalized like in my example here. You can keep the default text or customize the text by clicking the newly made link and editing the text in the 'Change the Text to Display' field. Click OK to save the change. TIP: The Jump To Recipe link is an anchor link that is already set up to go down to the recipe. No need to change anything. 

Image Gallery

The Image Gallery is a great way to display your images. You can add images of you creating the dish or of your family and friends enjoying the meal. 

To change the images in the image gallery, select one image, then click on the Insert Image icon. Choose file and select all the images you want to add.

Image Gallery

Tip: Hold down CTRL to select multiple images if you are using Windows. If you are using a Mac, hold down CMD. 

Select Insert Images to add the images to the scroll bar. Once you have added your images, you can delete our images. Select the Image and tap delete on your keyboard.

To change the text, click on the text and delete what is written. Now type in what you want to add.

We recommend using a master template to save time with formatting and managing images. We provided one example of how such a template could be used, but we'd love to learn what other types of templates you would like to see. Make sure to leave a comment with your thoughts and suggestions!


Switching To a Mobile Design - Let Us Help With Typepad Design Services!

Switching To a Mobile Design - Let Us Help With Typepad Design Services!

For some of our long-time Typepad bloggers, the thought of redoing your entire blog design can be stressful. Where do you even start?  Usually when this request comes in, we first recommend creating a test blog so you can play around with our different responsive themes first before applying it to your main blog.

But what if you don't have the time to do all of that? Let Typepad Design Services help!  Typepad Design Services includes Tune-Up service and Custom Design service for an additional fee. We will work with you to create an amazing blog that is everything you could wish for.

When we receive a request to update a blog design, we always refer to the Nimble Design Lab to get started and build your design around this theme. Here are a few of the Design Services we loved!

Typepad_Service_PetBlogLady

Here is a great example of using a Landing Page with your mobile design.

Typepad_Service_C.Kenneally

When was the last time you updated your blog design? Are you using a Responsive theme for your blog? 


Add A Scroll Bar To Large Tables

Add A Scroll Bar To Large Tables

Sometimes you need to provide a lot of information in a table format. Large tables can be hard to read when they are shrunk down on mobile devices. You can quickly add a piece of code to your table to give it a horizontal scroll bar. When mobile readers view your blog, they can scroll through the table. 

First you will need to add your table. Click on the Table drop down and select Table. Highlight how many cells you will need. 

Create A Table

After you have inserted your table you can customize it by adding your content and changing the properties. 

Once your table is complete, click on the HTML tab on the top right of the compose page. Find the table in the HTML. The table starts with <table> and ends with </table>.  A great way to help block out this code is to put a space before and after the table code.  

Here is how it looks before you enter the code:

How code looks in the HTML tab

Above your <table> tag, add the following code: 

<div style="overflow-x:auto;">

After <\table> add the following code:

</div>

Here is how it looks after you add the code

How the code looks after

Save/Publish your changes, then click on the Rich Text tab to see your table. You may not see the horizontal scroll bar on the compose page, so preview or publish your post to see the scroll bar.

Check out the horizontal scroll bar in action. We have added it to the table below. You may need to reduce the size of your browser window or view this post on a mobile device to see the scroll bar at the bottom of the table.

  Grade Grade Grade Grade Grade Grade Grade Grade Grade Grade
Eric 75% 80% 100% 94% 87% 100% 79% 86% 92% 86%
June 95% 78% 100% 86% 73% 96% 97% 92% 86% 94%

When creating any post you need to make sure you keep your mobile readers in mind. When the table is viewed on a mobile device your readers will be able to horizontally scroll through all your columns and easily read your table. Make sure you are using one of our mobile themes so your blogs looks flawless on mobile devices. 

Go to your account now to get started!


How To Add A Pinterest Button To All Your Images!

Pinterst pic white

Pinterest is a great place to get your blog seen! Who doesn’t love spending free time searching Pinterest for their dream DIY? Make it easy for your readers to add your amazing images and posts to their Pinterest boards by adding a Pinterest Save button.

First,  go to the Pinterest Widget Builder and click on the Save Button. From the Button Type drop down, select Image Hover. Select if you want a round image or a large image.

Example of hover button

After you are done designing your button you will be given code to add to your blog.

Pinterest Code

From your Typepad account, click on the Blog tab > name of your blog > Design > Content. Add an Embed Your Own HTML module and Paste in the code. Give the module a name and click on OK. Last, click on Save Changes. Don't worry, the Label will not show on your blog. 


Embed Your Own Code

Now your readers can share your amazing images on their Pinterest boards. Just hover your cursor over the image to see the Save button.

End Result

Log into your Typepad account today to get started.


Our Favorite Third-Party Integrations: ShareThis

ShareThis Integration

We know how important it is to share your blog content with your readers on social media.  The share buttons we offer in the blog post footer is a popular feature but there is just not enough room to include every social media platform out there.  That is why one of our favorite third-party sources to integrate into Typepad is ShareThis.

Before you create your free account at www.sharethis.com, you must have a Unlimited account or higher as the Head module is required to set this up on your blog. 

When you add your blog, you will get a red message that says: 

We were unable to verify **your blog URL**. Please ensure sharethis.js is copied to header of your site!

Click the "Get the Code" button and copy the code that appears in the pop-up window. Open a new browser window (keep ShareThis open) and in your Typepad account, go to Blogs > (select your blog name) > Design > Head, and paste the code provided and save your update: 

Sharethis_3

Then go back to ShareThis and click the "Verify" button and you will get a message saying that the installation was successful.  Now you can create your share buttons! ShareThis allows you to add more share buttons to your blog posts such as LinkedIn, Reddit, Tumblr, and more. 

Sharethis

You can set up the "Sticky Share Buttons" that appears on the left side of your blog, "Inline Share Buttons" which appear at the bottom of your blog post, or customize your share buttons.  

If you only want the buttons to appear on the left, just "turn on" the Sticky Share Buttons on top, and click which channels you want to display as well select the alignment, label, size, shape, count, etc.  then you are all set! There is nothing else you need to do.  The buttons should take a few minutes to appear on your blog.  

To add buttons in your blog post footer, there is an additional step which involves using the Signature module in Typepad. In ShareThis, select the "Inline Share Buttons" option. Like the Sticky buttons, turn on Inline Share Buttons, and copy the code: 

Sharethis4

Place this code in your Signature module at Design > Signature, make sure it's checked off to enable it. You can also select which buttons to display, size, shape, and count.  As long as you have the code saved on your blog, any changes you make in ShareThis should be reflected on your blog after a few minutes. 

Here's an example of a blog that has both set up: 

Sharethis_2

With some social media platforms getting more strict with automated shares to their feeds, including share buttons to your blog posts is a good way to still share your blog content on places like Facebook and Twitter.  Do you include share buttons on your blog?  Sign in to your Typepad account and get started today!


Spotlight Posts To Draw Readers Into Your Blog

Spotlight posts to draw readers into your blog

Getting readers to come to your blog is only half the story when it comes to building your audience - you also want to keep them there exploring all your great content. One easy way to do this is by adding a Spotlight module to highlight some of your recent posts.

For most Typepad design themes, the Spotlight module will appear in the sidebar. However, if you're using a theme from the Nimble Design Lab with a one or two-column layout, an additional option is available to you - the Spotlight module can be placed directly under your posts and will appear in that location both on the main page and on archive pages. Blog visitors don't always look closely at sidebar content, but having the Spotlight module right under your posts means they'll see it as they finish reading. If they enjoyed your post and want to read more of what you have to say, there it is right in front of them! To set this up for your one or two-column Design Lab theme, head to the Design > Content page and add a Spotlight module:

Add the Spotlight module

When you add the Spotlight module, you'll see a pop-up window where you can configure how you want the spotlighted posts to appear:

Configure the Spotlight module

If you post a lot of photos to your blog, we recommend choosing the option to display a thumbnail image for each post - pictures catch the eye a lot more than text does. After you've configured the options you want and save them, the Spotlight module will be added to the sidebar as usual. Bloggers using a one or two-column Design Lab theme will see an additional option on the Content page, however. Under the representation of the main content column, you'll see an area labeled "Drop Spotlight Posts Below". Drag and drop the module to this area and you should see it settle in under the notice:

Drag and drop the Spotlight module

Go ahead and save your changes on the Content page and the Spotlight module will now appear on your published blog right below your posts. If you realize you need to tweak how it looks, go back to the Content page and click the pencil icon on the module to open the pop-up window with the configuration options again. A well-configured Spotlight module provides an eye-catching display drawing readers further into your blog, as shown in the example below.

Spotlight module on Swoonish

You can also see the Spotlight module used in the main content column right here on Everything Typepad! Just scroll towards the bottom of the page. If you like what you see, why not log in right now and head to Design > Content to add the Spotlight module to your blog? And if you're already using the Spotlight module on your blog, let us know in the comments how you like it.


How To Add An Amazing Background Image

How To Add An Amazing Background Image

Adding a background image is a great way to help your blog content stand out and reinforce your brand. When you use one of our Design Lab themes, you can use one of our pre-loaded background patterns or add your own background image. Today we are going over how to add your own background image. 

Find the perfect image

We recommend using one of the many free image finders available to you on the web. Some of our favorites are Pexels and Pixabay. Read our post "What You Need to Know about Using Images on Your Blog" to learn how to safely pick an image to use on your blog. 

When looking for the perfect image you want something that will look good repeating. You don't want the seam between images to sand out. You can use a simple wood image, brick image, or grass! Look for images that look good with your brand colors.

Image comparisonSave the image

Once you have the image, you will need to save it to your computer. Follow their instructions on how to save it to your computer.  A good image size to look for is around 2000px wide. 

Add a background imageAdd to your Design Lab Background

The steps below work if you are using one of our Design Lab themes. Not using the Design Lab yet? Try changing your theme, or apply it to a test blog!

With few clicks you can change your background image.

1) Click on the Blogs tab, then the name of the blog.

2) Click on the Design tab, then on Style.

3) On the right, click on Background to display your options.

4) Under Pattern, select Upload Custom Image and upload the image you saved.

If you like how it looks in the preview window, save your changes.

Finished Example

Super easy! Now log into your account today to get started! 

Button_log-into-typepad


Get Creative! Add a Presentation to Your Blog

Presenting

Visually add to your message by inserting a presentation in to your blog post. There are many great programs out there to help you design a visually appealing presentation. Today we are going to focus on how to add a presentation from Google Slides, Prezi, and Emaze into your blog post.

Google Slides

Google Slides is a free presentation program that is included in your Gmail Account. Click on Google Apps (a 3 by 3 square of smaller squares on the right) and select Slides. Create your presentation. Once your presentation is complete, click on File, then Publish To The Web.  Click on the Embed tab, then select Small under Slide Size. Click on Publish to get the embed code.

Google Slides Pop UpCopy the code and log in to your Typepad account. From the Compose page, click on the HTML Tab. Search through the HTML to find where you want to paste the embed code. Paste in the embed code, then click on Rich Text to see it in your post. Last, publish your post.

Google Slides codeExample of a presentation created in Google Slides:

Prezi

Prezi is a presentation program you can use to create an interactive presentations. Once you have created your presentation, you need to generate a presentation URL. Click on the Share icon and create the presentation URL. Copy that URL and save it somewhere (Notepad or Text Edit). Use the code below and replace your_view_link with your presentation URL

<iframe width="550" height="400" src="your_view_link/embed" webkitallowfullscreen="1" mozallowfullscreen="1" allowfullscreen="1"></iframe>

Copy your edited code and add it to your post. From the Compose page, click on the HTML Tab. Search through the HTML to find where you want to paste the embed code. Paste in the embed code, then click on Rich Text to see it in your post. Last, publish your post.


Prezi Code

Example of a presentation created in Prezi:

Emaze

Emaze is a web based platform that helps you create engaging presentations. After you created your presentation, click on the Share button and copy the Embed code.

Emaze Share

From the Compose page, click on the HTML Tab. Search through the HTML to find where you want to paste the embed code. Paste in the embed code, then change the height and width size. The height should be 340px and the width is 600px. Click on Rich Text to see it in your post. Last, publish your post.

Emaze Code

Example of a presentation created in Emaze:

Powered by emaze

 

Presentations are a great way to visually sum up your blogs main ideas. Share them on social media along with a link to your post to help draw attention to your blog!

Use the comments to share with us posts you have used a presentation in. What other suggestions would you add?