Posts categorized "Did You Know?" Feed

Design Lab: Blog Footer and Background

Design Lab Blog Footer and Background

Have you refreshed your blog using our new Design Labs? We would love to see the progress. Post a link to your blog and let us know your favorite feature in our new Design Lab. We will review the comment (make sure it is not spam) and share it with the rest of our readers!

Our new Design Lab has more features for us to share! Today we are going to go over how to customize the footer and the background of your blog. To get started click on the Design tab, then click on Style.


FooterBlog Footer

The Blog Footer is at the bottom of your blog, it helps your readers by adding information or navigational links at the bottom of your site.  You can customize the font, text color and size. You can change the background color to help it stand out. Link back to the top of your blog (which is recommended!) to save your readers time scrolling. If you decide to not link back to the top you can left, center, or right align the text.

After you have designed the footer you can add content to your blog footer. This can be used for displaying links to pages on your own blog, a copyright note, links to other websites, or custom code, such as banners or widgets.


Background with Pattern OptionsBackground

Under the Background tab you can change the color and add a pattern to your background. You can select from one of our background patterns or upload your own. When you upload your own image it will tile it. You want to make sure the image connects nicely from end to end. For the post and side bar, you can select to have a rounded corners or pointed corners.

Love working in our new Design Lab? Check out our previous posts to help you design the best blog theme for your brand.

Design Lab: Adding Custom Fonts

Design Lab: Adding A Banner

Design Lab: Navigation Bar

Design Lab: Posts and Sidebar


Design Lab: Posts and Sidebar

Design Lab_ Posts and Sidebar

How do you like our new Design Lab? Enjoying all the customization options it has to offer? We have more to come!

We are continuing our series on our new Design Lab. Previously we wrote about how to customize your fonts, how to add a banner, and modifying your navigation bar. Now we are going to go over all the options you have for the body of the post and your sidebar. There are a ton of ways to mix and match settings to fit your brand.

PostsPosts

Click on the Blogs tab, then click on the name of the blog. Click on the Design tab, then click on Style. On the right, click on Posts. Here you can customize the posts for your blog. You can change the design to match your business branding. There are many combinations you can use by changing the color, font and size of your Post Title, Dates, Text, and Footer. You can also change the background color and the link color.

There are four different alignment types for you to choose from: left, right, center or justified. You can customize the line spacing to be tight, normal, or loose.

The last cool feature is to add a border to your blog. You can add a border to one side or all the sides. Click on Border to view all the options. First, click on Change to customize the border (color, width, line type) then click on the X to close the window. After you design the line type you can choose where to place it (left, right, top, bottom).

Sidebar

The Sidebar works very similar to the Posts. When you click on Sidebar on the right of the Style page you can customize the fonts, size and color of the Header, Links, and Text. You can change the background, text alignment, and add a border. It has two extra settings for you to choose from: Fill Column Height and Collapse Margins.

If you select Yes for Fill Column Height it will expand the background color you choose from the sidebar past the last module to the bottom of the blog. If you select no, the background will end after the last module (default setting).

Collapse Margins controls the space between the Posts and the Sidebar. If you select Yes, it will remove the margin between them. By default it will have the space between the Posts and Sidebar.

Sidebar Option

As you make changes to the Posts and the Sidebar you can see the changes reflected in the preview window.

How have you customized your blog using the Design Lab? Link to your blog in the comments and let us know how you like using the new Design Lab so far. We will approve it and post your comment. 


Design Lab: Navigation Bar

Design Lab_ Navigation Bar

Thanks for joining us again as we explore more features in our new Design Lab. Previously we showed you how to customize fonts and add a banner to your blog. Now let's focus on the navigation bar. 

Your blog should be easy to navigate. There is nothing worse than getting lost trying to find information. Great blogs make it easy for readers to find information no matter how they came to the blog. Our Design Lab is here to make it easy to customize your navigation bar so readers can easily find the correct information.

Click on the Design tab, then click on Style. On the right, click on Navigation. Here you will be able to customize your navigation bar.

Display Type

We have three options to display your navigation links: Text, Icon, or None.

Text

Make it clear for your readers where they can go in the navigation bar. This will display the text you used when creating the navigation links. When you select the text option, you can change the font, color, and alignment of the text. You can show the name of the blog in the navigation bar or pin the navigation bar to the top of your blog.

Text Navigation Bar

Icons

When you select Icons from the drop down, you will remove the text and have icons on both sides of your blog. On the left there will be a Pancake (yes, that is a technical term, lol). When you click on the Pancake it will show a drop down of all the links in your navigation bar. On the right, will be all your social media sites. Click on Yes/No to add or remove the blog’s name from the navigation bar. You can also pin the navigation bar to the top of your blog.

 

Icon Navigation Bar
The three bars on the top left is a Pancake icon.

None

You can select None if you want to put links on your sidebar. We offer many different sidebar modules for you to add to your blog. The Page Module allows you to link to pages created in Typepad. You can also add a Link Typelist to share other sites you love.

Display Position

The navigation bar position will depend on what type of banner you select. If you have a text banner, you can select to have the navigation bar above or below the banner image. With an image banner, you can only have the banner above the image.

Tip: You can add links to your blog by clicking on the Content tab, then click on the pencil next to Navigation Bar. This will open a window to let you put the text in and the URL. 

Make sure to check back with us for more information about our new Design Lab. Stay in contact through our RSS feed or follow us on Facebook, Twitter, or Pinterest.

 


Design Lab: Adding A Banner

Design Lab_ Banner

We are continuing our series exploring our new Design Lab for our mobile themes. Previously we walked through how to apply fonts to customize your blog. Now, let's focus on the banner for your blog. 

Your blog’s banner is the first thing readers see and a visual representation of your blog. You want a custom banner that clearly shows your blog’s name and logo. When you are using the Design Lab you have two choices. You can use a banner image or a text banner.

Adding An Image Banner

To add the image banner, click on the Blogs tab, then click on Design. Click on the Banner tab on the left. Upload your image. You have two options for the span of the banner:

Span the width of the blog:
Recommended image dimensions
Width: 1140px Height: 250px
Span the width of the browser:
Recommend image dimensions
Width: 1400px Height: 250px

 


Banner options with imageAfter you upload the image and select the span, click on Save Changes.

Next, click on the Style tab, then Banner (on the right under Fonts). When you add your own image you can change the color of the top strip above the navigation bar (if you do not want the Top Strip, change it to be the same color as your background color). You can also decide if you want to show the banner from the blog.

Tip: Don't have a banner image? Read our article about using Canva or Picmonkey. These are great online image editor that help you customize or create the perfect banner for your blog. 

Customizing Your Text Banner


Text BannerIf you do not add an image, your blog banner will be your blog title and the description. From the Style page, click on the Banner tab (on the right, under Fonts). Here you can change the text font/color and change the background color. You can also decide to hide the text and description from the blog.

Tip: You can update the Title and Description of your blog under the Settings tab.

 

 

 

Banners are a great way to show off your creativity and represent what your blog is about. If you have additional questions about our Design Lab please contact our support team. We are always happy to help! 

Make sure to check back with us for more information about our new Design Lab. Stay in contact through our RSS feed or follow us on Facebook, Twitter, or Pinterest.

 


Design Lab: Adding Custom Fonts

Design Lab_ Adding Custom Fonts

Our Design lab is now available to everyone who is using a responsive theme. There are a plethora of options to customize your blog to fit your brand. In the coming weeks we will continue this series to help familiarize our bloggers with all the customization tools our Design Lab offers. Make sure to check back with us through our RSS feed or follow us on Facebook, Twitter, or Pinterest.

The font you pick is very important. Fonts affect the readability and the perceived level of professionalism of your blog. When you are in our Design Lab, you can customize the fonts to fit your branding. Using the preview window you can also see how they look with other font choices. You don’t have to make everything the same font. 

To use the Design Lab you need to have one of our mobile responsive themes. Check out Mobile Themes Rolling Out Of Beta to learn more about switching to our mobile themes! 

Selecting and Applying A Font

Click on the Design tab, then click on Style. On the top right in gray you will see Fonts, click on it to expand your options.

You can choose between many different fonts. We have them organized based on Style.

Handwriting: These fonts are made to look like you wrote them yourself. They have fluid strokes that gives a personal touch. Use this sparingly, as it can be hard to read.  

Display: These are large fonts that are great for headings. They are eccentric and have a variable design to help the text stand out.

Serif: These fonts have a line at the end of every stroke. This is great for bulk text that needs to be read clearly. 

San Serif: These fonts do not have a line at the end of every stroke. It is great for bulk text for easy reading. 

You can select any one of these fonts and apply it to your blog. After you have selected the font you want to use you will see it is the Active Font. Select the tab for the area you want to customize. In this case we want to change the Title Text. Click on Banner, then next to Title, click on Apply Font. You will see the font change in the preview window and under Title.

Selecting a Font
Selecting a font.
Applying Fonts
Applying a font

Importing Fonts

Import A FontWe have a wide selection of fonts for you to choose from. If you need more options you can import from Google Fonts. Find the font you want in Google Fonts and then upload into the Design Lab. Then you can apply it to any section.

From the Style page, on the top right in gray you will see Fonts, click on it to expand your options. Click on Import. You will see where you can import fonts. Click on Google Fonts to view the selection in Google Fonts. Here you will have many different fonts to choose from. Once you have found the perfect font (in this case Roboto), you want to highlight the name of the font and copy it. Go back to your Style page and paste in the name of the font (the font name has to match exactly), then click on Import. To make it an active font you need to click on the name of the font. Then you can apply the font where you want.

Fonts are a great way to brand your business. We have made choosing the right font quick and easy. Have fun and see you soon with more about our Design Labs. 


Happy Chanukah, Celebrate With An Extended 30 Day Free Trial

Hanukkah blog

Typepad would like to wish all our Jewish bloggers  and anyone else who is celebrating Chanukah this year a 

Happy Chanukah! 

In honor of Chanukah we would like to offer new bloggers an extended 30 day trial! Sign up for our Plus or Unlimited package to start blogging today. After your free trial you will be prompted to add your debit/credit card to the account (you can also pay with PayPal!). The promotion will be valid from Dec 12th to 20th, 2017 and is only available for new Typepad accounts. 

Use promotion code CHANUKAH2017 when you create your new account.

Discount image

 

Share with your followers to spread the love.  

Happy Chanukah! Typepad is extending their free trial for 30 days! Check it out!

Facebook Round Twitter round Pinterest round Linkedin round

 

Celebrate Chanukah with Typepad! Use their promo code to get an extended free trial.

Facebook Round Twitter round Pinterest round Linkedin round

 

I love Typepad and you will too! Celebrate Chanukah and start a blog with their special promotion.

Facebook Round Twitter round Pinterest round Linkedin round

Happy Chanukah!


Save 60% On .Info Domains

Save 60% On Info Domains

Logic Box (our partner for Typepad Domains) is offering a discount we want to share with you. When you buy an .info domain you will receive a 60% discount. You can purchase your domain easily through Typepad and apply it to your blog. You have until December 31st, 2017 to purchase your .info domain from Typepad.

To Purchase Your Domain

Click on the Accounts tab, then click on Domain Mapping. Under Domain Mapping, type in the domain you want. From the drop down, select info, then click on Check Availablility.

Domain Mapping Step One

If the domain is available, you will see the discounted price. Click on Select to purchase your domain.Domain Mapping Step Two

Domain Mapping Step ThreeTip: We recommend you purchase Privacy Protection for your domain. This will shield your personal information from data miners that could use our information to contact you for their services. Before you check out, click on Add Privacy Protection. In the pop up, click on the toggle to turn it on. This will be a $4.50 charge and click on Save Settings. Privacy Protection is not part of the discount.

Domain Mapping Step FourOnce you have selected your purchase, click on Checkout. You will need to quickly create an account with Logic Box. Once you have an account (this is separate from your Typepad account), you can select to pay with PayPal or use your Typepad account. Last, click Pay Online.

You will be taken back to Typepad to approve the transaction. Click on the Approve button, then click on Complete Registration. After the registration is completed, you will be directed back to the Domain Mapping page.

Below Domain Map with Typepad, you will see your new domain. Click on Map a Typepad Domain. Add your subdomain (examples: www, blog) then select your new domain from the drop down. Next to My Blog, select the blog you want to map the domain to. Put a check next to Forward the non-www domain to this subdomain. Next, click on Begin Domain Mapping.

Domain Mapping Step Seven

Last, scroll down to Mapped Domains and click on Activate. We suggest that you wait for a little while before activating the mapping.

Now your blog has a great custom domain and you saved money!! Win Win!


Mobile Themes Rolling Out Of Beta

Mobile Themes Rolling Out Of Beta

Users spend on average 69% of their media time on smartphones. (Source

A mobile responsive site looks professional and shows you care about your reader's experience on your site. Also, Google loves mobile responsive sites. So much so, they are prioritizing sites that are mobile responsive sites in search results.

We are excited to announce we are rolling out our Nimble Themes (mobile responsive themes) from Beta! They will now be available for everyone. We have 19 Nimble Themes for you to make your own. If you do not see the themes right away, you can join our Beta Team

Create A Test Blog

We know you are excited to get started and we've made it as easy as possible to get going. Before you jump in feet first for your main blog, we recommend you create a Test Blog. This will allow you to personalize one of our Nimble Themes before you apply it to your blog. Take your time with all the cool features and apply it when you are ready. No rush!

View Our Nimble Themes

Click on the Blogs tab, then the name of the blog. Click on the Design tab, then Choose Theme. On the left, click on Design Lab (Responsive). Here you will see all our Nimble Themes. Select the one that works best for your blog, then click on Choose.

Customize Your Theme

Style Tabs
Click on a tab to customize

After you have selected your Nimble Theme, click on the Style tab. Here you can customize your blog with your brand colors and fonts. There are many things you change about the design. When you select a color or font it will automatically apply to the preview design of your blog. 

What it looks like when you change the background colors.

 

After you personalize your blog, click on Save Changes.

Apply To Your Main Blog

Once your theme design is complete you can apply it easily to your main blog. Click on the Blogs tab, then click on the name of the blog you want to add the design to. Click on the Design tab. Under Your Design, find the design for your test blog. Click on Actions, then click Apply. Your new design will instantly be applied to your blog. Click on View Blog to see your new mobile responsive blog.

Resources

Below are resources from Everything Typepad and our Knowledge Base.

Make your blog mobile with these great templates!

What Mobile Designs Exist For Me to Use?

How Do I Switch to a Mobile Design?

25 Mobile Design Principles from Google

Nimble Design Lab - Beta

Nimble Design Lab: Applying Fonts - Beta

Nimble Design Lab: Style Settings - Beta

Getting to Know Nimble: Showcase Your Photos with the Highlight Bar

Getting To Know Nimble: Navigation Bar

Getting To Know Nimble: Banners

Getting To Know Nimble: Fonts

Nimble On Different Devices

Mobile Example 2
Mobile Example 2
Mobile Example 2

 After you have updated your blog to our new Nimble Themes, post a link in the comments! We would love to see what you have done! 

 


Tweet this! Using Share Link Generator to embed custom tweets

Tweet This

We read blogs to be entertained and/or educated. When you read something funny, enlightening or disturbing you want to share it right away. With the holiday shopping season coming up, you want to make it easy for your readers to share your message/deals with their Twitter followers.

People are 90% more likely to trust and buy from a brand recommended by a friend. (source) Tweet This

ShareLinkGenerator.com enables you to create a Tweet This link your readers can use to easily share to Twitter right away. o0pThis also gives you some control of the message that is tweeted about your post. You can use this to further share an interesting fact or great promotion. 

First, you will need to get the permalink from your blog post. The permalink is generated from your title, make sure you are done changing the title and permalink before you copy the URL.

Get Permalink

Copy the permalink and then go to Bitly and shorten your permalink. Copy the Shorten URL.

Bilty


Twitter ShareThisGo to ShareLinkGenerator.com to generate the link/code to add to the body of your blog post. Under Twitter, enter the text you want your readers to share (an interesting fact or information about a sale), and the URL from Bitly. Then click Create The Link. You will then be given a URL and code to add to the body of your blog.

Grab the URL and then go back to your blog post. Type in the same twitter message (without the Bitly URL) and then type Tweet This. Highlight the text “Tweet This” and then click on the Insert/Edit URL button. Paste in the URL and select to open in new window. Click ok and then Publish your draft. Below is how it will look. 

Love learning new tips for my Typepad Blog. Tweet This

Super easy to use!

Your readers will be able to tweet out interesting facts or information to their Twitter followers from the body of your post. This gives you some control of the message that is sent out from your post. ShareLinkGenerator.com also creates links for other social media sites. Play around and see which one works best for you.

Do not forget to add the share links at the bottom of your blog post by configuring the post/page footer. Give your readers more options to share!

Share in the comments other ways you encourage your readers to share your message. 


Update: Embed Social Media Posts in Your Blog Post

While Typepad has made it much easier to embed an Instagram image into your blog post, sharing status updates from Facebook Twitter and Pinterest is also pretty easy. With recent changes these platforms have made, we are updating you on how to insert a status update into your blog post.

How to Get Your Embed Code to Share

Facebook

Every status you see in your Facebook feed has three dots on the upper right corner:

Screen Shot 2017-09-11 at 4.41.50 PM

Click the three dots to see an expanded menu of options, including the "Embed" option: 

Screen Shot 2017-09-11 at 4.44.10 PM

When you click Embed, you will get a pop-up of a code you can insert into your blog post: 

Screen Shot 2017-09-11 at 4.47.17 PM

Twitter

In Twitter, each tweet has a down-arrow on the right corner, when you click that arrow, a menu will appear and the second option is "Embed Tweet."

  Screen Shot 2017-09-11 at 4.51.56 PM

Screen Shot 2017-09-11 at 4.52.53 PM

Pinterest

If you want to share a pin, you will have to click on the actual pin to full view in order to get to the "Embed" option, also located by clicking the three dots over the image: 

Screen Shot 2017-09-12 at 7.33.42 PM

The "Embed" link will open up to a developer page with widget options.  Make sure the "pin" option is selected.  You can also select the size of the pin and if you want to include the description when you embed it: 

Screen Shot 2017-09-12 at 7.49.11 PMYou will see a preview of how the pin will appear when you share it.   In addition to the embed code, there is a javascript code they recommend you include in your blog before the </body> tag:

Screen Shot 2017-09-12 at 7.52.55 PMThis can easily be added to your blog by going to Design > Content > Modules > Embed Your Own HTML - place this code in the pop-up and save it at the bottom of your sidebar.  You only need to add this code once in your blog and will be applied for all future pins added to your blog. 

How to Share on Your Blog

In your blog post, you can quickly insert this code by clicking the "Source Code" button in the Rich Text editor menu bar, this allows you to insert HTML into a blog post without switching to the HTML editor: 

Screen Shot 2017-09-11 at 4.49.33 PM

A pop-up of the source code will appear and you insert your embed code here.  You may not see the embed in your Rich Text draft so click the Preview button to see if it's placed in the right spot.