Everything Typepad

Quick Tip: How To Add A Quick And Easy Message To Your Comment Form

Do you want to let your readers know about your comment policy before they comment? By adding a small bit of CSS code to your Design Lab or Magazine Layout - Featured Cards theme you can add a message over the comment form. If you have comment moderation enabled, for instance, you can let your readers know their comments won't appear right away. Or you may just want to ask for all commenters to submit their name and not a pseudonym.

Custom CSS is a feature available with the Pro Unlimited and higher plans. If you're on a lower plan, you'll need to upgrade. 

Typepad offers three types of commenting options: the default comments, Typepad Connect , and Disqus comments. The CSS code is slightly different depending on the commenting system you're using.

Not sure which commenting system you have on your blog? There's an easy way to check. Click on the Blogs tab, then the name of the blog. Select the Settings tab, then Comments. Along the top, it'll either say "Typepad Connect is currently enabled for the blog", "Typepad's default commenting system is currently enabled for the blog", or "Disqus Comments Enabled". Once you know the commenting system your blog is using, you can use the correct code below.

Please note, if you're using another 3rd-party commenting system, the below code will not apply.

Here's what our example will look like: 

For the default commenting system, you can use the CSS code below:

#comments-open-login:before {
content: "Comments for this blog are held for moderation before they are published to the blog.";
display: block;
margin: 10px auto;
text-align: center;
padding: 5px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}

For Typepad Connect comments, you can use the CSS code below:

#comments-signin:before {
content: "Comments for this blog are held for moderation before they are published to the blog.";
display: block;
margin: 10px auto;
text-align: center;
padding: 5px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}

For Disqus comments, you can use the CSS code below:

#disqus_thread:before {
content: "Comments for this blog are held for moderation before they are published to the blog.";
display: block;
margin: 10px auto;
text-align: center;
padding: 5px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}

Within the CSS, you can edit the following attributes:

• The content attribute is where you'll include the text you want to display above the comment form.
• The margin can be increased or decreased to increase the space around the note.
• The text-align attribute can be set to center, left, or right.
• The padding around the text can be increased or decreased. Since our example includes a shaded box, the padding determines distance between the text and the outside of the box.
• The border settings can be changed too. If you don't want a border, remove this attribute entirely.
• The color code for the background-color can be adjusted. If you don't want to have a background color, you can remove this attribute.

You can also include other attribute snips — for example: font-weight: 600; — will make the text of your message bold. You can find other formatting attributes in the article on styling the post title with CSS.

After you customize the CSS specific to your comment type, go to Design > Custom CSS, enter the CSS code in the text field, then click Save Changes to update your site.

Do you already use CSS to insert a message to your readers above the comments? If so, share your tips to make it stand out or let us know in the comments how well it's working for you!

Learn How To Create An Informative 404 Error Page

What do your readers see when they stumble upon a broken link? You can now create a custom 404 error page that will share the fun side of your brand and help readers find the information they need.  Let's get started!

Creating a 404 Error Page

First, you need to create your 404 error page. Click on the Blogs tab, then the name of the blog. Click on Posts tab, then Pages. Click on New Page to create your 404 error page. 

PRO TIP: We recommend you keep the title simple, like "404 Error" or "Sorry, wrong page". You can also edit the post URL to reflect the type of page it is. Click on Edit next to Permalink and update the URL. Keep it short by changing it to "404-error" or "404-error-page",

After you have the perfect 404 page published, click on the Settings tab, then Custom 404. Select the page title from the drop-down menu and click on Save Changes.  

If you no longer want a page to show as the error page, you can remove it. From the Custom 404 tab, select Remove Custom 404, then click on Save Changes.  

Now that you know how to create a 404 error page, let's go over what should go in your error message. We have complied a list of best practices to help you get started. 

Best Practices

 

Branding

When writing an error message or creating an image for your 404 page, keep in mind your brand's look and feel. Write in the same tone you write your blog posts and keep the images similar to ones you have on your blog. 

 

Clear Message

You want to make sure readers can clearly see they arrived at an error page but are on the correct website. Create a short message letting your readers know the URL they went to is not correct. Too much information can be distracting.

 

Entertaining Message

Your 404 page is a great place to use a little humor to engage readers. Add a funny or unique image to show the funnier side of your brand and rally your readers to keep searching your website. There is a thin line when using humor; make sure to not pack in to many jokes.  

 

Call To Action

Now that your reader is on the page, let them know what you want them to do. They can search your site for specific content or contact you with information on where they see the broken URL.

 

Search Your Site

When readers come to an error page, a search bar will encourage readers to stay on your site and find the information they need. You can add a Google Programmable Search Engine on your error page that will search just your website for posts and pages. It's easy to add the code from Google by using the Source Code button (looks like < >) on the Compose page. Keep in mind that you won't see the search box on the Compose page, you will need to preview or publish the page to see the search box. 

 

Contact Information

It's a good idea to know where readers are seeing this broken link. Have an easy way for readers to contact you and provide information on where they came from. Ask the reader to include all the information you believe you will need to investigate and correct the broken link. If you are being linked back to from another blogger, reach out to them with the correct link.

Now, you have everything you need to create a 404 page that will help keep your reader and direct them to the correct information. After you create your 404 page, share it with us. We would love to see what you create.