Posts categorized "Tips and Tricks" Feed

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.

 


5 Things To Do For Your Blog in 2018

5 Things To Do For Your Blog in 2018

It is a new year and everyone is thinking about what to improve. You can improve many things, but we recommend you focus on your blog. We complied a list of five things you can do to take your blogging to the next level!

Go Mobile

In 2018 more and more people will be on their phones (they are pretty amazing after all). You want to make sure your blog is easy to read on a mobile device. Typepad is here to make it easy to switch over to a mobile theme. You can use our new Design Lab to customize one of our mobile templates. We recommend you create a test blog and design a new mobile theme. Once your design is complete, you can apply it to your main blog.

Custom Domain

A domain should be simple and easy for your readers to remember. You want a domain that tells your reader exactly what your blog is about. Typepad lets you purchase a unique domain and map it to your blog. To purchase a domain, click on the Accounts tab, then Domain Mapping. Under Domain Mapping, type in your domain and click on Check Availability. If your domain is available you can purchase it and apply it to your blog.

Blog Goals

Goals can  give you focus for the year. Create three goals for your blog; one short term goal, one intermediate goal, and one long term goal. Creating the goals may be the easy part. The next, and maybe the hardest part, is breaking the goal down into steps that you can keep track of. The steps should have measurable results and a time frame. Our best advice for you is to write down your goals and your steps. Use a program like Wunderlist to keep track of your progress.

Learn New Things

When you are comfortable with your blog that is when complacency kicks in. It is important to learn new things to help grow and get out of our comfort zone. Learn something new about your blogging subject or learn something new about blogging (like adding an image gallery to your blog posts or create a YouTube channel and start posting videos through Typepad). Use what you have learned and share it with your readers. Show them you are an expert and they can trust your blog.

Read A Book

“If you don’t have time to read, you don’t have the time (or the tools) to write. Simple as that.” -Stephen King

When you read you increase your vocabulary and cognitive skills. Reading books will greatly influence your writing. You can read a book about writing, blogging, or whatever you want. The point is to read. Reading helps you get inspiration for your own writing. After you read something you gain knowledge you can use in your own writing. Two great books that come highly recommend to help with writing are Bird by Bird by Anne Lamott and Everybody Writes by Ann Handley.

What is on your 2018 checklist for your blog? Share in the comments to inspire others! 


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. 


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. 


Give your blog a new look for the holidays

New look for the holidays

Many of us love to decorate for the holidays. From pumpkins and spooky ghosts in October to tinsel and Christmas lights in December, decorations are a great way to get in the holiday spirit. You may decorate your home or your workspace, so why not decorate your blog too?

If you're artistically-inclined, or have a willing friend who is, you could create a holiday-themed custom banner image for your blog. If you're already using the Chroma, Clean, Metropolitan, or Mosaic themes, you can upload your new banner at Design > Banner. Easy as pie! The Theme Builder (available for our Pro Plus subscribers and above) also offers an easy banner upload option, as do the Nimble Design Lab (Responsive) themes.

Nimble Design Lab banner page

Even if you're using a predefined theme with its own built-in banner image, if you're on the Pro Unlimited plan or above and are comfortable with doing a little coding, you can add your new banner using Custom CSS.

When the holidays are over, you can put your old banner image back, or maybe create another new custom banner for the New Year...

Don't forget to check out our tips for creating a custom banner and determining the best size for your banner. Here on Everything Typepad, we've also got reviews of some popular image editing tools to help you in creating a wonderful blog banner.

Do you use custom banner images on your blog? Which ones have your readers liked best? Tell all in the comments!


An Early Guide To The Shopping Holidays

An Early Guide To Shopping Holidays

It is so easy to put it off. The change to Fall, the crisp air, your need for a pumpkin spice latte. Go get one, we will wait…. They are good, right? Well, there is something you need to start thinking about if you make money off your blog.  Holiday Promotions. You guessed it. The shopping holidays are just around the corner and you should start preparing now. Your readers will want to know if you are planning any holiday promotions. Tease them early so they add you to their gift buying plan. We have gathered information from our sources into one place to help you get started. 

We know you would rather be enjoying an evening walk with loved ones, but if you do this planning now, you can walk with them more during the holiday season. 

Dates

The main shopping holidays to start planning for: 

Halloween Tuesday, Oct 31st
Thanksgiving Thursday, Nov 23rd
Black Friday, Nov 24th
Small Business Saturday, Nov 25th
Cyber Monday, Nov 27th
Giving Tuesday, Nov 28th
Hanukkah Begins Tuesday, Dec 12th
Hanukkah Ends Wednesday, Dec 20th
Christmas Eve Sunday, Dec 24th
Christmas Day Monday, Dec 25th
New Year's Day Sunday, Jan 1st

These are the main holidays that US customers expect to find promotions for. Use that to your advantage. These holidays encourage people to purchase gifts for their loved ones. 

You should have a plan for an overall promotion and each shopping holiday should have its own version of the promotion. If you are blogging for business, we recommend you take the time to think out a Black Friday, Small Business Saturday, Cyber Monday, and Giving Tuesday strategy. These are the main shopping days readers plan for. Letting readers know you will be providing deals during these holidays will help them plan their shopping strategy.

Organizations to help you prepare

This is a one stop post to help you get started on your strategy. We did the research for you and prepared a list of places to start. Their websites are full of information that can help guide your holiday strategy. 

Small Business Saturday  Giving Tuesday

Create Material for your Small Business Saturday Promotions

Get your Community together for Small Business Saturday

Giving Tuesday Blog

Giving Tuesday's Tool Kit

Typepad Constant Contact

Call To Action Button

Pre-Schedule Posts

Prepare for Small Business Saturday

Prepare for Cyber Monday

Prepare for Giving Tuesday

Constant Contacts Holiday Blog

Constant Contact Content Calendar

Hashtags

Hashtags are a great way to get found through social media. We have gathered a list of all the hashtags we could find for each of the shopping holidays and put them in an easy to read infographic for you to use! Use them along with your branded hashtags to help  promote your blog and deals. 

Holiday Season Hashtags
You will feel relieved after all the planning is done and you can sit back and relax during this holiday season. Now go get another pumpkin spiced latte as your reward, then let us know how you plan for these shopping holidays. What promotion strategies have worked for you in the past? What has not worked? What is your go to source to help get ideas for the coming shopping holidays? Share with your fellow Typepad Bloggers!

 


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.  


CSS Tips: the new beta Image Gallery

The new beta Image Gallery

In light of our new Image Gallery feature that's currently in Beta, here are some CSS tips to get you started on fitting it to your blog's theme and brand.

Before anything, check out our post on the new Image Gallery, covering the features it now has and how to use them. If you're not already a Beta team member, or aren't sure if you are, you can go to Account > Summary to make your changes. You'll also need to be an Unlimited or higher member to take advantage of the Custom CSS feature.

Note: these CSS changes assume that you will be using the same Image Gallery option setups each time you use the feature. The changes will always be applied. If you do not wish for that to happen, then we recommend placing the CSS inside <style> ... </style> tags in the HTML of the post or page.

Default Styles

Some of the default options are to add multiple images, set to a specific thumbnail size that will display in a grid pattern, and adding a title, description, and border. Those options are all selected and the final default result appears in the screenshot below.

default image gallery styles
The theme chosen for this example is a wide 1-column layout, so you're seeing the 2-thumbnail wide gallery aligned to the left in that space.

 

Before we get into the CSS tips, here is a breakdown of the CSS IDs and Classes used for the gallery:

#featherlight-gallery
    fieldset (fieldset.border)
          legend (legend.border)
      .featherlight-gallery
      #gallery-container
          ul.asset-thumbnails
              li.asset-thumbnail
                a

The offsetting shows which IDs and Classes are parents and children, in case you need to make further customizations than what will be done in the example below.

Width and Position

The first change we'll make is to tell the gallery we want it to take up more horizontal space and to always be positioned in the center of the post. Due to the fact that the example uses a wide 1-column theme, we can make use of the empty space the default gallery leaves to the right. To do that, we would use the following CSS:

/* IMAGE GALLERY - WIDTH & POSITION */
#featherlight-gallery, #featherlight-gallery fieldset { width: 90% !important; /* width of gallery */ margin: 0 auto; /* auto margin to center */ }

The above code sets the gallery width to be near 90% (you may need to make it wider or narrower, depending on your blog's width), so it can then have room to be positioned center to any other content you have in the post or page. Here's what that would then look like:

wider centered gallery
CSS for wider gallery and center positioning is applied.

Title and Description

While the default style works well with the new width, we're going to walk you through how to adjust the font and background color of the gallery title, then the positioning of the description.

Considering the color scheme the design we used has, the title may stand out more with a background color. It's also on the small size, so we'll want to make that a tad bigger. Having it automatically capitalized could look nice as well, so we'll go ahead and make that change too.

/* IMAGE GALLERY - TITLE */
#featherlight-gallery legend { font-size: 125%; /* increase font size */ background-color: #ea9f8f; /* change background color */ text-transform: uppercase; /* transform text to all uppercase */ }

With the color and size changes, it may seem too cramped inside the border of the title. We'll add some space to make that look better by adjusting the margin and padding.

/* IMAGE GALLERY - TITLE */
#featherlight-gallery legend { font-size: 125%; /* increase font size */ background-color: #ea9f8f; /* change background color */ text-transform: uppercase; /* transform text to all uppercase */ margin: 0 15px; /* adjust margin to have 15px space on left-right */ padding: 10px 20px; /* add padding to give text breathing room */ }

The description appears a little close to the bottom of the title, so to fix that, we can use the following:

/* IMAGE GALLERY - DESCRIPTION */
.featherlight-gallery { padding: 15px 0 10px; /* increase padding above and below description */ }

Note: some of these font style changes can be done in the editor but, again, we're assuming you want these style changes to be applied to all instances of the image gallery when it's used. If not, just make individual stylistic changes in the compose editor after inserting the gallery images.

Here is what the above changes would look like on the published blog:

Title and Description changes are applied
CSS for title and descriptions changes are applied

Opacity

The final change we'll make will be to change the opacity of the linked images so that they only show their full opacity when hovered on. This allows viewers to focus on a specific image before clicking to see it larger. Here's the CSS to do that:

/* IMAGE GALLERY - DIM IMAGE OPACITY */
#gallery-container ul li a { 
    opacity: 0.5;  /* set linked image to half opacity by default */
    }

/* IMAGE GALLERY - FULL IMAGE OPACITY */
#gallery-container ul li a:hover { 
    opacity: 1;  /* return full opacity on hover */
    }

The first set of code tells the linked image to appear at half opacity, so that it's dimmed by 50%. The second set of code tells it to return to 100% opacity when it's being hovered over. This is what that looks like in the published blog:

Image Gallery OpacityAnd that's it for today's CSS tips! If there's something we didn't cover in this particular article, and you're wondering if it's possible, feel free to leave a comment or open a help ticket at Help > New Ticket. We're always ready to help!


CSS Tips: Hide Post Footer Elements

We talk about CSS (cascading style sheets) a lot on Everything Typepad because there are so many ways you can change your blog's design with a snippet of CSS code. We love it when Typepad bloggers reach out to us with design queries and enjoy finding the code for you!

In this quick tip, we are answering a question about how to make small changes to the look of the Post Footer in responsive designs.

If you are using the Design Lab to create a custom, responsive design, you will notice the Permalink and Comments links in the Post Footer have an icon. Maybe you prefer to not include the icon, only text, which can be done with a little CSS.

Here is a look at the Post Footer with all elements:

Post Footer Default

First, let's hide the icons with some CSS:

.permalink::before { content: none !important; }

.entry-comments::before { content: none !important; }

The result:

Post-Footer-2

If you like the look without the icons, go to Design > Custom CSS, enter one or both lines of code above in the text field, and click Save Changes.

Since you can click the Post Title to go to the individual post page, you may think the Permalink in the Post Footer is unnecessary. With a little more CSS, you can hide the Permalink entirely!

.permalink { display: none !important; }

Most other changes to the Post Footer style can be made at Design > Styles. To change what is displayed in the footer, you can do so at Design > Content for your blog.

Are you looking to make any other design tweaks with CSS? Let us know in the comments, and we can write up another tutorial with the code.