Wednesday, February 22, 2012

How to Add the Goodreads Widget to Blogger

If you love reading as much as I do, then keeping track and sharing your reading list on Goodreads.com is a must! A great place to add your widget is to your Blogger layout.

If you haven't experienced Goodreads yet - just think of it as a social networking sites for avid readers (like myself) who want to share and rate what they've read. I find it personally much more enjoyable than Amazon reviews.

Anyway, since you landed here I assume you're trying to add the Goodreads widget to your Blogger blog. Let's look at how to do this.

Add a Blogger Html Gadget


Once you're logged into Blogger, go down and select your 'Layout' menu. It should look something like this depending on what layout you chose (posts on the left or right). Select 'Add a Gadget':

Blogger HTML Gadget

You should the standard Blogger Gadget list. Scroll down and find the HTML/Javascript Gadget - select it by pressing the blue plus sign:



At this point we'll just be creating a placeholder for the Goodreads widget on the sidebar. Enter a title suitable for you (I used 'Recent Books I've Read' as mine) and enter some placeholder text in the Content box (this is where the widget will go later). Go ahead and hit Save to set the new widget:


The placeholder widget will now be in your layout template. Leave Blogger open for now and start another browser session or new tab in your current web browswer. You're now ready to go get the widget code from Goodreads.com.

Getting the Goodreads Widget Code


The next step is to log into Goodreads.com (which I'll assume you know how to do at this point). All of the Goodreads widget code is located in your Goodreads profile located in the upper right hand of the main menu screen. Drop down your profile and select the 'edit profile' menu option:


You'll now see all of your account infomation including eight tabs near the top. Select the 'widgets' tab:


You'll now be looking at all of the various widget options for your blog (about 9 different ones). I prefer either the 'Custom Widget' which you can modify to suit the style of your own Blogger blog:

Goodreads Blogger Widget


Or, another favorite widget of mine is the 'My Books Widget' which has less customization but a smaller footprint. Once you've picked the widget of choice simply copy the HTML code in the code box just to the lower right of the widget display sample:

Once you've copied the code switch back to your Blogger dashboard and open or 'Edit' your placeholder HTML/Javascript widget you just added in the first steps above:



Once the dialog is open, be sure that the menu item just above the content section says 'Rich Text' and not 'Edit HTML'. If you press the 'Rich Text' link you'll be in Rich text mode. You need to be in HTML mode - it's a bit confusing - just make sure it says 'Rich Text':


Go ahead and paste your Goodreads widget code directly into the 'Content' window and then press 'Save'. If all goes well you shouldn't see any errors. If you do make a mistake just go back to Goodreads and copy the code again.



Once you've saved the code successfully, you're finished! Go ahead and view your blog to see how the widget looks. You can always go back and modify the widget if you don't like it (like I did with the title on my sidebar.)



Many code widgets work the same way in Blogger. You should be able to follow these steps for other social site sidebar widgets

Posted By my pwiki6:45 PM

Tuesday, February 14, 2012

How to Customize the Blogger Page Title

It's an unfortunate fact that Blogger's html page titles for posts, pages, archives and even the main page are not very SEO friendly.

Blogger Page Title CustomizationNow, Matt Cutts from Google would probably dismiss this a bit since he stresses that page titles are just a small part of your overall optimization strategy.

That said, I just have to make my Blogger blogs optimized top to bottom - it is just the way I work. In the future I'll talk more about SEO strategies.

How Blogger Post Titles Work


As you've probably noticed, Blogger by default likes to prefix all pages with your blog's main title. For example, in my case the main title is 'Blogger Tips Pro'. When I first created this site, Blogger did the following with my default post titles (If you peeked at my current page titles you'll see that they don't follow this pattern.):
  1. Main Page Title - 'Blogger Tips Pro'
  2. Post Title - 'Blogger Tips Pro: My Post Title'
  3. Page Title - 'Blogger Tips Pro: My Page Title'
  4. Search Title - 'Blogger Tips Pro: << link to search >>'
  5. Archive Title - 'Blogger Tips Pro: Feb 2012'
If you dig a bit into the top of your blog's template by pressing the 'Edit HTML' button (I'm assuming Blogger's newer templates) you'll see the following template code about 12 lines down:












<title><data:blog.pageTitle/></title>

This is the specific template code to display the html page title. In Google's Layout data tags definition, 'data:blog.pageTitle' means the following:

"The title of the current page. This is often the blog title, but may contain additional information on archive or post pages."

As you can see above, that 'additional information' is how they append the page and blog titles together.

How to Change Blogger Post Titles


The first step in altering your page titles is to first layout the title patterns you wish to use. Do you want a tag line on the main page title? Do you want your post titles appended with your blog title, or just stand alone? Do you want your archive pages to display something different?

I'll walk you through how I modified this site. First, let's look at how you conditionally pick a title. This requires using some simple template logic:

<b:if cond=(some condition)>
</b:if>


This is how Blogger templates allow an if condition - such as 'if the page type is archive, then do something'.

Now let's customize the full condition to set Post page html titles equal to their Post title and the main page title to the default Blogger blog title (this check uses the pageType variable which can have the values 'item', 'archive', 'static_page' or 'index'):

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <title><data:blog.pageTitle/></title>
<b:else/>
  <title><data:blog.pageName/></title>
</b:if>


This code is stating 'if my page type is NOT an item (which means, a blog Post), then use the default Blogger site title, otherwise use the page name'. Using this blog as the example, if I replace the single title line with these 5 lines - the following titles would now appear:
  1. Main Page Title - 'Blogger Tips Pro'
  2. Post Title - 'My Post Title'
  3. Page Title - 'Blogger Tips Pro: My Page Title'
  4. Search Title - 'Blogger Tips Pro: << link to search >>'
  5. Archive Title - 'Blogger Tips Pro: Feb 2012'
In this case only the Post titles change and no longer have the 'Blogger Tips Pro' in the prefix. This is a great change if you want your Post titles to be just your keyword rich titles for the search engines without the Blog name added.

But, what if you want your Archive or Page titles to have unique names too?  Now you can see where I'm going - in the next set of code we're looking to see first if we're on the main index page. If not, we then check to see if we're on an archive page. If not an index or archive, we then set the page title to just the page name:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <title><data:blog.pageTitle/></title>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <title><data:blog.pageTitle/></title>
    <b:else/>
      <title><data:blog.pageName/></title>
  </b:if>
</b:if>


Now our page titles look like this:
  1. Main Page Title - 'Blogger Tips Pro'
  2. Post Title - 'My Post Title'
  3. Page Title - 'My Page Title'
  4. Search Title - 'Blogger Tips Pro: << link to search >>'
  5. Archive Title - 'Blogger Tips Pro: Feb 2012'
Finally, you can add some additional text to enhance your title page, or reverse the Blogger default by placing the blog title at the end of your page names:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <title><data:blog.pageTitle/> - Powerful Strategies for Google Blogger</title>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <title><data:blog.pageName/></title>
  <b:else/>
    <title><data:blog.pageName/> - <data:blog.title/></title>
  </b:if>
</b:if>

Oddly, Blogger doesn't offer a 'data:' tag for the blog description in the header (you would think there would be a data:blog.description variable). So, you'll just have to be aware of adding your descriptive text manually.

Finally our page titles now look like this:
  1. Main Page Title - 'Blogger Tips Pro - Powerful Strategies for Google Blogger'
  2. Post Title - 'My Post Title - Blogger Tips Pro'
  3. Page Title - 'My Page Title - Blogger Tips Pro'
  4. Search Title - 'Blogger Tips Pro - Powerful Strategies for Google Blogger: << link to search >>
  5. Archive Title - 'Feb 2012'

Some Final Thoughts on Blogger Page Titles


As you can see you're free to modify your template header to experiment with how you would like your blog titles to appear to the search engines. You can add keyword rich terms in all of your pages depending on your pageType as well as other variables.

Note, however, that having your blog site title as the leading keyword phrase might be good in certain cases - especially if you are really attempting to brand your site with a coporate name. Take a look at Amazon or Target in Google results - you'll see they have their company brand first in pages titles. If your brand is important to you then leaving the Blogger default might be your best choice.

Experiment and enjoy!

Posted By my pwiki6:59 PM

Sunday, February 12, 2012

Blogging Strategy Basics

I know you've probably done the very same thing that I have - seen a great looking Blogger blog out there that simply 'wows' you with its flashy design, a great color scheme, and a seemingly large set of content.

blogger strategy
If you're prone to gut reactions you may have jumped right in to build the perfect looking blog that will wow your own readers. Design will lure them in, right?

I understand that this is a very simplistic scenario but with a point - creating a blog based only visual design, gut reactions or just a passionate topic might build a readership but won't have a strategy.

What is a Strategy?

The term strategy really originated in the military as a "plan of action to achieve a specific goal". However, game theory and businesses have morphed the meaning of strategy to be more than just a plan.

Have you ever met someone who can think of amazing, creative ideas that seem so simple yet so effective but is so disorganized that even the thought of planning something is so foreign to their mindset that they don't care when an idea comes to fruition? Or, have you met someone who is so organized that they plan out every detailed step and milestrone to reach a goal?

A strategy can be thought of the intersection of the two - the best of a planner mixed with an innovator. The essential elements of strategic thinking blend these two concepts.

Probably one of the best examples of strategic thinking can be found in Steve Jobs approach to driving Apple: it wasn't just about releasing a new product, it was about creatively looking at a market to be planfully better in some dimension, then dominating it.

How to Create a Blogger Strategy

So, how can you put this into practice using Blogger? It is not as hard as you think! Before you start your blog and entering content you should stop and think about where you want to go and how to get there.

Let me give you an example. Let's say you want to start a cooking blog but you don't have much more to go on than that (you might be thinking, "I love to cook but don't feel like an expert yet"). To define your strategy you need to imagine an end state - that is, what you would ultimately see as your definition of a successful cooking blog.

If your goal is to have a popular cooking blog, then understanding your 'idea' and when you are planning to achieve it is the essence of your strategy.

For example, you could say that you will become an expert on cooking seafood in three years. Your ultimate goal is to create your own seafood cookbook but you're going to blog about your journey as you are progressing. And, you want to blend the elements of asian cuisine within your recipes. Ah ha! A strategy is now forming.

Now, your strategy could be as simple as this - in the first year you're going to learn more about seafood in asia by finding books, recipes and interviewing cooks around the country who specialize in that type of cooking (plenty of content for your blog there!!).

Next, in year two you're going to start building some passive income with contextual ads by promoting your own recipes from your learnings in year one and, perhaps, even ask for donations if people like them. Finally, in year three you're going to write your cookbook while blogging about the process of publishing and marketing it.

The example strategy is now ready - the innovative idea is to create a unique seafood cookbook with a plan to get there in three years using your blog as the foundation!

Where to Learn More about Strategic Thinking

If you have some time take a look at some of these blogs:
Critical Thinkers
Strategically Thinking
The Nature of Strategic Thinking

or, go to Amazon and pick up a copy of:
Ahead of the Curve

One strategy trick I like to do is grab a pile of blank paper out of my printer, go upstairs to the dining room table, spread out the paper, open my laptop to Google (that site only!!! make sure nothing else open), then using a marker draw a box or set of boxes in the middle of the the paper of my core idea.

I then think about ways to reach my idea by searching Google for experts who have done it before and jotting down on the paper all the ways they've done it using boxes around the core idea.  Soon, a strategy starts to gel in my mind and I start drawing connections.

Having a strategy can lead you to greater success in the future. Give it a try - you might be surprised where it leads you!

Posted By my pwiki3:47 PM