HeartATech

Adding Email Subscription Box in your Blogger is one of the good SEO tactics. Whosoever subscribed to your posts will get updates in their email whenever a new post is published in your blog.


So I will tell you the steps to add Email Subscription Box in your Blogger




Steps To Add Email Subscription Box In Blogger Blog-->

1--> Go to feedburner.com

2--> Select the feed for which you want to add email subscription box.

3--> Go to Publicize >> Email Subscription option and click on Activate.

4--> Now select the language and widget platform (Blogger) and click Go.
You can also copy-paste the code given in the box to a new HTML/Javascript widget.

It's done!

Labels or Categories list related articles or posts. Visitors eyes gonna catch easily to your Labels link if you place your blogs Labels link just below your post title. So by placing Labels just below the post title will help your blog visitors to see and read related articles. 


This Tutorial will help you to place the Labels just below your post title


Steps To Follow For Placing Labels Under Post Title In Blogger:-->


1--> Login to your Blogger Account.

2--> Go to Blogger Admin Page > Template > Click on Edit HTML.

3--> Check Expand Template.

4--> Ctrl + F and find <div class='post-footer-line post-footer-line-2'>


You will find codes like given below:


<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>


5--> Cut and Paste these codes under the script <div class='post-header'>.


6--> Save The Template and finish.

This tutorial will gonna help you to customize your read more link in your Blogger. Showing summaries of your blog posts in your homepage is always a good idea since showing full post of your recent post will gonna occupy a large space and your readers would have to scroll to see your below posts.






By showing summaries of your posts you are also enabling your readers to look up at the posts below your most recent post. Blogger includes this READ MORE feature but for more better look I am gonna explain you step by step procedure to customize your READ MORE link in your Blogger.


Steps To Customizing Read More Link In Blogger:-


1--> Login to your Blogger Account.

2--> Go to Blogger Admin Page > Template > Click on Edit HTML.

3--> Check Expand Template.

4--> Ctrl + F and find  <data:post.body/>


You will find codes like given below:-

      <data:post.body/>

      <div style='clear: both;'/> <!-- clear for photos floats -->

    </div>

    <b:if cond='data:post.hasJumpLink'>

      <div class='jump-link'>

        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>   <data:post.jumpText/></a>

      </div>

    </b:if>


5--> Now replace the blue codes with codes given below:


 <!--READ-MORE-STARTS--><b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'><div style="text-align: right;">Read More ->></div></a> </b:if>            

<!--READ-MORE-STOPS-->

You can Replace the Red text with anything you want to show up in your Read More link. You could also show up image in ths link now. Just replace the Red text with <img src='Link-of-the-image'/>

6--> Save your template and its done.

                        

How about adding Related Posts below your blog posts? Advantage of adding Related Posts below your blog post is that your readers may find some of your Related Posts interesting and click on the link to read the post, thus your readers stay time on your blog increases and thereby increases your pageviews. So this tutorial will help you to add Related Posts below your blog posts.

Steps Of  Adding Related Posts Below Blog Posts In Blogger:--

1--> Login to your Blogger Account.

2--> Go to Blogger Admin Page > Template > Click on Edit HTML.


3--> Check Expand Template.

4--> Ctrl + F and find </head>

5--> Above </head> , Copy and Paste the codes given below:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpiZNaEwLhWMkxU9Hv2QJ5gNKpnn7pCJqgyiaITNwUQ6TOU0UYpmSuW5dOj2iWTdTjGdkid30zZEwECaGCR-lrWXwqcFyssfKUkf0bS5gmLm-zA_jhkZOF1Xx2kgB-wc3zvFqIGOnS7d8/s400/noimage.png&quot;;
var maxresults=5;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js'
type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

6--> Now press again Ctrl + F and Find <div class='post-footer-line post-footer-line-1'>

7--> Above  <div class='post-footer-line post-footer-line-1'> , Copy and Paste the codes given below:

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
     <!-- Related Posts with Thumbnails Code Start--> 
     <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_thumbs&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> 
     <script type='text/javascript'> 
     var currentposturl=&quot;<data:post.url/>&quot;; 
     var maxresults=8; 
     var relatedpoststitle=&quot;<b>Related Posts :</b>&quot;; 
     removeRelatedDuplicates_thumbs(); 
     printRelatedLabels_thumbs(); 
     </script> 
     </div><div style='clear:both'/> 
     </b:if> 
     <!-- Related Posts with Thumbnails Code End-->

8--> Save your Template and Done.

photo credit: Bob AuBuchon via photo pin cc

I started off this blog with default Picture Window template of Blogger. I avoided using any kind of custom blogger template available all over web freely. It is a good idea if you are new to Blogger and want to learn all about Blogger. As I am new to Blogger and want to learn everything about Blogger so to develop my skills in this field I chosed a default Blogger template . If you know HTML and CSS, you can customize your template very easily anytime.


Knowledge is gained by experimenting and I never sit behind when it comes to doing something new and innovative things. So why should we give credit to others by using their customized Blogger templates when we can create our own templates for our Blogger blog.

Before doing any editing or tweaking task of your HTML code, remember to save and backup your existing template so that if anything goes wrong in your template you can switch back to your earlier state without any effort. Just play with codes to customize your template and design it to have an excellent look of your blog that attracts your visitors eyes.

For more Blogger Tutorials you can check out Blog Tips And Tricks.

And there is always the free web to get help whatever you want.