Make Money With Adsense Keywords and Blogger

If you are new to blogging with Blogger (Blogspot) and wondering how to make money with Adsense this article is for you. If you have Google Adsense on your blog but are disappointed with the revenue generated so far then read on. Even if Google Adsense is performing well for you I am going to give you some tips that will mean you will earn extra money from Google Adsense.

Why Are Keywords So Important for Bloggers?
In order to make money from blogging with Blogger it is important first to understand the significance of keywords and keyword phrases. Via Google Adwords, the sister of Google Adsense, advertisers bid for keywords and keyword phrases. The more frequently these keyword terms are searched for the higher their value. That is why keyword phrases like make money or make money online which receive a huge number of monthly searches are top paying keywords and are worth so much to advertisers.


To make money with Google Adsense all you need do once your blog is receiving traffic is sign up with Google Adsense, receive a unique code and then place Google Adsense ads on your Blogger blog. These ad units are targeted automatically based on the keywords and keyword phrases which appear in the content of your posts. You get paid for every click on one of your Google Adsense ads. The amount you get paid is determined by the value of the keyword or keyword phrases used.

As a webpublisher it is important to be mindful when crafting your content that you use Google keywords and keyword phrases relevant to your blog's content. This does not mean that you stuff your posts with Google keywords to generate higher Google Adsense payments. In fact having too many keywords is known as keyword stuffing and could mean your blog is penalized by Google. A good rule of thumb is to have 3-5% of your content made up of your blog's keywords. A keyword density over 7% is too high and risks penalty.

For help with adding Google Adsense ad units to your Blogger blog please refer to my article Blogger Guide to Google Adsense Placement

Find The Best Google Keywords for Your Blog
These days many bloggers wanting to make money with Adsense build their blogs based on Google keywords. Their plan is to achieve first page positions on Google search pages for each of these keywords and keyword phrases. However, adopting this strategy from the outset would not be the case for most bloggers. Most of us start a blog about something we are interested in and then decide that we would like to make money with Google Adsense.

If Google keywords for your blog is not something that you have paid much attention to up to now then you may be surprised at what a difference it will make to your Google Adsense earnings and SERPs (search engine results page). Just by figuring out your keywords and emphasizing them in your blog posts you can expect to earn extra money with Google Adsense and Blogger. I did an exercise recently where I edited one of my earlier posts and added about 10 more keywords to the content. Not only did I move my article from about 60 in Google searches to 10 the revenue earned from Adsense for this article increased markedly too.

To determine what your keywords are for your blog you will need to conduct some research. Go to Google Adwords Keyword Tool and type in the topic of your blog. For instance if your blog is about making money online you would type in this phrase to receive other keywords that are related to your blog topic.

Try to identify about 10 to 15 Google keywords and keyword phrases that fit with your blog content. Print out this list and keep it handy so you can refer to it often when writing content for your blog.

Write an article around each of these Google keywords or keyword phrases. These 10 to 15 articles will become the backbone content of your blog. Research these articles by performing Google searches and reading what other bloggers who make it to the first couple of pages in the search engine results are writing about. Notice their keywords and keyword phrases, and the tags they have used. This research will help you identify two things:

• Any gaps not so well covered by fellow bloggers but relating well to your keywords. That will give you a nice opportunity to write a series of articles on the topic
  
• How other bloggers in your niche are tailoring their content for success and which keywords are performing well for them

Always write original content. Never copy another bloggers material. Despite being unethical to plagarize duplicated material is easy to identify and can mean that you get penalized by search engines like Google and run the risk of being banned from Google Adsense. My take on what is known as blog scraping is that if you need to copy what some else has written clearly you don't understand your blog topic well enough and you are probably better to write about something you do know something about. Your readers will see through you very quickly if you don't fully understand the depths of your blog topic. 

Google Adsense Tips for Blogspot Bloggers (Blogger Bloggers)

• Add Your Main Keyword to Your Title Tag
  Make sure that your main keyword for each of your 10-15 articles forms part of your title tag as this is important if your article is to rank highly in search engine results. If you can use two keywords or keyword phrases all the better. You will note that I have added three keywords in my title: make money,Google Adsense and Blogger.
  
• Use the Main Keyword in the Body of Your Posts
  Make sure you use the main keyword throughout the body of your article. Ensure that your main keyword appears in the first and last paragraph of your post. There are keyword density toolsavailable to help you check the ratio of keywords used.
  
• Make Sure You Tag Your Main Keyword
  Tagging your main keyword and other keywords and keyword phrases is also important if readers are to find your article. Your posts will do better in search engine results if they are appropriately tagged. And of course the better your blog is search engine optimized the more traffic your blog will receive and the greater the potential for Google Adsense revenue.
  
• Make Sure Your Blog is Search Engine Optimized
  Optimize your Blogger blog by adjusting your title tags and adding meta tags for better SEO. SEO is important as it generates search engine traffic and building traffic is paramount for high earnings from Google Adsense.
  
• Develop Backlinks for Your Blog
  Some of the factors that determine how high your articles will appear in search engine results are backlinks and the age of your blog. If you have some good backlinks to highly ranked websites your blog articles are likely to be promoted in search engine results. Use blog directories, forums, and comment on other blogs in your niche to build a good range of backlinks. Submit your best articles to article directories to generate traffic and links. Also submitting your article to social bookmarking sites like Digg and StumbleUpon can provide backlinks and boost traffic at the same time
  
• Give Your Old Blogger Posts a Keyword Makeover
  Go back through your previous blog posts and identify posts that are not receiving a lot of traffic. Read through them and look for opportunities to rewrite small portions of the content to insert keywords and keyword phrases. Check the tags too and add any keywords and keyword phrases that may help to boost traffic. Identify any posts that need to be rewritten from a slightly different angle and with more scope for the addition of keywords
  
• Publish Posts at Least 250-300 Words Long
  Check the number of your articles Google has indexed. Shorter articles can often be missed out particularly if your blog is only recently created. Plus shorter articles do not give enough scope for Google Adsense to necessarily know what keywords to target when serving ads.
  
• Optimize Google Adsense Placement, Size and Appearance
  Some locations for Google Adsense work better than others. Make sure you read up on Google Adsense placement as this will ensure you make the most money from your Adsense ads.
  
  Some Adsense ad unit sizes are better performers than others. My personal favorite is 336x280 ad unit which I use successfully on most of my blogs.
  
  Consider the appearance of your Adsense ad unit. Blend it in or make it stand out the choice is yours. 

In today's article I have discussed how to make money with Google Adsense and Blogger. I have paid close attention to the use of keywords and keyword phrases in your content as these are the basis for the ads served up by Google. Included in this article are tips on how to locate and identify your keywords, increase your keyword density and use keywords effectively along with other Adsense tips.

Add Amazon Product Links to Blogger Posts

In this tutorial you will learn how to deep link a specific Amazon product directly into your Blogger posts so that the link will appear either on every post page or alternatively only on a selected post page. By deep linking a targeted Amazon product directly to your Blogger blog you can expect to increase your Amazon sales and to make extra money from Blogger. If you wish to learn more about adding Amazon widgets to your blog please refer to my earlier tutorial Make Money Add an Amazon Widget to Blogger

This tutorial provides you with a complete walk through of the process of adding Amazon product links to Blogger. I have rated the tutorial as moderate as it involves setting up the Amazon product link, converting the code and adding a block of code to your Blogger template. All these steps are within the capabilities of the average Blogger user provided you follow the step by step instructions below.

How to Deep Link an Amazon Product to Blogger Posts
This tutorial will show you how to add an Amazon Product Link at the foot of every post in your Blogger blog. If you want your link to appear only on a specific individual post page see Tips and Troubleshooting below for instructions.

Difficulty Level: Moderate

1. Sign in to your Amazon Associates account. If you are not a member sign up is free to both Amazon.com and Endless.com
   
2. Click on the Links and Banners tab
   
3. Under the Product Links heading choose the Add Product Links Now link
   
   
4. From the Product Links page choose your Product Category from the drop down list and enter your search keyword phrase to identify the product you wish to link to. Hit the Go button.
   
   
5. From the search results choose the individual product you will linking to by clicking on the Get Link button on the right hand side of the product
   
   
   
6. You will now be taken to the Customize and Get HTML code page.
   
   • Select Link Type
     By default both the product image and text link will display but you can customize it to display the image only or the text only by checking the box alongside these options
     
   • Customize Link
     Choose the appearance of your product. With or without a border. Choose color options to suit your blog. I suggest you keep the default setting for the link opening in a new window. Amazon lets you see a live preview of your product on the right so that you can make any adjustments before embedding the code into your blog.
   
   
7. Once you are satisfied with the product's appearance click on the highlight code button at the foot of the page and copy the HTML code for the Amazon Product Link.
   
8. Open a Javascript to HTML converter such as Centricle. Paste your code into the content window and press the Encode button
   
9. Highlight and copy the code that has been converted
   
10. Login to Blogger if not already logged in
    
11. Navigate to Layout > Edit HTML
    
12. Back up your Blogger template as a precaution
    
13. Check Expand Widget Templates box
    
14. There are several places you may wish your product link to appear. I have assumed for the purposes of this tutorial that you want it at the bottom of your post. Therefore find the following code in your template:
    

    <div class='post-footer-line post-footer-line-3'/>

    
    
15. Directly below this line paste the converted Amazon HTML code
    
16. Click on Save Template
    
17. Click on View Blog to view your link at the foot of every Blogger post including the home page view. 

Tips and Troubleshooting
If you are writing about a lot of different products on your blog you may need to place targeted Amazon product links on your Blogger individual post pages. To have the Amazon Product Link only appear on a specific post page follow these steps.

How To Add an Amazon Product Link to an Individual Blogger Post
Before you get started you will need to know the full URL address of your Blogger post. To get this navigate in a new window to the specific post page of your Blogger blog and copy the address from the address bar at the top of your browser

1. Follow steps 1 to 13 as per adding an Amazon Product Link to the foot of every Blogger post.
   
2. Find the following code:
   

   <div class='post-footer-line post-footer-line-3'/>

   
   
3. Directly below this line paste the following code:
   

   <b:if cond='data:blog.url == "your blog post URL including http://"'>
   Paste your Amazon code here
   </b:if>

   
   
4. Replace "your blog post URL including http://" with the URL address of your blog post
   
5. Paste over "Paste your Amazon code here" with your converted Amazon HTML code
   
6. Click on Save Template
   
7. Click View Blog and navigate to the individual post page to see your Amazon Product Link at the foot of your Blogger post (Blogspot post)

In this tutorial you have learned how to add an Amazon Product Link to your Blogger posts (Blogspot posts). I have also shown you how to embed an Amazon Product Link directly into a specific Blogger post. By adding targeted Amazon product links to your Blogger blog you can expect to make extra money from your blog. I would love to hear from anyone about their experiences of adding Amazon widgets or product links to their Blogger blog so if you have the time please let me know how you get on.

Add 3 Column or 4 Column Footer to Blogger

In this Blogspot tutorial you will learn how to convert your existing Blogger footer (Blogspot footer) into a 3 column footer or a 4 column footer. With more columns in your Blogger footer you will be have the extra room to accommodate more widgets such as Flickr photos and Twitter updates. Also you will be able to put less frequently used widgets such as recents comments, archives, followers, About Me etc at the bottom of your template so that only the most important widgets are loaded first.

This tweak involves adding code to the footer section of your existing Blogger template to change it to 3 columns or 4 columns. The tutorial is not beyond the capabilities of Blogger newbies and webmasters with intermediate skills but care needs to be taken when modifying your Blogger template so back up before you start. For best results a Blogger template with a width of around 900px is best.



How to Add a 3 Column Footer to Blogger

1. Log in to Blogger if not already logged in
   
2. Navigate to Layout > Page Elements
   
3. Move any existing widgets out of the footer section and place them in the sidebar temporarily and save changes
   
4. Navigate to Layout > Edit HTML
   
5. Back up your template as a precaution by downloading it to your computer
   
6. Find the following section in your Blogger template
   

   <div id='footer-wrapper'>
   <b:section class='footer' id='footer'/>
   </div>

   
   If you are having difficulty finding this section trying searching for footer-wrap or something similar as sometimes this section is called something else in some templates.
   
7. To Add a 3 Column Footer to Blogger
   Replace all the code located in Step 6 with the following
   

   <div id='footer-columns'>
   <div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
   </div>
   <div style='clear:both;'/>
   </div>

   
   To Add a 3 Column Footer to Blogger with a Lower Footer Section
   Replace all the code located in Step 6 with the following
   

   <div id='footer-columns'>
   <div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
   </div>
   <div style='clear:both;'/>
   <p/>
   <div id='footer-bottom' style='text-align: center; padding: 10px;'>
   <b:section class='footer' id='col-bottom' preferred='yes'>
   </b:section>
   </div>
   <div style='clear:both;'/>
   </div>

   
   
   To Add a 4 Column Footer to Blogger 
   Replace all the code located in Step 6 with the following
   

   <div id='footer-columns'>
   <div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
   </div>
   <div style='clear:both;'/>
   </div>

   
   
   
8. Save changes to your Blogger template.
   
9. Navigate to Layout > Page Elements. You will now see a 3 column footer, 3 column footer with a lower section or a 4 column footer depending on what option you chose.
   
10. Move the desired gadgets to the new Blogger footer columns. Create new widgets to fill up the footer columns if necessary. Save your changes.
    
11. Click View Blog to admire your new footer section

Tips and Troubleshooting

1. To Add Padding Between Footer Columns in Blogger
   To create some padding between the columns add the following code to the style section of your Blogger template - before </b:skin> tag.
   
   #footer-columns {
   clear:both;
   }
   
   .footer-column {
   padding: 10px;
   }
   
2. To Add a Border to the 3 or 4 Column Blogger Footer
   
   • For Top Border Only of the 3 or 4 Column Footer
     Paste the following code before the </b:skin> tag
     
     #footer-columns{
     border-top:1px dotted $bordercolor;
     clear:both;
     margin:0 auto;
     }
     
     Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example
     
     
     #footer-columns{
     border-top:1px dotted #113355;
     clear:both;
     margin:0 auto;
     }
     
   • For a Box Border Around the 3 or 4 Column Footer
     
     #footer-columns{
     border:1px dotted $bordercolor;
     clear:both;
     margin:0 auto;
     }
     
     Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example
     
     #footer-columns{
     border-top:1px dotted #113355;
     clear:both;
     margin:0 auto;
     } 

In today's Blogger tutorial you have learned how to add a 3 column footer or a 4 column footer to your Blogger template (Blogspot template). You have also learned how to add some styling such as a border above the footer and around the footer. As always I am available to answer questions if you need assistance. Good luck! 

Add a Twitter Updates Widget to Blogger

If you are a regular Twitter user and have a bunch of followers you might want to add a Twitter Updates widget to Blogger (Blogspot). In today's tutorial I will show you the easy way to add a Twitter Updates widget to Blogger (Blogspot). It is fairly straightforward to add this Twitter Updates widget to Blogger so please don't be put off if you are a Blogger beginner as you can have this widget up and running in no time.

If you are new to Twitter and don't have an account yet you can sign up to Twitter for free


How to Add a Twitter Updates Gadget to Blogger 
There are several methods of adding a Twitter Updates widget to Blogger which I will be discussing over the next few posts. Today I will start with the easiest method by far. This Twitter widget won't slow down your blog loading time particularly but I suggest as with all HTML widgets that you place it near the bottom of your column of gadgets and limit the number of updates shown.

This Twitter Updates widget will provide a basic widget only and is fine if you aren't too bothered about styling. The widget uses the styling from your blog based on the Blogger template you are using but unfortunately there is no way to modify its appearance at the moment. If you want something a little more fancy keep an eye out for my future posts about Twitter Updates widgets.

1. Log in to Blogger if you are not already logged in
   
2. Go to Layout > Page Elements
   
3. Click Add a Gadget in the Blogger sidebar
   
4. Click on More Gadgets to the left and choose the Twitter Updates widget. Blogger may change this so if you don't find it there try looking in Featured or Popular.
   
5. Enter your Twitter name (usually your blog name)
   
6. Choose the number of updates to display. By default this is set to 5
   
7. Uncheck display link to your Twitter page if you do not want visitors to go to your Twitter page for some reason otherwise leave it as is.
   
8. Click Update to Preview any changes and then Save
   
9. Use Blogger's drag and drop feature to reposition your Twitter gadget in the desired location in sidebar or footer of your Blogger blog. Save any changes
   
10. Click View Blog to admire your new Twitter Updates widget

In today's tutorial I have shown you how easy it is to add a Twitter Updates widget to your Blogger blog (Blogspot blog). The Twitter Updates widget will display your latest Twitter tweets on your blog. The disadvantage of this third party Twitter Updates widget is that it has basic styling only and no way to modify it. On the plus side it loads fast and is likely to be trouble free. I will be writing more about Twitter updates widgets in the next couple of posts so keep an eye out. Enjoy!

How to Align and Justify Blogger Posts

This is the second article in a series about CSS styling tricks and tips for Blogger written with Blogger beginners and novices in mind but suitable for all bloggers who want to customize their existing Blogger template. While the first article dealt with how to add or remove image borders in Blogger today I show you how to align and justify Blogger posts.

Skill Level: Beginner

Rating: Easy

Time: 1 Minute

Many of the questions that my readers ask me are about how to customize various features of their Blogger template (Blogspot template). Over the coming weeks I will be focusing on some simple CSS styling tricks and tips to help you get more out of your Blogger template. Much can be achieved by learning a little about CSS. So before you rush off to download a custom Blogger template consider customizing your existing Blogger template. 

This tutorial is part of a series of articles that I will publishing over the coming weeks about customizing your Blogger template using CSS styling. I will be targeting beginner bloggers and newbies to Blogger as well as more seasoned bloggers so if you want to spice up your Blogger template please read along.

How to Justify Blogger Posts (Blogspot Posts) Using CSS
It is easy to change the text alignment of your Blogger posts with the addition of one extra line in the CSS styling section of your Blogger template (Blogspot template). By default the alignment is set to left align so that the text aligns to the left while the right edge is ragged. You can also have right alignment where the text aligns to the right and the left edge is ragged. 

Another not so common option is to justify the text so that both left and right edges are straight. Users of MS Word and other word processing programs will be familiar with justify as an alignment choice. Justify stretches out the text so that each line has an equal width similar to what you will find in newspapers and magazines. I have found justifying my Blogger posts to be a useful feature on several of my blogs and thought some of you might to. Below are instructions on how to justify your Blogger posts so that all your blog's articles are justified but first take a look at the difference in presentation of these 2 blog posts just by justifying the alignment of the text. Makes a big difference don't you think?

1. Before you start check how text is currently aligned on your Blogger posts. If it is left aligned you will be able to follow this trick to justify it. If it is already justified no need to go any further.
   
2. Login to Blogger if not already logged in
   
3. From the Dashboard click the Layout link for your blog and then click on Edit HTML
   
4. Back up your template by downloading it in full as a precaution
   
5. Use CTRL + F to find the code block beginning with .post in the CSS styling section of your Blogger template. As templates will differ greatly there are no hard and fast rules about what styling will be in this block. Here is a typical code block taken from the default Minima Blogger template
   

   .post {
   margin:.5em 0 1.5em;
   border-bottom:1px dotted $bordercolor;
   padding-bottom:1.5em;
   }

   
   
6. Add the following line to the code block before the end brace (the end curly bracket)
   

   text-align:justify;
   
   so that your code now looks like:
   
   .post {
   margin:.5em 0 1.5em;
   border-bottom:1px dotted $bordercolor;
   padding-bottom:1.5em;
   text-align:justify;
   }

   
   
7. Click on Save Template
   
8. Click View Blog to see the alignment of all your posts has now changed to justified

Tips and Troubleshooting

1. If your Blogger template justifies posts and you would like to left align them find the code beginning with .post in your Blogger template and add the following line to the block:
   

   text-align:left;
   
   so that your code now looks like:
   
   .post {
   margin:.5em 0 1.5em;
   border-bottom:1px dotted $bordercolor;
   padding-bottom:1.5em;
   text-align:left;
   }

   
   
2. If you want the posts right aligned you would substitute the word right for left.

In this tutorial you have learned how to justify your Blogger posts to create a straight rather than ragged margin edge. By using this tip to add one line of code to your Blogger template you can enhance the look of your Blogger posts. This tweak only takes a minute but can markedly improve the presentation of your Blogger posts. Please keep reading along for more CSS tips and tweaks in the coming weeks.

Add Twitter Retweet Button to Blogger

Did you know that Twitter can help drive traffic to your Blogspot blog? In today's Blogger tutorial I show you how to add a free Twitter Retweet button to your Blogger posts. Adding a Tweetmeme Twitter Retweet button to Blogger will help promote your blog on Twitter in 2 ways: one by attracting new Twitter followers and two by increasing the direct traffic to your blog from Twitter.

Forget the preamble and take me straight to the instructions to insert the Retweet button into Blogger

What is Twitter and How Does it Work?
Twitter is currently the fastest growing free social networking site. Essentially, Twitter users micro blog about what they are doing or what others are doing by posting tweets of around 140 characters to Twitter. When Twitter members read these tweets and like what they read they can become followers much in the same way that your readers can choose to follow your blog.

Twitter is great news for bloggers because it can be used as a vehicle to promote blogs. Blogger can easily be linked with Twitter services so that every time a post is made to Blogger a short message with a link is posted on Twitter. As every follower is notified that you have tweeted, a blog publisher can gain lots of exposure for their blog with very little effort. 

Once you add Tweetmeme retweets to the mix the spread compounds because not only do you have followers hearing about your tweet but the followers of followers. So say one of your followers retweets your post all that person's followers hear about it too and pretty soon a tweet plus your retweets can popularize a post to the point that it spreads so widely that it goes viral. 

Advantages of a Twitter Retweet Button
A Tweet/Retweet button looks similar to and behaves like anintegrated Digg button but it counts retweets rather than diggs. A Retweet button counts reposts of a tweet so that readers can see at a glance how popular your article is on Twitter. Another benefit of the Retweet button is that it allows your blog readers to retweet your post so that their followers hear about your post too. 

How to Add a Twitter Retweet Button to a Blogger Blog (Blogspot Blog)
The following instructions will place a Tweetmeme Retweet button into all of your blog posts.

1. Login to Blogger if not already logged in
   
2. From the Dashboard navigate to Layout > Edit HTML
   
3. Check the Expand Widget Templates button
   
4. Back up your Blogger template by clicking on Download Full Template as a precaution
   
5. Using CTRL + F find the following code:
   

   <div class='post-header-line-1'/>

   
   
6. Directly after the above line paste the following code depending on which Retweet button and position you prefer:
   
   Large Retweet Button - Right Aligned
   

   <div style="float:right;padding:4px;">
   <script type="text/javascript">
   tweetmeme_url = '<data:post.url/>'; 
   tweetmeme_source = 'your_twitter_user_name';
   </script>
   <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
   </script> </div>

   
   
   • Large Retweet Button - Left Aligned
     

     <div style="float:left;padding:4px;">
     <script type="text/javascript">
     tweetmeme_url = '<data:post.url/>'; 
     tweetmeme_source = 'your_twitter_user_name';
     </script>
     <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
     </script> </div>

     
     
   • Compact Retweet Button - Right Aligned
     

     <div style="float:right;padding:4px;">
     <script type="text/javascript">
     tweetmeme_style = 'compact'; 
     tweetmeme_url = '<data:post.url/>'; 
     tweetmeme_source = 'your_twitter_user_name';
     </script>
     <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
     </script> </div>

     
     
   • Compact Retweet Button - Left Aligned
     

     <div style="float:left;padding:4px;">
     <script type="text/javascript">
     tweetmeme_style = 'compact'; 
     tweetmeme_url = '<data:post.url/>'; 
     tweetmeme_source = 'your_twitter_user_name';
     </script>
     <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
     </script> </div>

     
     
   
   
7. Change your_twitter_user_name for your actual Twitter username. For instance I would enter BlogWizz
   
8. Click on Save Template
   
9. Click on View blog to admire your Tweetmeme Retweet button in your Blogger posts

Tips and Troubleshooting

• To Add Retweet Button Below Blogger Post
  If you want the button to appear at the bottom of Blogger posts instead of just below the post title locate the first instance of the following code and then paste the code for your chosen button immediately after this line: (don't forget to change your Twitter username as in Step 7)
  

  <data:post.body/>

  
  
• To Have the Retweet Button Appear on Post Pages Only in Blogger
  If you want the button to only appear on the post pages and not the home page you will need to enclose the button code in an if statement. See below for an example of what the full code would look like with this extra code.
  

  <b:if cond='data:blog.pageType == "item"'>
  </b:if>

  
  Thus the full code for a right-aligned large Retweet button which only appears on the individual post pages and not the home page would be:
  

  <b:if cond='data:blog.pageType == "item"'>
  <div style="float:right;padding:4px;">
  <script type="text/javascript">
  tweetmeme_url = '<data:post.url/>'; 
  tweetmeme_source = 'your_twitter_user_name';
  </script>
  <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
  </script> </div>
  </b:if>

In this tutorial you have learned how to add a Tweetmeme Retweet Button to your Blogger posts. The Retweet button will encourage your blog readers to retweet your content on Twitter thereby increasing your blog traffic. I have provided the code for both a large and compact button with the option of left or right alignment. The button appears just below the post title and counts the number of retweets of your Blogger post. I have also included details of how to add the Tweetmeme Retweet button to the foot of your Blogger blog and how to add the button to post pages only.

Blogger Read More Links in Posts with Jump Breaks Feature

In this Blogger tutorial you will learn how to insert jump breaks into your Blogger posts (Blogspot posts) as an aid to quick navigation for your visitors. Jump Breaks in Blogger provide an easy way to show only a snippet of your whole post on the home page of your blog with a read more link below it for the rest of the story.

I have already written about a Blogger expandable post summaries hack which provides a read more feature for a Blogger blog homepage. For most Blogger webpublishers (Blogspot webpublishers) this hack is no longer necessary because Blogger as part of its 10th birthday celebration introduced a new feature called Jump Breaks. I cover several methods to insert jump breaks depending on whether you are using a Blogger default template or a customized Blogger template.

The advantage of adding jump breaks to your Blogger posts is that your readers can quickly and easily skim your most recent posts for what interests them rather than having to scroll through a whole bunch of long articles. This is definitely a big help for those of us like me who often write articles longer than 500 words. If your posts are short and sweet you may find that adding this read more feature is unnecessary however you can still apply it when you do have a longer post. Below is an example post which illustrates the Jump Break feature in action.


How to Insert Jump Breaks (Read More Links) in Blogger
It is easy to insert a Jump Break into your Blogger posts (Blogspot posts) at any point of your choosing.

There are two methods of inserting the Jump Breaks in Blogger. Which method you choose depends on which post editor you are using. If you are not sure which editor you are using check this out by going toSettings > Basic and scrolling to the bottom of the page. Under Global Settings you will see a radio button next to old editor or updated editor.

1. Method 1
   Insert Jump Breaks - New Blogger Post Editor Only
   In order to use this method you need to be using the updated editor in Blogger or have Blogger in Draft enabled.
   
   • When creating a new post in the Blogger Post Editor position the cursor in the editor at the point you wish the Jump Break to be inserted
     
   • Click on the insert Jump Break icon (currently the last option on the menu)
   
   
   • A jagged dividing line will appear to mark the insertion point
   
   
   • Publish your post as normal
   
   
2. Method 2
   Insert Jump Breaks - Old Blogger Post Editor Only
   If you are using the old post editor rather than the new post editor you can still insert jump breaks into your Blogger posts.
   
   • When creating a new post in the Blogger Post Editor make sure you are in the Edit HTML mode rather than compose mode
     
   • Insert the following code at the point where you want to break the Jump Break to occur:
     

     <!-- more -->

     
     
   • Publish post as normal

Tips and Troubleshooting

1. To Add Jump Breaks to New Posts Automatically
   To save time it is possible to automatically add Jump Breaks to posts with the following method:
   
   • Go to Settings > Formatting and scroll to the bottom of the page
     
   • Under Post Template paste <!-- more --> into the box and save. The next time you create a new post the <!-- more --> will automatically appear. Make sure you are in the Edit HTML mode to see <!-- more --> appear.
   
   
2. To Change the Read More Text
   If you want to change the Read More text for something likeRead Full Story or Continue Reading you can easily do this by:
   
   • Go to Design > Page Elements
     
   • Edit the Blog Posts widget
     
   • Change the post page link text (Read More text) which appears at the top of the page to your preferred text and save
   
   
3. To Manually Add Jump Breaks to Blogger For Users of Customized Templates
   If you are using highly a customized template or have customized your Blog Posts widget you may experience a problem in getting the Blogger Jump Break feature to work. In this event you can edit your Blogger template to enable Jump Breaks.
   
   • As a precaution back up your template by downloading full template to your own computer
     
   • Tick the Expand Widget Templates checkbox
     
   • Using CTRL + F find the following line of code:
     

     <data:post.body/>

     
     
   • Directly below this line insert the following code into your Blogger template:
     

     <b:if cond='data:post.hasJumpLink'>
     <div class='jump-link'>
     <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
     </div>
     </b:if>

In this tutorial you have learned how to create expandable post summaries using the new Blogger feature Jump Breaks. You now have the option to easily insert Jump Breaks into your Blogger posts so that longer posts appear with only an introduction followed by a Read Morelink. 

I have shown you 2 methods to insert the Jump Breaks and Read Morelinks into your Blogger posts depending on whether you are using the new or old post editor features. I have also given you some tips to make sure you get the most out of the Blogger Jump Break feature including what to do if the Jump Breaks feature does not work with your customized Blogger template. As always I would welcome your feedback about your experiences with the expandable post summaries Blogger feature (Blogspot feature) or any other feature you may be having an issue with.

Add a Simple Drop Down Menu to Blogger

In today's Blogger tutorial I show you how to add a simple drop down menu widget sometimes called a select box to the sidebar of your Blogger blog (Blogspot blog). If you want to add lots of links to your Blogger blog but are worried about the amount of space this will take up on your blog this tutorial is for you. A drop down widget is a neat solution to the cluttered sidebar problem as it is both space saving and easy to install. The convenience of a drop down menu widget can be seen on many blogs where it is used for lists like a long Blogroll, Categories list, Labels list or a Recommended Posts list.

How to Add a Drop Down Menu Widget to Blogger
Adding a drop down menu to Blogger is well within the capabilities of even beginner bloggers. Most of the work is in cutting and pasting the links which is not difficult for anyone with basic computer skills. So let's get started but first here is a working drop down menu list with links to various posts in my blog:

- Blog Know How Tutorials -Twitter Badge or ButtonTwitter Retweet ButtonTwitter Updates Widget

1. Log in to Blogger if not already logged in
   
2. Navigate from the Dashboard to Layout > Page Elements.
   
3. Click on Add a Gadget in the sidebar or other location if you wish
   
4. Select a HTML/JavaScript gadget from the list of gadgets
   
5. Paste the following code into the content box of the widget:
   

   <form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
   size=1 name=menu>
   <option>- Your Menu Title -</option>
   
   <!-- Change the following links to your own -->
   
   <option value="http://URL of link1">Link 1</option>
   <option value="http://URL of link2">Link 2</option>
   <option value="http://URL of link3">Link 3</option>
   <option value="http://URL of link4">Link 4</option>
   <option value="http://URL of link5">Link 5</option>
   
   <option value="http://blogknowhow.blogspot.com">Blog Know How</option>
   </select></form>

   
   
6. Replace _blank as follows:
   
   • To have a new window open leave the same
     
   • To have the new page appear in the same window replace _self
   
   
7. Replace - Your Menu Title - with a title of your own
   
8. For each instance of the option values highlighted in red substitute your own links and link names. For example:
   
   <option value="http://blogknowhow.blogspot.com">Blog Know How</option>
   
9. Click Save
   
10. Use drag and drop to position the drop down menu widget in the location you want it within your sidebar and save any changes
    
11. Click View Blog to admire the new drop down menu in the sidebar of your blog

In today's Blogger tutorial I have provided you with instructions to create and insert a simple drop down menu widget in the sidebar of your Blogger blog (Blogspot blog). This widget is ideal for reducing clutter on your Blogger sidebar and excellent for displaying long lists of links such as labels in a convenient, neat and space saving way. A drop down menu gadget is easily installed from the Layout > Page Elements page and can be customized to your own specifications. Any problems with this Blogger tweak please let me know. Enjoy!

Add a Twitter Profile Widget to Blogger

If you use Twitter then you are going to want to let your Blogger readers know about it. One effective way to show your Twitter updates on Blogger is to add a Twitter profile widget to the sidebar of your blog. This widget is quite a bit more fancy than the current Twitter Updates Widget available through Blogger which I showed you how to insert into your blog in my recent article Add a Twitter Updates Widget to Blogger. On the minus side the widget may slow your blog down so test it out first if fast loading time is crucial to you.


How to Insert a Twitter Profile Widget into Blogger

1. Go to Twitter Widgets and sign in
   
   
2. Choose Profile Widget and you will be taken to a default profile widget page where you can customize your Twitter widget according to your needs.
   
3. Choose Settings and make sure that your username is correct
   
4. Choose Appearance and make any custom color changes you need to so that the widget will blend into your blog. At the very least you will need to change the shell background and the links colors to suit your blog
   
5. Choose Dimensions and change the sizing of the widget if it is too large to fit into your Blogger sidebar. The default setting is 250x300
   
6. Click on Test Your Settings to ensure your new widget looks the way you want it to
   
7. Click the Finish and Grab Code button
   
8. Copy the code by right click the mouse in the code box and choosing Select All. Right click again and choose Copy
   
9. Sign in to Blogger. From the Dashboard go to Layout | Page Elements
   
10. In the sidebar choose Add a Gadget and then a HTML/Javascriptwidget
    
11. Paste the Twitter code into the gadget content box and clickSave
    
12. Your Twitter Profile Widget will now be showing in your Blogger sidebar so click on View Blog to admire it

In this Blogger tutorial I have showed you how to add a Twitter Profile Widget to the sidebar of your Blogger blog (Blogspot blog). This Twitter widget will encourage your blog readers to visit your Twitter Profile and with luck you may get some new Twitter followers out of it.