Today we're here to bring you a quick CSS trick in customizing your blog's design. In order to take advantage of the Custom CSS feature, you need to have an Unlimited plan or higher.
By default, the post date appears under the blog post title:
Some bloggers prefer the date to appear above the post title. This can be achieved by inserting the following CSS code at Design > Custom CSS:
With the shiny new Magazine Layout, you can share a new look for your blog. The Custom CSS feature allows you to customize the design to fit your brand. (Custom CSS is available with the Unlimited plan. Click here to check your plan.)
The Magazine Layout is currently available in beta. It's easy to join the beta team to take advantage of new features. Learn more.
Now, we are going to share some CSS tips for changing the formatting of the Blog Title.
Change Blog Title Size
At Design > Custom CSS, you can add the below code to the text field:
.blog-header-logo { font-size: 40px; }
Adjust 40px to the preferred size for the title and click Save Changes.
The Design Lab is our easy to customize, mobile friendly theme. When you don't add a banner to your theme, your blog name and description will be centered on the theme.
You can change it up by adding a bit of CSS code to left or right align the title and description.
Quick note: If you want to make changes to the CSS code, you need an Unlimited plan or higher. You can quickly upgrade if you do not have this plan.
Add Alignment to your Title and Description
Click on the Blogs > Name of blog > Design > Custom CSS. In the box, paste in the code for the alignment you want below. Last, click on Save Changes.
Left Align CSS Code:
#banner h1, #banner h2 { text-align: left; }
Right Align CSS Code:
#banner h1, #banner h2 { text-align: right; }
Now that you have aligned your blog title and description share your blog in the comments. We'd love to take a look.
Now that we're coming out of winter and thinking about tossing out the things we no longer need, it is also a good time to take a closer look at your blog's sidebar content. Do all of your links still work? Are there any broken images? Did you notice your blog is taking longer to load? These are things to think about when reviewing your sidebar content.
Not Loading Securely
Images that have been uploaded to your sidebar before the SSL certificate was applied to your blog domain might still display the http:// version of the image URL. This can lead to your blog loading as non-secure. You can go in and simply update the URL to https:// and your blog will load as secure again, easy-peasy!
Loading Slow
Review all the modules in the sidebar to make sure you know what they are and how they help your blog. Outdated widget codes will slow down your blog's loading time. For example, if you still have a Sitemeter counter in your sidebar, this service is no longer available. You can use Google Analytics to monitor blog visitor data instead.
Typelist Links
If you have Typelists in your sidebar, check your Typelist lists to see if they are all still working. You can edit your Typelists by going to Library > Typelists.
The spring cleaning season is here. You may be focused on cleaning your home or personal goals, but don't forget to give your blog some attention. It may be overwhelming to think about cleaning up your blog. Never fear! We have a great checklist to get you started!
New Theme
Can your blog be read on a phone? If you're not sure, take a moment to check. We can wait...
Was it hard to view your text? If you find it hard, your readers will too. We recommend you update your theme to one of our responsive options. You can select one of our customizable Design Lab themes or our new Featured Cards theme. Our Design Lab themes, the Design Lab builder, and Featured Cards are all great options.
Our Design Lab themes allow you to customize your blog by choosing your own colors, fonts, and more for each section. Below we have some themes for you to choose. Find one that fits your style, then customize it to make it your own.
We have recently added Featured Cards to our themes. This theme is mobile friendly and has a very modern look. Your blog posts will show as a Magazine-inspired layout.
Quick tip: Create a test blog to select and customize your new theme. Once it's perfect, you can apply it to your original blog.
Check Your Links
When was the last time you clicked through your blog? Are all your links still going to relevant information? Take the time and click on all the links of your blog and make sure they are going to their intended destination. Here is a list of places to check:
Navigation Bar
Social Media icons or links
Any links on your sidebar
Links in footer
Keep a list of what needs to be changed. The first place to start updating links is on your Design tab. Under Content, you will see all of the modules that you can edit. Click on the pencil to update the module with new links. If your link is in a Typelist, click on My Library then Typelist.
If you recently mapped your domain, make sure to take a moment and check all to make sure they are using your new domain.
Does Your Custom Domain Work Without WWW
More and more people are dropping the www when they type your domain into an address bar. You want to make sure if a reader doesn't use www, it will still forward to your blog. To check if your forward works, we recommend you use a browser that you don't normally use or use a different computer. Type in your domain without the www and click enter.
Does your blog show up? If it does, great! Your forward is working great and no need for further steps.
When was the last time you looked at your logo or banner? Does it need to be updated or do you need a new one? Now is a great time to review your logo and banner and make sure it fits your blogs' brand.
If you want to design a new one, we recommend checking out Canva or PicMonkey. Both are paid services, but they offer free trials for you to utilize. You can see examples to help inspire you. Customize the templates provided or make your own.
When looking for images to use in your logo or banner, you do not want to grab any old image off of Google. You want to use an image that is free for you to use. There are many free image sites out there that offer Creative Common License images for you to use on your blog. You can search by keywords and use the one that works best for you. Some that Typepad uses are Pexels, Unsplash, Pixabay. There are many more royalty-free and free stock images sites available. Take a look and see what you can find.
If designs are not your thing, you can hire someone to create a logo for you. Typepad's design team can create a custom banner for your blog. We can take an existing logo or design you have and update it. Outside of Typepad, two of the most popular are Upwork and Fiverr. Many design professionals are on these sites and can work with you to create a banner for your blog or a new logo to help stand out. They make it easy to find someone, collaborate with them, then pay them for their services.
Update Your About Page
Your readers are curious about the person behind the blog. Your focus may have changed since starting your blog. Update your About page to include any new information to share with your readers who you are and what the blog is about.
Some information to consider for your About Page:
Contact info. How can people contact you about your blog?
Include links to all your social media sites. The Other Accounts feature will allow you to link to social media sites on your blog and your About Me page.
What is the blog about? Create a short summary of what readers can learn from your blog.
How/why did you get started blogging? Are you an expert in the field or do you want to share your experiences? Are there others helping you with the blog? Who are they?
Are there any important milestones or interesting facts about your blog? Was it featured in any well known publications?
Meta Keywords And Description
Your meta keywords and meta description are used by search engines to classify and describe your blog content. As you start blogging your message can evolve. Make sure the content you're blogging about is represented in the meta data.
The meta keywords help search engines know what your blog is about. You want to add keywords and phrases that describe what information is found in your blog. You want to use long-tail phrases as that is what people tend to use to search.
For example: What to cook vegan for dinner, How to cook vegan meals, How to find vegan restaurants, Find vegan recipes, Vegan, Cooking, Vegan Food, Cook Vegan
The meta description is what shows under the search engine results. It is a brief description of your blog. The primary goal of your meta description is to showcase the value of your blog and to encourage searchers to click. It can be any length, but Google tends to truncate after 160 characters. It should be written in your blogging tone and voice. Include your meta keywords in a natural conversational way.
If you are thinking to yourself "when will I have time to do all this?" We are here to help! Our Design Team offers a Tune-Up service to review your blog, identify areas that could use improvement, and then make all the changes for you.
After you have cleaned your blog, post a link in the comments. We would love to see your new and improved blog!
A top-level domain (TLD) is what comes after your web address. It is usually .com, .org, or .net. These would be the most common TLD out there. You may not know that there are many others that you can use to explain your blog and add pizzazz to your domain.
For example, you may be a band that runs a blog to keep your fans informed of all your tour dates, new albums and more. It would be fun to have a .fans TLD to help your blog stand out.
Here is a list of all the top-level domains offered by Typepad:
.attorney
.dog
.jobs
.org.uk
.tech
.band
.es
.kitchen
.photo
.tel
.bargains
.eu
.lawyer
.photography
.theatre
.beer
.family
.lgbt
.pictures
.today
.best
.fans
.life
.property
.trade
.biz
.fashion
.live
.review
.tv
.blog
.feedback
.love
.reviews
.us
.business
.futbol
.me
.sale
.us.com
.ca
.game
.mom
.shop
.vet
.co.uk
.games
.name
.shopping
.vote
.com
.garden
.net
.site
.website
.com.au
.group
.news
.social
.wedding
.company
.help
.nl
.software
.wiki
.cooking
.in
.nz
.store
.work
.de
.info
.online
.studio
.world
.desi
.ink
.org
.study
Wow! That is a lot of TLD to help you stand out.
Universally when you think of a domain, you automatically think of .com at the end. If you use a different TLD, we recommend you purchase the .com version of the domain and forward it to the main domain.
Forwarding is also handy if you have a commonly misspelled word in your domain, you can purchase the misspelled domain and forward it to the correct spelling of your domain.
Forward Your Domain
Let’s stick with our earlier example of the band. Their blog is at bandrules.fans, but they want fans who go to bandrules.com to land on their bandrules.fans site.
First, you will need to purchase the domain you want to forward (in our case bandrules.com). In Typepad click on the Account tab, then Domain Mapping. Here you can purchase your domain. After the domain is purchased do not map it to your blog.
Once you have purchased your domain, you will need to log into our domain registrar. This is different than your Typepad account.
Quick Tip: If you are unsure of the login information for the registrar, please contact us and we will be able to get you access to the account.
Once logged in, click on Login (Your Name), then My Account. Under Manage Orders, click on List/Search Orders. Here you will see a list of your domains. Click on the domain you want to forward (bandrules.com). Here you will see an overview of your order.
Scroll down to Domain Forwarding and click on Manage Domain Forwarding. Add www to the Sub-domain prefix. Under Destination URL, select https:// from the drop down and add the www version of your main domain (in this example www.bandrules.fans).
Click on Advanced Settings to turn off URL Masking. Turn on Sub Domain Forwarding and Path Forwarding. Save your changes.
It may take up to 15 minutes for the forward to start working.
Now you have 2 domains pointing to your blog. You will not miss out on any readers of your blog if they don’t use the correct domain. Share with us what unique TLD you use for your blog in the comments.
Valentine's Day is here and it has given us all the feels! We want to show everyone our team's favorite blogs. There are many reasons our team loves these blogs so check them out and see if you will fall in love too!
Congratulations! You just set up Domain Mapping and your new blog is loading with your new custom name! While your permalinks, category links, and archive links may be working with the new domain - some links still need to be manually updated to reflect the new blog URL.
Mapped to blog or entire site?
How you set up Domain Mapping at Account > Domain Mapping will determine how your new blog URLs will appear.
If you mapped your domain name to the entire site, your blog URL will also include the folder name of your blog (ie: www.example.com/blog_name/). If you mapped your domain name to a specific blog, the folder name is not included.
Navigation Bar
The links in your Navigation Bar will still have your original Typepad domain (example.typepad.com) links saved. You can update these links by going to Design > Content > Navigation Bar, and click the pencil icon to edit your Nav Bar links.
Blog Footer
Also located at Design > Content, the Blog Footer module includes a link to your blog by default.
Typelists
If you previously set up any Typelists for your blog that includes links to the original blog URL, go to Library > Typelist, and update any links saved with the old links.
Quotes are a great way to support your idea with information straight from the source. Our editor has a featured called Blockquote. This allows you to offset text in your blog post so it stands out. This can be used to use highlight a quote from someone or important information.
After you type the text highlight it and click on Blockquote.
If you have any one of our Design Lab themes, the text twill be indented and highlighted by a bar. Below is what it will look like.
"The Blockquote feature is a fun feature to use!" - Typepad Team
Depending on the theme your blog has the Blockquote will look different, but it will always be indented. Below are some examples.
Gourmet (Responsive)
Snap (Responsive)
Dapper
The Rich Text editor has many great features to enhance your blog. What is your favorite feature on the editor? What would be a fun feature to add?
The welcome message is a Typepad feature that allows you to welcome readers to your blog. When readers come to your blog, a popover or embedded box will showcase a welcome message.
To add a welcome message to your blog, click on the Blogs tab, then the name of the blog. Click on Settings, Basic. Scroll down to the Welcome Message.
The text box allows you to include HTML code. You can add code to the text box to include a link in your message.
To add a link to your welcome message add and customize the following code in the welcome message text box.
<a href="http://www.urlhere.com">Text you want readers to click on</a>
Replace http://www.urlhere.com with the URL you want readers to go to. Then replace the text with the text you want readers to click on.
For example, if you want to link to your about page the message text box will look like this:
And the Popover message will look like this.
You can also stylize the link so it further stands out.
To underline the text, add <u> before the link code and </u> after it.
<u><a href="http://www.urlhere.com">Text you want readers to click on</a></u>
The code will look like this in the text box:
It will look like this in the welcome message:
To bold the text you will add <b> before the link and </b> after it. Your code will look like this:
<b><a href="http://www.urlhere.com">Text you want readers to click on</a></b>
The code will look like this in the text box:
It will look like this in the welcome message:
To add italics to your test, add <i> before the link and </i> after it. Your code will look like this:
<i><a href="http://www.urlhere.com">Text you want readers to click on</a></i>
The code will look like this in the text box:
It will look like this in the welcome message:
The welcome message can be used to say hello to your readers and guide them to learn more about you and your blog.
