Google Web Fonts: Using Custom Fonts in TypePad

Check this out!

Click here to view the tutorial on how to use Google Web Fonts with your TypePad blog.  You do need to be at the Pro or Unlimited level ($14.95 a month or up) so you can customize the CSS code.

So yes, this method requires customizing CSS code, but this tutorial is really good in illustrating what needs to be done!  

Give it a try!

You can also you TypeKit! Click here to read more on using TypeKit to customize the fonts in your TypePad blog.

Don't worry, Blogger and WordPress users an customize their fonts too!!!! Visit:

• Google Web Fonts
• TypeKit
• Kevin and Amanda

Blog Cleanse: 3 "Must-do" House Cleaning Tips for a More Productive 2012

Let's face it, we all need to "clean up" and reorganize our blogs from time to time. And in doing so you will become more productive and improve your site's functionality and ease of use at the same time! This is not a bad thing, it is a good thing.

Become more focused and neat ===>
more productive and successful.

I am going through these house cleaning tips myself, so you will see some restructuring of my site over the next month..just a heads up :D

1. FOCUS AND REDIRECT

What is your most profitable service? Or What are your hottest topics?

Focus on those services that are most profitable or most popular amongst your customers and followers, and weed out those that are not, are too time consuming. Not that you can't offer them if someone asks, but don't promote them. Find those that are desired, most popular and profitable.

If you don't offer services but instead write on a bunch of topics, find those that are most popular. Listen to your customers and followers...what are they asking? Those are the ones your customers want and want to learn more about. That's where your time and effort should be directed to keep your popularity and continue to draw their interest.

2. BE AN EXPERT

Choose one or two services that you rock! Where you are superior in that field or service. Promote those services heavily.  

If writing about topics, offer expert advice or your personal experience or expertise on what you know best. Your readers will appreciate that and come to you as their "go to" person on that topic(s).

3. REORGANIZE YOUR BLOG.

Let's do some more house cleaning here. Clean up your sidebars and remove ads that are no long relevant, those promotions that have expired or are not profitable. 

Clean up your categories. Combine similar categories. Yes, this may mean that you need to go through some of your posts and assign a new category to them...but try cleaning up your list and make less categories.  If it is essential you have a long list, then create drop-down boxes for them. This will help users find what they need quickly.

Further clean up your sidebars by creating pages and using a dropdown navigation bar (menu bar).  I am in the process of doing this myself :D

 

In following these three blog cleansing, house cleaning tips you should be more driven to work, more focused, more productive, and hopefully therefore more successful.  Here's to a bright and successful 2012! Cheers! Get ready now...it will be here before you know it!

Heather :D
www.BlogsByHeather.com
Reorganize and clean up your blog, if not now, make it a New Year's resolution! 

 

Q&A: How do you change "Comments" to read "Testimonials"

Bloggers welcome comments and I'm sure as a blogger you leave comments on other blogs. Typically, you find the word "Comments" in the post footer area and click on it to then enter a comment form area.  In Typepad, in the Post Footer area you see "Comments(29)" for example; which means 29 people have commented on that given post.  So, can you change that word "Comments" to "Testimonials"?

NOTE: Although this is a TypePad question, in the resolution area of this post I will also discuss Blogger and WordPress solutions as well.

Question: 

Hi! In the comment link of a typepad blog, I would like to change the word 'comment' to 'testimonies'. Is that something you can do?

Answer: 

In TypePad:

If you go to Settings and then Comments you will find many settings regarding your comments, such as setting comment moderation. However, there is no place to change the label for leaving comments.  The only way you would be able to do this is if you converted you blog to use Advanced Templates. Click here to learn more about Advanced Templates.  I normally do not recommend people convert to Advanced Templates unless there is an absolute, real need for something with high importance and/or specific functionality, as it is heavily based on writing HTML and CSS code.

In Blogger:

Go to your blog, then Design, then Page Elements.  And click Edit in the middle or wherever your Blog Posts section is. If you are using the new Blogger Dashboard, then go to your blog, then Layout and click the Edit for the Blog Posts area.

Then, you will see this screen where you can change the word "Comments" to "Testimonials" if you wanted.

In WordPress:

You would go to your Dashboard, then Settings, then Discussion.  In there, go to the bottom and you can modify the text "Leave a Reply" to "I would love your testimonial" for example.

Hope this helps!

Up next...more great blogging fun and how to use a free program like Paint.net to resize photos and create your own watermark!

Heather Wright-Porto
www.BlogsByHeather.com 

 

TypePad: How to Add/Remove a TypeList in your Blog's Design / Duplicating Your Blog Design

In a recent article, I described how to copy a design template in customizing your TypePad blog's About page. You can copy your design for a second blog, say for a new landing page, or for a team (downline), or simply starting a 2nd blog focused on a subset of your business and you want the same overall design.

In this mini-tutorial we will copy and apply a new design template, and then review how to add or remove typelists in Design.

PART 1: Copy the current design template

In this section you will make a copy of a design template.

1. Go to Design and at the bottom of the screen you will see a list of current designs for your blog and the "current" template is highlighted with the word "current".
2. To the right of that "current" template design, click on Actions, and then Duplicate.

   

3. It will then have the same name of the current template but with "Copy of" in front of it.
4. Under Actions for that new copy, click Rename, and then rename it as you would like, such as Theme for .

   

5. The duplication of the template design is now complete.
6. Onto Part 2.

PART 2: Apply the Design to a new, 2nd blog

In this section, you will now apply that new template to another blog.

1. If you haven't already, create a new blog that will be using the copied template.
2. Then go to that blog, go to Design.
3. Then, again, at the bottom of the screen you will see a list of all the templates. 
4. Find the template you just renamed in Part 1.
5. Then in Actions, click Apply and the design template will be applied to your blog.

PART 3 - Adding/Removing TypeLists in Design

In adding a new blog and applying a template, it by default includes all the typelists from the original template. However, you can customize or change that! You can add or remove typelists to this new template design.

1. To alter which typelists will show on your new blog, click Design and then Content.
2. There you will see a layout of your blog - what typelists are in the sidebar and where.
   
   
   
   
3. You can simply drag and drop these items, rearrange them however you'd like, and then click Save Changes.
4. However, if you want to remove one, click the "x" in the corner of the typelist you want to remove from the design, and it's remove from the template but REMAINS in your master typelist list (it is not deleted, it is simply removed from the blog's design). NOTE: Your master typelist list is found under the Library Menu and then choose Typelists.
5. Next, to add more typelists, go to the top area and under Categories, scroll and click on Your Typelists.
6. Then in the middle box, Modules, you will see the "master" list of all your Typelists (those currently shown in your template and those that are not). Find the typelist you want to add, select it.
7. Then, click Add This Module from the final box on the right (Details).
8. You will then see it added to your blog's design, typically at the bottom of one of the sidebars. Click on it and drag it to another, desired location and drop.
9. Continue adding (or removing) as many typelists as you like.
10. Click Save Changes when you're finished.

In the end, this new template and blog, has the same overall look (banner, background, footer) but you've modified which typelists show.  The original template remains intact and not affects as you modifed the "copy".

NOTE: You can now apply this template to any blog you have currently or any you may create in the future.  You can have one template applied to many blogs - there is NOT a one to one relation.

Related Articles

• Be careful when changing templates to existing blogs!
• Things that had changed in Everything TypePad.
• Adding a background.
• Adding a sidebar item not in a Typelist but in code.
• What size should your banner be?
• How to add a banner.

Happy Blogging!

Heather Wright-Porto
www.BlogsByHeather.com

How-To TypePad: Remember to customize your About Me Page Design

I recently did a blog setup for a fellow demonstrator, Cathy Parlitsis. She is actually one of my up-up-up-upline's in Stampin' Up! How cool is that to be working with her! She created her temporary blog banner in Stampin' Up!'s MDS (My Digital Studio) software and I set the colors in TypePad's Theme Builder to match.

The problem with all TypePad blogs is the About Page design. If you clicked on About under Cathy's name it used to go to a template she had originally chosen - it looked nothing like her revised, custom design. I'm sure yours probably doesn't either as not many actually check that page or assume that it will look like the rest of the blog - this is not the case!

Give it a try on your blog. Go to Design->Content and add the About Me Module Then save changes and view your blog. Click on the About sidebar heading…and what do you see????

Or click on Account from the top of your screen, then click on About Me Page on the left, and you will see a link to your About Me page. Click on that link to view yours!

For Cathy, I wanted it to match her new beautiful blog theme. However, the page width is smaller for the About me page, not as wide as the main blog.  

Custom About Page Theme in TypePad

So although you can write your own HTML for a custom About Page, there is an easy solution to create an About Page that coordinates with your Main blog's theme! Look at Cathy's below - her site is now polished and with her own MDS design!

What you need to do:

• ONCE you have the main blog's theme designed with the custom banner and theme (banner should be 870px wide if using a three column layout, 670px if using a two column design); then you go to Design.
• At the bottom, notice the design that is highlighted with CURRENT. 
• To the right of the design under Actions, click the dropdown and choose Duplicate.
  
  
  
  
• Then it will be Copy of (whatever you theme name was, normally the name of your blog).
• Click to Rename that template to About Page Theme Only (in my example, Cathy's blog, it is named a little differently but you get the idea). 
  
  
  
  
• If using a TWO column design, skip down to Continue.
• Then, to the right of that newly copied, renamed template under Actions, choose Apply.
  
   
• So at present you have two designs that are identical, but one is named About Page Theme Only.  
  • So at this point you need to resize the banner you have used in your main blog to be 670px wide (so it will fit in the About Me Page slimmer layout). 
  • Then come back to Design, Theme Builder, and in the Banner area at the top, click Image area and upload the newly sized banner. 
  • Save Changes.
• IMPORTANT STEP: Now go back to Design and find the original template name (not the About Me Page Only) and click Actions to Apply, which will then apply that design for the main blog (the one with the banner uploaded at 870px wide).

CONTINUE:

• Now, click on Account (text link) from the top of your screen.
• Click on About Me Page from the left.
• At the bottom, find Choose a Style. It's a dropdown box.
• Click that dropdown box and choose your About Page Theme Only from the list.
• Preview if you'd like or Save and Preview.
• You're done!

Now you have coordinating pages for your main blog and your About Me page, like the examples shown in the article compliments of Cathy Parlitsis.

Related Articles

• Install your own, custom banner in TypePad (except there is no Weblog in the dashboard, just go to Design and then Theme Builder).
• Tweaking the built-in Nav Bar.
• Centering the built-in Nav Bar (requires CSS, $14.95 Pro level).
• Entire list of How To Articles for TypePad!

Happy Blogging!

Heather Wright-Porto
www.BlogsByHeather.com 

Adding a Sign Up Box for MailChimp

In my last post, I referenced an article on how to add a sign up box for Constant Contact. Almost immediately I received emails on how to add this for MailChimp. MailChimp is a free email marketing/newsletter service, www.MailChimp.com.

I'd be happy to help, so today's tutorial is on how to add a sign up box for MailChimp to your blog's sidebar.

• Log in to MailChimp and click on Lists (link at the top).
• Then under the specific list you want to create a Sign Up Box for, click on Forms. For example, see this list "Blogs By Heather" and the red, text "Forms" link beneath it. By clicking that Forms link I am creating a "Sign Up Box" for this specific list (Blogs by Heather).

• Click on the Share It tab.
• Then click on the Create HTML code for small subscribe form button.

 

You then need to customize this form. Experiment with adjusting the settings such as I've done; set width to 180 so it will fit in your sidebar.

 

For TypePad Users:

1. Sign into TypePad first.
2. Then go back to MailChimp and 
3. Click the Install Widget on TypePad button
4. Then you will be brought back to Typepad to the Add a Sidebar Widget window where you will see your widget, Widget name (MailChimp Signup Form) which won't be seen. Click Add Widget.
5. You may then go to Organize Content to set a new location for the newly added widget.
6. Save Changes and you're done!

For Blogger Users:

1. In MailChimp, copy the code in the "Copy/Paste into your site" box.
2. Login to Blogger.
3. Go to Design.
4. Then Page Elements.
5. Click Add a Gadget.
6. Choose HTML/JavaScript.
7. title: Sign Up For My Newsletter.
8. Paste in the code from MailChimp into the large text box.
9. Save and you're done :D

You can then log off of MailChimp if you wish or continue processing your email newsletters!

Until next time,

Heather Wright-Porto
www.BlogsByHeather.com 

 

 

 

Have a question? Go to my Ask a Question page. I use those question to compose new tutorials in addition to my new Blogs By Heather Q&A posts.

New Blog Designs - Sandi MacIver and Shelagh Freemantle

My friend and fellow Stampin' Up! demonstrator Sandi Maciver, and one of her dearest friends and downline, Shelagh Freemantle, recently had new blog designs installed. Both of them use Typepad and are at the Pro level so a custom background could be installed.

Sandi's blog was originally designed by my head designer, Michelle Laycock, and she loves the coloring. She wanted to keep the banner but "lighten" the rest of the blog. I used the swirls from her banner and created a more simplistic but complementary background with them; additionally I used the same swirls in her new sidebar headers and animated buttons. Click here to view her blog and new blog layout!

Shelagh is a pieces and loves the shore, sea shells and sand dollars. I created the sandy beach look rather easily but how to incorporate her favorite color purple???? The gradient fit perfectly with her design and ocean theme. Click here to view Shelagh's new blog design!

Sandi and Shelagh are both Stampin' Up! demonstrators and both subscribed to my blog maintenance program.

NOT a Stampin' Up! Demonstrator? That's OK!

I have help many businesses in and out of the crafting field. Currently I working on revamping a doctor's site!

I woud be more than happy to help you with a new blog design or assist in setting up your new blog or blog store! Just email me at blogsbyheather@att.net or heather@blogsbyheather.com!

Happy blogging!

Heather Wright-Porto
www.BlogsByHeather.com 

Keep It Simple - Ways to Improve Your Blog's Speed

I'm so excited. I recently wrote a few articles on this topic, and it is discussed in both my books (check them out here on Amazon) under "Blog Layout & Design", TypePad has just posted another one as well. Although it's posted on the TypePad blog, you can use these tips for whatever platform you use!

This article (by Typepad) also has great links to other related articles, such as Recommended Widgets - many of which have tutorials on my site!!!! If you can't find it, let me know and I'll direct you or use the Google Search box on the left side.

TypePad's Keep It Simple Tips (this is an excerpt from their full article):

• Use a two column right or three column right layout. By placing the sidebars to the right of the main content column, your new posts will load quickly and be the first thing visitors to your site see.
• Keep widgets to a minimum. Widgets are cool but take more time to load on your site. Only use widgets which you feel enhance the content of your blog and place the widgets in the far right column. See our list of recommended widgets.
• Add a page break to longer posts. The split extended entry feature allows you to break up your content and display an introduction followed by a Continue reading…link to view the full post. Place images and videos below the fold for quicker loading of your front page.
• Insert image thumbnails. Large images take longer to load, but you can insert smaller thumbnail images in your posts which link to the full size image in a pop-up window. Also check out the thumbnail gallery feature available in beta.
• Reduce the number of posts displaying per page. At Settings > Posts, you can limit the number of posts displaying on the front page of your blog.

Need help reorganizing your blog, read my Reorganize Your Blog SERIES or contact me for a Blog Clean-up (new service)!

Related Articles

• Reorganize your blog - where to put things in your blog and why.
• How fast does your blog load?
• My book, Beginning Google Blogger.
• My book, Creative Blogging.

Happy Blogging!

Heather Wright-Porto
www.BlogsByHeather.com 

TypePad: Coding so a new post signature will appear on every post

In Blogger this is very easy to setup in Settings, then Formatting, go to Post Template (click for tutorial). However, in TypePad this can be done as well but you need the $14.95 level as it requires CSS coding.

Setting up your signature to automatically appear on every post in TypePad

First you need to upload the image of your signature to your TypePad file manager:

• Go to the Library Menu at the top.
• Then click File Manager.
• Click the Browse button to locate the signature file on your computer.
• Then select it and choose OK/Select.
• Then click Upload.
• Once uploaded you need to right-click and then Copy Shortcut or Copy Link Location to save a copy of the URL address to memory (your clipboard).
• Then you need to replace it where the background: url address is highlighted below.
• Then you need to also change the height, highlighted below, to match the height of your image.
• Next go to your Blog.
• Then click Design.
• Click Content CSS.
• Then copy and paste the code below (again replacing the highlighted areas).
• Then Save.
• The post signature will now appear on EVERY post and every new post automatically!
• HOWEVER, an important note is that if you already manually entered a type of signature in your existing posts, then two signatures will appear. There is nothing you can do about this other than to continue manually entering your signatures and not to use this method describe in this post.

 

Sample CSS Code:

.entry-footer
{background:url(http://<your-typepad-name>.typepad.com/
<your-siggy-image>.PNG/JPG/GIF);
background-repeat: no-repeat;
margin: 10px 0px 10px 0px;
padding: 106px 0px 0px 0px; 
}

 

Important Note:

Please note that the first segment in the padding property needs to be the height of your signature file reference in the background property.

A sample of the background URL may be http://heatherporto.typepad.com/signature.png.

 

Related Articles:

• Setup automatic post signature to appear in Blogger.
• Adding a signature in Blogger and Typepad.
• Adding your signature to a TypePad post.

 

Happy Blogging!

Heather Wright-Porto
www.BlogsByHeather.com 

Blogs By Heather Weekly Q&A

As promised, here is the Blogs By Heather Weekly Q&A. Every week to recap all the questions and answers as I feel many would benefit from the answers and appreciate the questions.

 

Discussion This Week: 

1. Creating a Notes Typelist in TypePad 
2. How to change the font size and color in the sidebar (TypePad)
3. How to create a printer friendly blog
4. Creating a dropdown menu

Creating a Notes Typelist in TypePad

A customer of mine is working on her sidebars and wanted to know how to be able to insert an image in the sidebar as well as have text underneath it.  I asked if she was using a Notes Typelist for that is what she would need.  So if she was not, to delete the old typelist and create a new one.  Then shared these instructions on how to setup the sidebar item with the image and text.

• First, go to your Typelists (under the Library Menu) and then Create New Typelist.
• Make sure to choose Notes as the Type, and then give it a Name (this will appear as as a title in your sidebar).

Then upload a picture of your item to your file manager (the File Manager is also listed under the Library menu).

• Then right-click and get the URL of that image (meaning Copy Link or Copy shortcut – that is the image's path).

Then you need to go to your new Typelist and in the NOTES are you will use this:

<img src="path to your image">

such as

<img src="http://www.astampabove.com/kits-available.jpg">

Then if you want to link that to a page on your blog….Create the page on you rblog and get the URL to that page.  Then modify this code to be like this:

<a href="URL to page on blog"><img src="path to image"></a>

Then if you want text under it as well, no problem:

<a href="URL to page on blog"><img src="path to image"></a><BR>Click here to view all my available kits for sale!

And if you want it centered…..
<center><a href="URL to page on blog"><img src="path to image"></a></center>

Remember to click SAVE to save your changes. And if you are using a new Typelist, you need to click PUBLISH as well:

• Then check off your blog and click Save Changes. 
• Next, click Organize Content, 
• Then Content until you end up in the layout of your blog where you see the newly added item listed at the bottom of your sidebar.  
• Drag and drop where you want it to be and then save changes.

Related articles

• Creating a sidebar item to link to existing post (using Notes Typelist).
• Creating a sidebar w/o having to use a TypeList!

 

Change the font and size

Again, this is a TypePad question about how to change the size and font of the sidebar titles.

• Go to Design, then Theme Builder.
• Go to Sidebar settings (at the bottom).
• And change the size and font of the Sidebar Title if you'd like.
• Save changes.

 

How to create a Printer Friendly post

I loved this question and wanted to experiment with it.  TypePad and WordPress.com already have it covered and your post area is printed only (no sidebars); however this is not the case with Blogger or privately hosted WordPress blogs…so here is the article on that.

 

Creating a Dropdown Menu (NavBar)

I had a customer post a question to me if it is possible to have a dropdown in Blogger. I said "Yes", and its the same code I use for TypePad blogs.  WordPress has a built-in ability to create a menu-like system when you create pages - you can set it to be a sub-page and create a hierarchy that way. Anyway….

Here is the code I use, but of course have modified it for my clients…but it's a starting point.  You will soon see a new Dropdown menu on this blog as part of my Reorganizing Your Blog series!

I also offer this as a service from $25-$40 depending on the complexity. If you are interested or need a dropdown menu for your blog:

 

Until next week….

Happy Blogging!

Heather Wright-Porto
www.BlogsByHeather.com