Typepad 101: Uploading Images to Your Sidebar

May 27, 2015

As a blogger, you love to share your passions with your readers.  One of the best - and easiest ways - to do that is to upload images to your blog.

You probably know how to add an image to a post (click that little icon with a picture of a mountain), but you might not know how to add an image to your sidebar.  It's a great way to have an image that's always there that you'd like your readers to see.  It can be of you, your family, your pet, a book you wrote - anything.

It's easy to do, so let's get to it! First, go to Design > Content and look for the Widgets category.  Find the "Add a Sidebar Image" option and click the "Add this module" button. Click the Upload Image button to open the Insert Image window. Click Browse or Choose File, locate the image on your computer, and click Open. Finally, click Insert Image.

image from help-orig.typepad.com

Once you've done this, you'll have several options that you can use to enhance your photo.  You can give it a caption to be displayed along with the image.  You can even link the image to a new URL or open the original image in a pop-up window.  It's so simple and a great way to make a big impact on your blog.

image from everything.typepad.com

As always, our Knowledge Base has additional information on this and many other topics.

As a special bonus tip, don't forget that you can set up your Instagram photos to automatically display in your sidebar too!

Have any questions or need help with something?  A member of our support team is ready to help you!

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

May 20, 2015

Getting to Know Nimble: Tips & Tricks to Make Our New Design Lab Work for You

Welcome to Getting to Know Nimble, a special series full of tips and tricks to make our new Design Lab work for you. In this series, we'll take a look at everything the Nimble Design Lab has to offer, what it can do, and how you can utilize its features to make your blog stand out. Check out the rest of the posts in this series here!

We start the series with one of our favorite new features exclusive to Nimble - the Highlight Bar. We often receive requests from Typepad bloggers asking how they can make the front page of their blog look a bit more like a magazine, where the front page posts put your photos front and center, and there is an excerpt of each post with a link to read more.

You can set this up manually as you compose each new post, but why go to all that work? Instead, start by heading on over to Settings > Posts and scroll down to the bottom. Here you'll see a section called Auto-Generated Excerpts. Put a check in the box labeled "Display excerpts instead of full posts on index and archive pages". A new check-box will appear when you do this, which says "Show featured image with excerpt". Make sure that this is checked as well.

Auto-Generated Excerpts

Now go on to Design > Style. You'll immediately see that the Live Preview has updated to show an example featured image with excerpt below and that there is a band across the image with the post title and post date. This is the Highlight Bar. If you like how it looks, you don't need to make any further changes, just start posting to your blog and adding photos to your posts and Typepad will do the rest.

Maybe you'd like to make the Highlight Bar a different color, or move it to a different position on the image, however. To do this, click on "Posts" in the menu to the right of the live preview.

Posts menu

This will open a section where you can modify the style of your posts. At the bottom of this section is the configuration area for the Highlight Bar.

Highlight Bar section

Click on the colored rectangle to open a small window where you can chose a new background color for the Highlight Bar.

Color picker

Keep in mind that the highlight bar will be slightly transparent so that the image can be seen through it. The text color for the post title and post date can be set above, along with the font and the size. You can also choose whether the Highlight Bar should appear across the middle of the post (this is the default) or across the top or bottom.

As you make each change, the Live Preview will update to show you how it will look. (Isn't the Live Preview the coolest feature ever? We're still geeking out over it ourselves!) Once you're satisfied with how you've styled the Highlight Bar, click "Save Changes" below the Live Preview to save your style. You can then check it out on the published blog by clicking "View Blog" in the top right corner of the page.

Highlight Bar

If you're on the Pro Unlimited plan or above, and if you're comfortable with coding CSS, you can customize the Highlight Bar further using the Custom CSS feature, such as by adding a border around the Highlight Bar or the featured image. To add a thick, solid, black border around the Highlight Bar, for instance, use the following code:

.overlay-text { border: 5px solid #000000; }

Our Knowledge Base article on CSS borders has more information on the different border styles you can use, if you'd like to learn more.

Want to see how the Highlight Bar looks on a real blog? Check out Swoonish:


Are you using the Highlight Bar on your Nimble blog? What tips and tricks do you recommend for bloggers who would like to add it? Tell us in the comments below!

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.