Featured Blog: Social Embers

Social Embers

Social Embers is about death and technology. We all leave a digital footprint and Social Embers help to navigate what to do with that digital footprint once a loved one has passed.  Many people in the US and the UK now use social media to communicate. When someone passes it may be hard to go through their physical property; Social Embers provides information to sort through their digital property.  Digital bereavement will be more and more important as those that have grown up in the digital age start to get older and pass. Learn more about what to do to preserve your digital memories for your loved ones from Social Embers.

Follow: Typepad | Facebook | Twitter | Instagram

Would you like your blog featured on Everything Typepad?


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:


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.

Featured Blog: Kitchen Encounters

Beefy, Cheesy, Fully-Loaded Mexican Tortilla Pizza
From her blog post: Beefy, Cheesy, Fully-Loaded Mexican Tortilla Pizza

This is a caution... Reading Kitchen Encounters will cause you to gain 10lbs. Melanie‚Äôs Kitchen is a professional cooking resource operated by Melanie Preschutti, a self-taught chef, experienced cooking consultant, recipe developer, instructor, on-air cooking host/personality and food writer/blogger ... she was actually born a foodie. Melanie is also a member of the IACP (International Association of Culinary Professionals) at the Professional level. Her recipes not only look amazing, but are easy to follow! With over 700 recipes you will find the perfect one to try tonight! 

Follow: Typepad | Facebook

Would you like your blog featured on Everything Typepad?


New to Beta: A Brand New Image Gallery

We here at Typepad love taking pictures and showing them off to friends and family, so we know that you must love it too!

To make showing your images off a better experience, we've completely updated the Image Gallery, a feature currently available to our Beta Team. This will allow you to put your best foot forward and make a great impression with your blog's photos.

An example Image Gallery.

To get started, you'll notice the following pop-up when you insert an image, select Edit, and then the Image Gallery option on the Compose Page:

The new Image Gallery image insert.

The first thing you want to do is choose your Thumbnail Size.  This will be the size of the image that is displayed on your blog.

Images added to your Image Gallery will be placed in a grid format (unless you check the Scroll Gallery box, but more on that in a minute), so you'll want to choose your Gallery Width.  This is how wide the Image Gallery will be when displayed on your blog.

Typepad will automatically offer only the number of image options that will fit on your blog's design, so no need to worry about images fitting the gallery.  For example, if you choose the 75 pixel thumbnail size, you'll be able to fit more images in a row than if you choose the 250 pixel thumbnail size, so there will be more choices for 75 pixels than 250 pixels.

You can check the first box to add a border around your Image Gallery.  If this remains unchecked, no border will be added.

Next, you can choose if you'd rather have one line of images for your Image Gallery instead of the grid format.  Checking Scroll Gallery will result in an Image Gallery that looks like this:

An example of a scrolling Image Gallery.

Your readers can then use the scroll bar to see more images in your Image Gallery.

We know that there are times you'll want to edit an Image Gallery to make changes like adding more images, deleting an image, or other adjustments.

To do this, simply click your cursor on an image in the Image Gallery and then click the Insert Image button again. When you do, you'll see the Image Gallery pop-up from earlier, containing the options you've chosen previously. You can pick different ones and save your changes. You can also insert additional new images at this time.

You'll notice one other new option when clicking on an image and clicking the Insert Image button.  When you do this, you can now add a title and an alt-image description for the image. The title will be displayed under the pop-up version of your image when your readers click on the thumbnail on your blog.  The alt image description will only be seen if the images do not load.

The new image options when editing your Image Gallery.

Double clicking the image will open up the familiar Aviary image editor to make changes to the image's rotation, filter, and more.

Another way you can edit your Image Gallery is by dragging and dropping the images into a new order within the Image Gallery itself.

To do this, click once on the image you want to move within the gallery. You'll see a grey bar appear underneath the image once it's been selected and clicked on. Use this bar to grab the image and move it to its new location.

The grey bar indicates the image has been selected.

When your readers click an image to view within your Image Gallery, this is what they'll see:

An example of an Image Gallery pop-up.

To move to the next or previous image, readers can click the arrow to the sides of the image or the left and right arrow keys on their keyboard. When they reach the final image, they'll be taken back to the first one.

If you'd like to display different colors for the arrow background and/or arrow itself, our Pro Unlimited subscribers can use the Custom CSS feature to do so.  Our Knowledge Base article has example code you can edit and use on your own blog. You can upgrade your plan at any time to begin using Custom CSS.

For more information on the Image Gallery itself, please read our Knowledge Base article.

And there you have it! We love our image gallery makeover and we're sure you will too! Since this is a Beta Team feature, if you want to see it right now, you'll need to join our Beta Team. That will give you immediate access to this and other Beta Team features.

For our non-Beta users, we'll be releasing it soon, but we urge you to give Beta a try in the meantime.

What do you think of its changes?  Are there any features you'd wish we had included or done differently? We also want to see your Image Galleries, so please leave links in the comments so that both us and your fellow Typepad community can take a look!

Have any questions, want to give us some feedback, or need more help? As always, the Typepad Support team is here for you!

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.

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?