Typepad 101: Responsive Instagram Widget for Responsive Designs

October 08, 2014

With more responsive designs being readied for release, we want to help you make the best use of your responsive design by pointing out widgets that help your sidebar content to be fluid as well. In this Typepad 101 article, we'll provide information on how to setup and add the Instagram widget Instansive.

Configure the Widget

Below is the general setup of the widget. The first option available to you is to choose whether you would like to pull in photos from your entire Instagram account, or if you would like to crowdsource Instagram images from a specific hashtag. Use a unique hashtag for certain photos in your account? Even better.

Responsive Instagram widget for your Responsive Design
Responsive Instagram widget for your Responsive Design

Additional options available for customizing the widget are:

  • Type of widget (select from: grid, seen above; slideshown; and columns)
  • number of columns and rows
  • fade in or out
  • preload the images to help with load time
  • show the caption from the shared image
  • remove photo padding so the images sit closer together in the widget

There are advanced options, which many won't need to use, but they allow you to choose a different widget setup depending on the size of the window/device in which the widget loads.

You can use the slider, positioned on the right side of the example, which allows you to adjust the widget size so that you can see what it will look like at different widths.

Get the Code

When you've configured the widget, you can click Preview to confirm it appears the way you would like it to display on your blog. If it's looking good, click the Get Code button and copy the code provided.

Responsive Instagram Widget
Copy the generated code

Add the Widget

With the code copied, log into your Typepad account and go to the Content screen at Design > Content. Click to add the Embed Your Own HTML module. You'll want to give it a name/label so you remember what it is when making future changes to the Content screen. Paste the code into the HTML portion of the configuration pop-up, then click OK and place the module where you would like to see it displayed before saving your changes.

If you would prefer the widget have a header above it, then you can use a Notes Typelist in place of the Embed Your Own HTML module.

When you're done, load your blog in your preferred browser, or on your mobile or tablet device, to see the widget in action.

Responsive Instagram widget
Instagram widget live on blog

Do you know of other services that have responsive-friendly widgets? Leave a comment to let us and others know!

Typepad 101: How To Sell Your Book On Your Blog

September 24, 2014

Flea-market-237460_640

It has been your dream to become a published author and the day finally came! You have a hard copy in your hands and it feels awesome!  Of course you want everyone to know, you announced it on your blog and include it your About Page but is that enough? No, it's never enough!

Did you know that you have a few options to sell your book right on your Typepad blog? It's true, and today we will explain how. 

Typepad blogger Emily Martin from The Black Apple writes children's books. In her sidebar she has thumbail images of each book linking to it's Amazon and Powell Book's listings.  You can do the same by adding a sidebar image and linking the image to your book listing online.  We have an Amazon plug­in you can easily insert into your sidebar too. If you have a special affiliate widget you would like to use, you can insert the widget the code by going to Design > Content > Embed Your Own HTML.

If you sell your book directly and you have a PayPal account, you can grab a "Buy Now" button widget from PayPal and also include it in your sidebar following the same embedded HTML instructions.

Finally, if you would like to share a little more information about your book(s) and a sidebar module just isn't enough, create a page dedicated to your books where you can include a link to purchase too.  You can add the link to your new page in your sidebar or Navigation Bar.

By following these simple steps, you will bring more exposure to your work, gain a new fanbase, and *fingers crossed* more writing opportunities.

Typepad 101: Managing Blog Designs

September 10, 2014

Over time, while working on your blog, you've probably noticed that at the bottom of the Design tab, there's a list of designs.  It will look something like this:

Design_list

This list is all of the designs that you've created for all of the blogs within your account.  But what does all of this mean?

You'll see a thumbnail for each design, giving you a quick idea of what the design looks like.  Next is the design's name.  If you created it using a different blog other than the one you're working on, you'll see "for" and then the name of the blog you created it for.  If there's an asterisk at the end of the name, that means it's applied to a blog within your account.  Finally, the orange CURRENT next to a blog means that this is the design that is currently being used on this blog.

Using the buttons next to each design, you can perform actions like customizing the design, applying it to a different blog, or even deleting it from your account completely.  You can read about all of these options in our Knowledge Base.

One of the things we get asked about a lot in support is why a design change applied on one blog also appears on another blog in the same account?  This is because blogs are shared across the entire account, allowing you to apply a design to more than one blog.  That means that if a design is applied to Blog A and Blog B, any changes you make will be applied to both blogs.

If you'd like to have similar, but not exactly the same designs for a blog (maybe you want different sidebar content, for instance), we would recommend that you instead duplicate the design and apply the duplicate to one blog.  Setting up a testing blog is a great way to test the duplicated design out before it's ready for prime time.

As always, we're here to help, so just let us know if you have any other questions!

Typepad 101: A Recap of Newness

July 30, 2014

In case you missed it, we over at Typepad have been hard at work introducing a ton of new things for you to play with. Let's take a look at all of the new goodies!

First up, we have the Post Carousel, which adds a slideshow of the latest posts to the top of your blog.

Postcarousel
Post Carousel: Working Hard on Your Blog

We didn't want to make your sidebars jealous, so we've also introduced the Sidebar Carousel as well. This is similar in concept, but highlights a specific category in your sidebar as opposed to all of your latest posts. Have more than one category you want to highlight? Add as many Sidebar Carousels as you like!

Continuing the fun with sidebars, we've got the Spotlight Posts widget as well as the Copyright and Introduction widgets.

The Spotlight Posts widget displays a list of posts from a category in your sidebar, even giving you the option to show the thumbnail for the first image in the post along with the post excerpt.

Spotlight_posts
Spotlight (on Dogs)!

The Copyright and Introduction widgets come pre-loaded with some text that we think is useful: the Copyright widget contains the HTML code for the copyright symbol and your blog's name and the Introduction widget contains a few sentences to give you some ideas. The text for both of these widgets can be edited as you like.

Finally, the new Signature Module is a great way to add signature images, sign-offs, advertisements, or anything else you want to have automatically inserted into the bottom of each post. Add it once and it's applied to all of your posts so that you don't have to copy and paste the same thing in each time.

Sigmod
Until Next Time: The Signature Module in Action

We've also made some changes to our Disqus comment integration and would love it if you'd give it a whirl on your blog. We're particularly interested in those blogs using domain mapping and would ask that you open a ticket or reply back so that we can take a look at your integration.

In addition to all of this, we also released a new responsive theme called Gourmet that comes in both Spicy and Sweet designs. We think you'll love both its responsive functionality - which allows it to look great on all types of browsers and devices - and its fantastic design.

Spicy
Gourmet: The Spicy Version

It's important to note that many of these features are for the Beta team only, so if there's something you want to try out but don't see, swing by the Account tab.  From there, check the Beta team option, save your changes, and you'll see all of this Typepad goodness at your fingertips!

Typepad 101: Adding Google Web Fonts

July 02, 2014

With a vast number fonts available for design, Typepad keeps it simple by offering the most common fonts available to all systems and devices.  Did you know, though, that the range of fonts available can grow exponentially with services like TypeKit, MyFonts.com and Google Web Fonts  If you're a Pro Unlimited (or higher) user, you can use our tip below to easily customize your blog with a custom font(s).

Today we will focus on using Google Web Fonts as it is free and easy to use. In this example, we're using the default text that comes with the Block Party theme. 

Before DMP

Choosing Your Font

Let's change the font as it appears in our blog posts to "Merriweather". In the font listing, click the "Quick-use" button:

Screen Shot 2014-06-19 at 4.29.25 PM

Scroll down to Step 3 and copy the code given in the Standard tab:

<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>

This code is added to the Head Module in Typepad under Design > Head.   Next, we add our new font to our Custom CSS at Design > Custom CSS:

body { font-family: 'Merriweather', serif; }

Blog posts now have a new font!

After DMP

We also share these instructions in our Knowledge Base.

Blog Element Font Changes

Want to use a different type of font for other parts of your blog like Post Title or your Sidebar?  Follow the same steps starting with adding the Standard code to the Head Module (you can have more than one saved in this field), then include your new CSS additions.  For example, if you want the post title font to match your blog post, include this to Design > Custom CSS:

.entry-header,  .entry-header a { font-family: 'Merriweather', serif; }

If you can't find a font you like on Google Web Fonts, there are other sites like MyFonts.com and Fonts.com that offer a large selection of fonts for a fee. You must use their Webfont option in order to add the fonts directly to your blog, otherwise you're just downloading fonts to your device.

One Last Tip...

Now that you're able to add some font customizations, let us offer a word of caution: keep it simple.   Too many font types, styles, or sizes can make your blog look busy and distract readers from the content. Consider the style/type of fonts you like and how best to pair and use them. For example, a handwritten font looks best as titles and headers but may be difficult to read as the body of your posts and modules. We recommend looking for great pairing ideas online in places such as Pinterest or Google.

Have you added some custom fonts to your blog? Leave us a link in the comments so we can all check it out!

Typepad Master Class: Layering Header Text Over an Image

June 18, 2014

layering header text over an image

In this Master Class we're offering a tip for making a header and related image work together. This can be used across multiple types of blogs, and multiple types of content. Think giveaways, fashion, photography--you name it, we're sure this tip can be used in some way to grab a reader's attention.

Headers are used to do just that--grab attention. In blogging, images are often used to the same end (e.g. to break sections of text up with a relevant image, to showcase an item(s), to just look pretty--the list could go on). Our class today blends the two together, with the goal to keep it simple, keep it effective, and keep it attractive (SEA; look at us making up cool acronyms!).

Continue reading "Typepad Master Class: Layering Header Text Over an Image" »

Typepad 101: A few words about following

June 05, 2014

We recently reintroduced you to your Typepad Profile, where we covered all the things you can do to customize your profile and make it your own. Now that you've had time to get to know your profile, we'd like to talk to you about the little green button you can see on the left here - the Follow button.

image from everything.typepad.com

Something we hear from our bloggers from time to time is that you want to find other Typepad blogs to read, but you're not sure exactly how. We want to make it easier for you to discover great blogs, keep tabs on your favorite bloggers, and to help you engage more easily (like with quick comment replies) with your readers, so we're here today to talk about Following people via the Typepad Profile. Once you've pressed that little button on a fellow Typepad blogger's profile and followed them, you'll start to see their activity right in your Dashboard.

Your Dashboard helps you to know when someone you're following comments, follows another Typepad blogger, or adds a post to their Typepad blog. You'll also get a little alert when other Typepad bloggers follow you!

Profile

Best of all, it’s fun! Being able to track what your most pithy and interesting commenters say and do is a great way to get inspired to be an even better blogger.

"So, how do I find people to follow?"

For a strong start, check out the Typepad Showcase! It's full of blogs on every subject from parenting to lifestyle to design to tech, and features some of the best bloggers on Typepad.

Once you start following a few people, you can follow the people they're following, or you can also follow the people who've commented on your blog with Typepad Connect.

Using your Typepad Profile and Dashboard is a simple, easy, and effective way to find great new blogs to follow, keep tabs on your favorite Typepad bloggers, and build your community at the same time!

Not so sure you want that content on your Dashboard after all? We've got the skinny on how to unfollow and remove recent activity from other bloggers right here.

Typepad 101: Don't Forget Your Typepad Profile!

May 28, 2014

You may or may not know it, but your Typepad account comes with a free Typepad profile.  You can check out the Typepad Team's profile here.

Et_profile

So, what should you do with your own profile?

To start with, giving your profile a unique URL that reflects your name or brand is a great way to personalize it.  Right now, when you view your profile, the URL might have a long string of numbers. Not ideal, right?

To change this, start by going to the Edit Profile page inside your account. There, look for the "Profile URL" section and replace the existing URL with the one you want to use. Then just scroll all the way down to the bottom of the page to save your changes. That's it!

One of the most important features of your Profile is that it allows you to share your blog activity and links to your social media accounts such as Facebook and Twitter. Adding those sites to your Profile is extremely easy.

To share your blogs, just go to the Edit Profile page and look under Your Blogs. There, select the blogs from your account that you'd like to show. Activity from the selected blogs will show on your followers' Dashboards and in your Recent Activity stream on your Profile.

The URL you use for your Homepage URL will be the site that's linked with your name when you comment on TypePad blogs. This should be your main blog or the site you want to promote the most.

To share your social media accounts, click on Add an account to go to the Other Accounts page. You'll use the "Add an account" menu to add links to Facebook, Twitter, etc. We have full details about the Other Accounts page in our Knowledge Base.

You can also make other changes on the Edit Profile page to personalize it.  This includes your display name, your bio, your location, and more. You can also upload your own picture to be used as your profile image. After you select the image, make sure to scroll to the bottom to save your changes.

Now that you've got your profile more to your liking, you can add it to your blog's sidebar.  Go to Design > Content, look for the "About You" category, select the "Follow Me" option, and click the "Add this module" button.  You can then choose to display the following and followers count if you like.  Save your changes and your readers can now easily view your profile.

You can read more about your Typepad profile and how to edit it in our helpful Knowledge Base.

Typepad Master Class: Customize the Look of Auto-Generated Excerpts

May 14, 2014

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy.

We've released a lot of new features to Typepad in 2014, and one of our favorites is the ability to automatically display post experts on index pages with a thumbnail image.

With Custom CSS, you can customize the look of the excerpts. If you don't already have the Custom CSS feature, you can upgrade to Unlimited at Account > Billing Info > Upgrade anytime.

If you want to learn the basics of CSS, check out the latest series of posts on Getting to Know CSS: part 1, part 2, and part 3.

The auto-generated excerpts can be enabled at Settings > Posts. Learn more. All CSS code included in the tips below can be added below any other code you have added at Design > Custom CSS.

Let's get started!

Add Border to Thumbnail Image

A border can be added to the thumbnail image with a quick line of CSS:

body.index .entry-body a img {
     border: 2px solid #000000;
}

If you want to add a frame around the image, insert some padding:

body.index .entry-body a img {
     border: 2px solid #000000;
     padding: 2px;
}

The screenshot below shows you how the above CSS impacts the thumbnail image.

Thumbnail Image with Border

The elements you can change for the border are the width (2px), style (solid, dashed, dotted), and color (#000000). For additional options, see the w3schools article on borders and color code generator.

Style the "Read more" Link

Just like with other text in your blog's design, you can change the style of the "Read more" link. Below is an example of changes you can make to the style:

.excerpt-more-link {
     font-family: Georgia, serif;
     font-size: 14px;
     font-weight: bold;
     padding-left: 5px; /* space btwn excerpt and link */
     text-transform: capitalize;
}

Additionally, you can change how the link appears when you hover over it. The below code changes the color and adds an underline when you move your mouse over the link:

.excerpt-more-link a:hover {
     color: #6E6E6E;
     text-decoration: underline;
}

Force the "Read more" Link to a New Line

If you do not want the "Read more" link to float with the excerpt text, you can easily force the link to start on a new line with the CSS:

.excerpt-more-link {
     display: inline-block;
}

Change "Read more" Text a bit

Although the "Read more" link is hard coded into the template, you can add some text before "Read more" to make it your own. Some ideas: Click here to read more, You know you want to read more, Please read more.

Here's the CSS to make these changes:

.excerpt-more-link a:before {
     content: "Click here to " ! important;
}

You'll want to make sure to add a space before the last " to separate the last word from the "Read more" text. Additionally, you may want to transform the text to be all caps, all lower case, or first letter of each word capitalized.

.excerpt-more-link a:before {
     content: "You know you want to " ! important;
     text-transform: capitalize; /* or uppercase or lowercase */
}

By implementing many of the above elements, the resulting update to the excerpts is:

Customized Excerpts

Here's the CSS used to achieve the above result:

.excerpt-more-link {
     font-family: Georgia, serif;
     font-weight: bold;
     text-transform: capitalize;
     display: inline-block;
}

.excerpt-more-link a:before {
     content: "Click here to " ! important;
}

.excerpt-more-link a {
     color: #000000;
}

.excerpt-more-link a:hover {
     color: #6E6E6E;
     text-decoration: underline;
}

body.index .entry-body a img {
     border: 2px solid #000000;
     padding: 2px;
}

Are you using the Auto-Generated Excerpts feature? If so, what changes are looking to make to the look of the excerpts? Let us know in the comments!

Typepad Master Class: Spice Up Your Own Comments

April 16, 2014

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Unlimited or higher plan is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.

All comments submitted to your posts will use the same style by default. However, you can use a little CSS to make your own comments stand out. Readers of your blog will then see which comments were submitted by the author of the post at a quick glance.

When you sign in to comment on your own blog, your comment will have the .comment-by-owner class applied to it, and we can use this class to make changes to the formatting.

You are currently signed inFor the specific styling to be applied to your comments, you'll need to make sure you see the You are currently signed in as... note above the comment form. (See screenshot.) If you don't see the note, click the Sign in with Typepad link and follow the prompts to confirm you are signed in to your account.

In this Master Class, we'll provide you with the CSS to make the following changes to comments submitted by the post's author:

All CSS can be added at Design > Custom CSS. If you don't see the Custom CSS option, you can upgrade to the Unlimited plan. Learn more.

Continue reading "Typepad Master Class: Spice Up Your Own Comments" »

Welcome

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.