Add Google Adsense to Blogger Header (Above the Title)

In some of my last tutorials (Social Media Buttons beside Adsense ads & Adsense inside Blogger Header ), you've seen a few tricks for Adsense ads placement that may help you to increase your adsense earnings. Now, I will show you how to add Google Adsense above your header, for instance, just above the title of your Blogger blog. This can be done by adjusting your template to give you the option of adding more than one widget to the header area.

Add a new element to Blogger header

Step 1. From your Blogger Dashboard, go to Template and click on the Edit HTML button (it is recommended to make a backup first - click on the Backup/Restore button on the right side)

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open Blogger' search box:

Step 3. Paste or type the following code inside the search box and hit Enter to find it:

<div id='header-wrapper'>

Note: if you can't find that one, try to find this one instead:

<div class='region-inner header-inner'>

Step 4. Just below one of these lines, you should see this line:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 5. Replace the values in red like in this example:

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

Step 6. Click on the Save Template button to save the changes.

Adding the Adsense ad unit above the Blogger header

Step 7. Go to Layout (left side) and on the right side you should see a new section that will allow you to add a gadget to the header area

Step 8. Click on Add a Gadget link and select the Google Adsense gadget.

In case you want to add the script of an ad from your AdSense account, choose the HTML/JavaScript gadget and paste the script inside the empty box, then click on Save button.

If you don't know how to create an AdSense ad, please read this tutorial: 
How to Add Adsense ads on Blogger

Choose the type of ad unit you want. In my example, I added a new Adsense 728x15 ad link unit I thought would look good above the blog title. Color blending is usually done automatically by Blogger according to the color schema of your template but you can choose any other colors.

Step 9. Click on the Save arrangement button on the right side.

Now view your blog to see your new Google Adsense unit. If all is going well, your new AdSense ad unit should appear above your blog's title or logo:

Note: it may take a while for your ads to show if you created an ad unit on your AdSense account

This is a very good Adsense placement that can help you to increase the CTR of your blog.

How to add an image next to Blogger Post Title

It has often been said that a picture says a thousand words, so in the struggle for the attention of the reader, we can add a picture or an icon to our post title, as I have put in the title of the post in the screenshot above.

Show Image Icon before Blogger Post Title

Step 1:

First thing first you have to do is to prepare an image. After that you'll need a direct link to an image before you proceed further. You can upload it to tinypic.com and copy the URL located in the Direct Link for Layouts box. Also, make sure your image is sized appropriately. You don't want to see a huge image next to your post title.

Step 2: Go to Dashboard - Template - Edit HTML - Proceed if needed

Step 3. Click anywhere inside the code area to find (using CTRL + F) the following code:

<b:includable id='post' var='post'>

Step 4. After you found it, click on the left arrow next to it to expand the widget's code

Step 5. Then delete it until you reach to <div class='post-header'>:

              <b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

The code to be deleted:

Step 6:

Paste the following code in the place of the deleted code in Step 5:

<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <table><tr>
        <td class='posttitle'>
           <img src='IMAGE-URL'/></td>
        <td><h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
        </td>
        </tr></table>
     
      <style>
        h3.post-title {
          margin: 0px !important;
        }
      </style>
   
    </b:if>

Step 7:

Replace the IMAGE-URL text in blue color from above with the URL address of your image (the one that you've gotten from Step 1).

Step 8: Save the Template and that's it! Enjoy :)

How to remove Blogger Picture/Image Shadow and Border

If you want to get rid of those annoying shadows and borders around blogger images, then follow the next steps (see the difference in the screenshot below):

If you are using the old Blogger interface:

• Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you are using the new Blogger interface:

• Go to Dashboard - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

Screenshot

Now your blogger images should appear without any border or shadow. Cheers!
Update:

If the above method doesn't work for you, do the following:

- Go to Blogger's Dashboard > Template > Edit HTML
- Click anywhere on the code area and search by pressing the CTRL + F keys for the following code:

  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

Note: if you can't find the entire code, then try to find this line and the rest of it should appear:

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

- Delete it and Save your template.

Replace Older, Newer And Home Blogger links with an image or text

Newer Post, Home and Older Post are links that appear on the bottom of the posts. When a visitor click on one of these links, they will take him to the page with the list of your previous posts.
The number of the posts on these pages will be the same as the number of the posts on your main page.

What we can do:

A. Change the text of Newer, Older, Home links
B. Place a picture beside them (a small icon, arrow, or whatever...)
C. Add an image instead of the links

So let's start customizing them...

1. Log in to your Blogger Dashboard, go to Template > Edit HTML

2. Click anywhere inside the code area and find - using CTRL + F keys - the following code:

    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Or find in this code the following fragments which corresponds to each page links

• <data:newerPageTitle/> represents Newer Posts link
• <data:olderPageTitle/> represents Older Posts link
• <data:homeMsg/> represents Home link

Now change these fragments of codes as it follows:

A. Change the text of Newer Posts, Older Posts and Home Links

You need to REPLACE following parts in original code with ANY TEXT you like:

• replace <data:newerPageTitle/> with, for example NEXT POST 
• replace <data:olderPageTitle/> with, for example PREVIOUS POST
• replace <data:homeMsg/> (only the first one) with, for example HOMEPAGE

B. Place a picture beside Newer Posts, Older Posts and Home links

Add the below code just at the beginning of each of the colored fragments of codes from step 2.
<img src="URL Address"/>

So it should look like this:

<img src="URL Address"/><data:newerPageTitle/>

Note: Replace URL Address text with the url address of the image you want to appear

C. Replace Older Posts, Newer Posts and Home links with an image/picture

You can place any kind of picture you want All you have to do is use this code for the pic:

<img src="URL ADDRESS"/>

...just replace URL ADDRESS, with the URL of your hosted picture
...and in code, REPLACE the original link code for text with picture code

• replace <data:newerPageTitle/> with the pic for newer (next) posts
• replace <data:olderPageTitle/> with the pic for older (previous) posts
• replace <data:homeMsg/> (only the first one) with the pic for homepage

Screenshot

3. That's it! Preview and Save the Template.

Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

In this tutorial, I will show you how to add a cool floating Facebook like widget for Blogger that slides to the left on mouseover. Demo: You can see a static Facebook badge on the right side of this blog:

Demo blog

Adding Static Facebook Like widget on Blogger

Step 1. Log in to your Blogger account, go to "Template" and hit the "Edit HTML" button

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:

Step 3. Search (CTRL + F) for this tag:

</head>

Step 4. Add the following code just before/above </head> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Step 5. Save the Template.

Step 6. Go to Layout > Add a new Gadget > select the 'HTML/JavaScript' gadget and paste the code below in the HTML box:

<style type="text/css">
#fbplikebox {
    display: block;
    padding: 0;
    z-index: 99999;
    position: fixed;
    background: #ffffff;
}

.fbplbadge {
    background-color: #3B5998;
    display: block;
    height: 150px;
    top: 50%;
    margin-top: -75px;
    position: absolute;
    left: -47px;
    width: 47px;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwX6rkCDFIHgJQAhvdw9H7BbF-b7QLA6B1XOIL6z0XrbH89TgkX0pG9SfvOhftbqC1icCZt2zARPlffp-4xnnvktvgxHyCeP1CmvxIvdgpKxK7FR7gWQthbid0N6M8SwkA762Wmmy-xuw/s1600/vertical-right.png");
    background-repeat: no-repeat;
    overflow: hidden;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({right: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=YOUR-FACEBOOK-PAGE&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;" allowtransparency="true"></iframe>
</div>

Step 7. Replace YOUR-FACEBOOK-PAGE text with your Facebook fan page URL. Then, you will need to replace the following characters in the URL, as follows:

The  :  symbol with:

%3A

The  /  symbol with:

%2F

For example, the Facebook fan page of this blog is:

http://www.facebook.com/pages/Helplogger/120574614736021

After replacing the above symbols, the Facebook fan page would look like this:

http%3A%2F%2Fwww.facebook.com%2Fpages%2FHelplogger%2F120574614736021

Other settings (optional):
- to change background color of the fan box, replace the #ffffff value in red. You can pick the favorite color using this Color Code Generator.
- to change the Facebook badge color, replace the #3B5998 color value with your own.
- to change the width and height of the Facebook box, change the values in red (250)

Step 8. Now you can save this static Facebook fan box widget - press the 'Save' button. Enjoy!

Credit goes to Harish (way2blogging)

Amazing Examples To Customize Blockquote Style In Blogger/Blogspot

A blockquote is a quotation in a article or post, that stands out from the main text as a paragraph, or block of text. Using CSS, we can give a more professional look to our site or blog by adding a different style, background, color or font to our quotes.

This tutorial will show you how to customize blockquotes style in Blogger along with showing you 6 beautiful examples of customized blockquotes style.

How to add quotes to a Blogger post

How to Add Stylish Blockquotes In Blogger

In order to customize the blockquotes style in Blogger, you need to access the HTML of your template and add some code inside the head section. You would need to choose one of the styles suggested below and copy the code which is immediately after.
Step 1. From Blogger's Dashboard > go to Template > Edit HTML

Step 2. Click anywhere inside the code area and press the CTRL + F keys to search for this tag:

</head>

Step 3. Just above the </head> tag, copy and paste the code of the style that you would like to use:


Style 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

<style>
.post blockquote {
overflow:auto;width:250px;height:260px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#ffffff;
margin : 15px 35px 15px 15px;
padding : 5px 8px 15px 165px;
clear : both;
list-style-type : none; word-wrap:break-word;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXdRBybcDUcTHTFCKX49yT-dP7CYCAPNHxPUGtY7n2BiYNl3eym-fpUdWJFic5GADEj_BMOLo28aLWPJiCMBjKEGRrGXE34stb8M2wN7c1ExCR7tDdUbz5mZ5YmCwzL2r3wUeD_ej64hF2/s1600/teacher.png);
background-repeat: no-repeat;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;
}
.post blockquote:hover{
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0VaQC9sEuk_81yDzX6fq9tAqjuzbYjDag7p0AY3EVpfQFjBQEJ42GV1wWUCvhgYZaFKtv0UF78clIy3U58yNDz8DTIkmWS0YY3vN4tTlzE8hrcOon5bWpm4O6U5t1hU_cqqZjHvSXryiD/s1600/hover+html+teacher.png);
background-repeat: no-repeat;
color:#F1F1F1;
}
</style>

Style 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

<style>
.post blockquote {
overflow:auto;width:400px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 2px 10px 5px 60px;
line-height:1.7em;
clear : both;
color:#000;
list-style-type : none;
background : #F5F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDCHZSbgJEfReLo8szg9Ysd1-7c8noKUPu-2IgduefGKWdyWrHA-ub0dpdMmeJpigm7vBaEzaPg6UWVoj1N9FxeXya5iNBhqEqDKunjIC5QC8lgcVlSw_yglb4G3HvOCGJKc9uloK66yzD/s1600/notepad1.gif) repeat-y top left;
border : 1px solid #ccc;
-webkit-box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
}
</style>

Style 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

<style>
.post blockquote {
 display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
    font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.5;
  color: #446578;
  text-align: justify;
  border-left: 15px solid #EBF2F8;
  border-right: 1px dotted #EBF2F8;
    -moz-box-shadow: -1px 2px 5px #ccc;
  -webkit-box-shadow: -1px 2px 5px #ccc;
  box-shadow: -1px 2px 5px #ccc;
}
.post blockquote:before{
  content: "\201C";
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #8DACC0;
  position: absolute;
  left: 10px;
  top:5px;
}
.post blockquote:after{
  content: "";
}
.post blockquote a{
  text-decoration: none;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}
.post blockquote a:hover{
 color: #666;
}
</style>

Style 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

<style>
.post blockquote {
padding:10px 15px;
margin: 5px 15px;
border: 1px solid #E1E1E1;
background-color: #F6F6F6;
font-size: 15px;
font-family: Times;
}
.post blockquote:before {
content: "\201C";
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post blockquote:after {
content: "\201D";
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding:15px 0px 0px 5px;
}
</style>

Style 5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 

<style>
.post blockquote {
background: linear-gradient(#B8DB29, #5A8F00) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 15px 5px;
padding: 15px 30px;
position: relative;
font: 1.6em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #B5D928;
border-style: solid;
border-width: 50px 0px 0px 20px;
top: -50px;
content: "";
display: block;
left: 50px;
position: absolute;
width: 0;
}
</style>

Style 6

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 

<style>
.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FC8E42;
border-radius: 240px 240px 240px 240px;
color: #333333;
margin: 1em 140px 80px;
padding: 70px 70px;
position: relative;
text-align: center;
font: 1.5em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FFBD54;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #5A8F00;
border-radius: 25px 25px 25px 25px;
bottom: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 50px;
width: 25px;
z-index: 10;
}
</style>

Step 4. Click on the Save template button to save the changes. And you're done!

I hope that you found this tutorial helpful in learning how to customize blockquotes style in Blogger. If you have any questions or suggestions, then please feel free to leave a comment below.

A Simple Related Posts Widget For Blogger

In the last tutorial, we have seen how to add the Related Posts widget that would show related posts with thumbnails from the same category, based on the given labels, which would appear just at the end of your blog posts. However, maybe some of you would prefer the simple version of this related posts widget that will display only the posts titles.

If you want to add it, follow the next steps below:

How to add Related Posts Widget to Blogger

Step 1. Go to Template > hit the 'Edit HTML' button and click anywhere inside the code area.

Step 2. Press the CTRL + F keys and type the following tag inside the search box (hit Enter to find it):

</head>

Step 3. Just above the </head> tag, paste the following style:

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
#related-posts {
    margin: 15px 5px;
}

#related-posts h2 {
    font-size: 27px;
    font-weight: normal;
    color: #fff;
    text-shadow: 1px 0px 2px #888;
    margin-bottom: 0.75em;
}

#related-posts a {
    font-size: 13px;
    color: #888;
    text-transform: capitalize;
}

#related-posts a:hover {
    text-decoration: none;
    color: #555;
}

#related-posts ul {
    list-style-type: none;
    margin: 0 0 0px 0;
    padding: 0px;
    text-decoration: none;
    color: #000000;
}

#related-posts ul {
    list-style-type: none;
    background: #f9f9f9;
    border-left: 5px solid #f2f2f2;
}

#related-posts li {
    padding: 10px;
    line-height: 1.4;
    border-bottom: 1px dotted #E2E2E2;
}

#related-posts li:hover {
    background: #F4F4F4;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
</b:if>

Customization:

To change the size (27px) and color (#fff) of 'Related Posts' title, change the values in red. For the related post link color, replace the #888 value in green.
To change the background color, replace the #f9f9f9 hex color in red (you can use this Color code generator to pick your favorite color). For the background color on mouseover, change the #F4F4F4 value in red.

Step 4. Now find (CTRL + F) this line below (there will be two lines like this, you should stop at the second one):

<div class='post-footer'>

Step 5. Just above it, paste the code below:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a style="font-size: 9px; color: #CECECE; float: right;" href="http://helplogger.blogspot.com/2012/04/simple-related-posts-widget-for-blogger.html" rel="nofollow" >Simple Related Posts Widget</a></div></b:if>

Note: To change the number of maximum related posts for each label, change the "5" parameter from max-results=5

Step 6. Save the Template and visit your blog > click on any of your posts to see this simple related posts widget in action. Enjoy!