Posts categorized "Tips and Tricks" Feed

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.


Making Money With Your Blog: Creating a Paywall

Making Money With Your Blog- Creating a Paywall

Today, we'll teach you how to use Typepad's multiple usernames feature. Using this feature, you can create a paywall on your blog. Readers would not be able to read select posts unless they have paid. Once paid, you can create a unique username and password, just for them..

If you sell content of some sort on your blog - anything from life coaching lessons to a recipe for a specific food dish or even a card made with stamping supplies - with individual password protection, you can make the content available to your readers, but only after they pay you to access it.

To set this up, you can create a main post or Typepad Page that has information on your subscription and rates.  On that page, you can link directly to PayPal so people can pay you or you can add an e-mail link so that people can contact you before paying you.

Once they pay you for the content, you would go to Settings > Basics and create a new username and password for each paid reader.  After doing this,  you would simply go to the post(s) with the paid content and check the box for their username.

Userboxes
Setting individual access for a post.

The reader would then be able to see the content the next time they visited your blog.  This means you only have to keep up content on one blog, granting access to the content only to those that you want to be able to view it. It's a snap to set up a paywall this way.  You can learn more about this feature in our Knowledge Base.

Have you set up a paywall yet for your blog?  What kind of content are you selling behind yours?


Update Your Security Question

Update Your Security Question

What would you do if you could not get access to your blog???? Do you know your username and password or just rely on the auto-fill  function? While you still have access to your account, it is important to create or update your security questions and answers. This saves you the trouble of verifying a bunch of information to get into your account.

To add or update your security questions, click on the Account tab, then Under Account Information look for Security Questions.  From the drop down you can pick one of our questions or use the custom question option to create your own. You will need to set up two security questions. After you have selected the questions and provide us with the answers, click on Save Changes.

Security questionsThe security questions will be used by Typepad support to verify ownership in case you need help getting access to the account or need private information about your account. 

If you ever need help getting access to your account let us know! You can contact us through our support form or email us at support@typepad.com.


Get customers the information they need with Typepad Pages

Get customers the information they need with Typepad Pages

Whether you're a well-known corporation looking to share company news with customers, or an ordinary person who would like to make a little money selling your arts, crafts, or services online (or anywhere in between!) your blog should be a key part of your business strategy.

This month we've looked at how to promote your products in your blog's sidebar, write sponsored and affiliate posts, and motivate your readers with a call to action button. Today we turn our attention to sharing information with Typepad Pages.

Most blogs display their content in a series of posts with the most recent at the top. This is great for keeping readers coming back again and again for new content. But what if you have some information you'd like everybody to see and don't want it to get lost among the new updates? This is where Pages come in.

A Page is a content page similar to those on a non-blog website, with information that doesn't change frequently. You can set up a special "about page" with information about your company and its history; provide a street or mailing address or a phone number for customers to contact you; or share testimonials from clients who love what you do. Pages can also be a great way to consolidate all information about your services in one place, or to display a portfolio of your best work.

The information you provide on Pages may be what convinces a customer that your business is stable and reliable, or that demonstrates you can provide exactly what they need. If you're looking to close a sale from your blog, you'll want to make sure you're using Pages.

To create a Page, log in to Typepad and click your blog's name on the Dashboard or in the "Blogs" drop-down menu along the top. On the Overview page for your blog, you'll see a yellow "Compose" button near the top with an arrow to the right. Click the arrow and a little menu will drop down where you can choose "New Post" or "New Page". You'll want to select the "New Page" option.

New Page

Need to set up something else for your blog first? You can access the yellow Compose button, and the "New Page" option from any of the configuration pages for your blog inside of Typepad.

Clicking the "New Page" link will take you to a new Compose screen where you can create your Page. Give your Page a descriptive title, type up the content you want to share, and add any desired formatting or images. When you're done, publish your Page. You can click the "View Page" link that appears after the Page is published to check out how it looks on your blog.

Now you need to make sure visitors to your blog can find the new Page! Go to the Design > Content area in Typepad, choose the "Links to Your Blog's Content" category then the "Pages" module and then click "Add Module".

Et-pagesmodule

Once you've added the Pages module, your blog's sidebar will display a list of all public Pages, which automatically updates each time you add a new Page. You can also link to especially important Pages using the navigation bar.

If you'd like to make a Page the first thing visitors to your blog see, rather than your blog posts, you can set up a landing page. Don't forget to provide a link to your recent blog posts in this case!

Are you using Pages for your business's blog? What types of Pages do you think are the most useful for your customers? Let us know and share your tips in the comments!