Add floating navigation bar with older & newer posts, reload, home and back to top button

This is a very cool widget that allows visitors to navigate through your blog easily.
It has 5 options:

1. Go to Older Posts
2. Go to Newer Posts
3. Reload Page
4. Home
5. Back to top

How to add this widget

Step 1. Go to Blogger Dashboard >> Design >> Edit html and find the tag below

]]></b:skin>

Step 2. Paste before/above the following code:

#float-menu{position:fixed;top:20%;left:0;border-top:1px solid #CCC;border-right:1px solid #CCC;border-bottom:1px solid #CCC;background:#EEE}
#float-menu ul{padding:0}
#float-menu li{margin:5px;list-style-type:none}
#float-menu li,#float-menu li a{width:24px;height:24px}
#float-menu li a{float:left}
#float-menu #menu-right,#float-menu #menu-left,#float-menu li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3YGXmFK9SClGICVdL-_VuY1FwMZIFZxw8az-JsBVnZb4LtKd6H9-dsejdadV7lw8ccYQTVZAQPytBwMmc47-eCEn_eNXGcmFnGT9btA9CNkSW889ZcnGea4-VEMCBBl2Rl1RuVygRmc_f/s1600/float+menu.png)}
#float-menu #menu-right a{background-position:0 -120px}
#float-menu #menu-right a:hover,#float-menu #menu-right{background-position:-24px -120px}
#float-menu #menu-left a{background-position:0 -24px}
#float-menu #menu-left a:hover,#float-menu #menu-left{background-position:-24px -24px}
#float-menu #menu-random a{background-position:0 -48px}
#float-menu #menu-random a:hover{background-position:-24px -48px}
#float-menu #menu-home a{background-position:0 -72px}
#float-menu #menu-home a:hover{background-position:-24px -72px}
#float-menu #menu-top a{background-position:0 -96px}
#float-menu #menu-top a:hover{background-position:-24px -96px}

Step 3. Now find this tag:

<b:includable id='main' var='top'>

Step 4. Just after it, add the code below:

<div id='float-menu'>
<ul>
<li id='menu-right'>
<b:if cond='data:olderPageUrl'>
<b:if cond='data:olderPageUrl != data:blog.url'>
<a expr:href='data:olderPageUrl' rel='prev' expr:title='data:olderPageTitle'></a>
</b:if>
</b:if>
</li>
<li id='menu-left'>
<b:if cond='data:newerPageUrl'>
<b:if cond='data:newerPageUrl != data:blog.url'>
<a expr:href='data:newerPageUrl' rel='next' expr:title='data:newerPageTitle'></a>
</b:if>
</b:if>
</li>
<li id='menu-random'>
<script type='text/javaScript'>//<![CDATA[
var rdp_current=0;total_posts=0;function totalposts(json){total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){rdp_current=1+Math.round(Math.random()*(total_posts-1))};
//]]></script>
<script type='text/javaScript'>//<![CDATA[
function rdp(json){var dw='';entry=json.feed.entry[0];for(var i=0;i<entry.link.length;i++){if(entry.link[i].rel=='alternate'){rdp_posturl=entry.link[i].href}};dw+='<a href="'+rdp_posturl+'" title="Reload" rel="nofollow"></a>';document.getElementById('menu-random').innerHTML=dw;};getvalue();document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current+'&max-results=1&callback=rdp\"><\/script>');
//]]></script>
</li>
<li id='menu-home'>
<a expr:href='data:blog.homepageUrl' title='Home'/>
</li>
<li id='menu-top'>
<a href='#' title='Back to top' rel="nofollow"/>
</li>
</ul>
</div>

I hope you like it.
Please share & subscribe for more tutorials.

How to submit your Blogger Sitemap to Google

What are Sitemaps?

Sitemaps are text files containing a list of all web pages that exist on your website and are accessible to crawlers and users. These helps visitors and search engine bots to find pages on website. Sitemaps are a way to help Google indexing pages on your site which otherwise might not be discovered.

If your blog is hosted on blogspot.com (or if you are using a self-hosted version of Blogger with a custom domain) you will be surprised to find out that the default sitemap file, contains only the 26 most recent pages of your blog which in normal case should contain all URLs of a website.

Many webmaster pretend to teach others how to drive traffic to blogs or websites yet leaving out the most important factors like sitemaps. There are still other websites who keep on providing the old methods of generating a sitemap for blogger which are not any effective.

How to add a complete Sitemap for your Blogger Blog

Step 1: If you haven't done this already, sign-in to your Google Webmasters account and add your blog. For details, check this tutorial on how to add a blog to Google.

Step 2: Once your blog is added to Google, go to Webmaster Dashboard  and click on your site address

Step 3:  On the left panel choose Site Configuration >> Sitemaps - then click on Add sitemap.

Add each of the following codes

/atom.xml?redirect=false&start-index=1&max-results=500
/atom.xml?redirect=false&start-index=501&max-results=500
/atom.xml?redirect=false&start-index=1001&max-results=500

If your blog have lots of pages, add the sitemaps below:

atom.xml?redirect=false&start-index=1001&max-results=500
atom.xml?redirect=false&start-index=1501&max-results=500
atom.xml?redirect=false&start-index=2001&max-results=500
atom.xml?redirect=false&start-index=2501&max-results=500
atom.xml?redirect=false&start-index=3001&max-results=500

Add Your Blogspot Blog to Google

1) Login to your Google Webmaster Tools account.

2) Press the red button “Add a site” at the top of the screen.

3) Enter the URL address of your blog (for example http://my-site.blogspot.com/) and press Continue

4) Select the method you would like to use to verify ownership.
You can either upload an HTML file with a name we specify (which is not possible with Google Blogger account), or you can add a META tag to your site's index file.


Choose Alternate Methods:

5) Under Alternative Methods Click Add a meta tag to your site’s home page.

6) Copy the Meta tag Code generated.

7) Open a new tab and login into your blogger account.

8) Go to Design >> Edit HTML and search (CTRL + F) for the following tag:

<head> 

9) Just below it paste the META code and Save Template.

10) Switch to Google Webmaster Tools tab and press on the "Verify" button.

Now your site is added to sitemap account and verification is done.

Style blogspot blogger date header

I got the inspiration to style and design blogspot date from a wordpress website and tried with very simple css adjustment to make the date header floats left side of webpage and to be partially out of the structure like a banner with colorful appearance. You can see the result in the image below:

How to style the blogspot date header

Step 1. Login into your Blogger Dashboard, go to Design >> Edit HTML
Step 2. Check to Expand Blogger Template and search for the following code:

date.header

Or...

.date-header

You will find something similar:

.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);

Step 3. Add the code below just after it:

background:white;
border-bottom: 1px solid #000000;
font-size:12px;
margin-left:-105px;
padding:3px 3px 3px 3px;
width:90px;
word-wrap:break-word;
float:left;
}

Putting it all together, will look something like this:

.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
background:#FFD465;
border-bottom: 2px solid #cc0000;
color:#000000;
font-size:12px;
margin-left:-105px;
padding:3px 3px 3px 3px;
width:90px;
word-wrap:break-word;
float:left;}

To modify the style, replace the bolded tags for....

the background color:

• #FFD465: replace with the hex code of the color you want

border:

• delete -bottom if you want full border 
• change: 2px to a higher or lower value
• change: solid with dotted if you want a dotted line
• change:  #cc0000 with the hex code of border color

font size and date color:

• if you want a bigger text, change: 12px to a higher value
• color: replace the hex code (#000000) with the hex of date color

Example:

color: #0000cc;

margin-left: 
(the distance between date and blogger post)

• change:  -105px to a bigger or smaller value, to make it fit with the blogger post

float

• change left to right

You can do a lot of changes. Just play with the codes and see what you can get.

Display post author, date, labels and comments with icons below post titles

In this post, i will show you how to add default Author Name, Post Date, Labels and Comments with some little icons to the left of each other. You can see under each of my post title, some details like author name, time when posts have been published, labels and the comment count links. When there are no comments posted the link says 'Be the First to comment!' and when there is just one comment it says '1 comment so far'. This is a nice hack that will make your blog look beautiful and professional.

Let's start adding the codes.

Step 1. Go to Blogger Dashboard > Edit HTML (for safety, backup your template)

Step 2. Check the "Expand widgets templates" box

Step 3. Search for this code:

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

If you can't find it, look for this one:

    <div class='post-header'>

Step 4. Paste  the following code below/after the code above:

<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS7pKY_QCyPNydAsTIZdabDcpJViy4jhQlcQxdJiX1q-k2VDIu6HlVkWOHpUuM4av12qZzAjv9i5QnCG5svw0SKPmyYPUQZ2g1i1-b2gDixiffsoLeNhvOmxLADq5IIlpWpSVCSu6A84I9/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie0pMTXCT8IX2FvLGWNgQDNLmnEIleGz6MfBWELKOTYvoLko5Nwo1n9Ts0BjUgtmI_iJGvZsj9nNAcXF855ZLV4hsSNrte9R-2nGO1QCWdbUA_Ovlpf3UuWjTiizmiYcMv9hyg8hw741A2/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxufdbmnZ6kCy7_slc2y9ZU9wWpYHi2RidrOuC7Wf2a5Vq6UtagzCdk2g1StbSdUEY9_7OQlwcOjKGwypswAIHtWvDiSg3p-gaFFk2XvIIQE2irQC0bVSu8QPUVG_jPuYjgNjFU4cgrRIO/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></font>
<span class='post-comment-link' style='Float:right;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF_0reKk27h-5GNcIOtEyB3uh2G1KKp0uhCyUZnzLsGNQIRtmkJhJW-DfOHLRxxlLf-ODDxuLzLL3UMEyK9UsmyggkOvvXrAOM5NTBLePsp2BwU6xuGlBaOmRO6I7T7HZdm755joljXyr7/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
          </b:if>
        </b:if>
      </span>

Details that can be customized:
Replace the code in:

Red (Author)

Green (Date)

Blue (Labels)

Violet (Comment bubble)

... with the URL address of your image.

Step 5. Save template... and you're done!

How to remove/delete labels from Blogger posts

If you want to hide labels from blogger post footer (or below post title), it is a very easy thing to do.
Sometimes labels can be unnecessary if you already have them in the blogger sidebar.
How we gonna do it?

Hide labels from Blogger

Step 1. Click 'Layout' tab and go to the 'Edit HTML' Subtab.
First of all, backup your current template to be assured that you won't lose or delete something erroneously (to do that > click download full template)
Step 2. Check 'Expand Widget Templates' option to expand the CSS code.
Step 3. Find the following code in your template.

<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 != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>

Step 4. Delete this portion from your template.
Step 5. Save Template. And you're done ;)

How To Remove Blogger Navbar

WHAT IS BLOGGER NAVBAR?
Blogger has got a default Navigation Bar. This navigation bar is hidden in most of the third party templates.
When you are blogging, Navbar can be very useful thing, but sometimes, it can get in way...

The advantages of Navbar are:
- when you click on the B icon, it will take you to blogger.com
- a quick link to your Dashboard and "Sign in /Sign out" dialog
- you can easily search for other blogs
- you can "Flag Blog" (if you consider content of a blog objectionable)
- NextBlog - takes you to a random, recently-updated Blogger blog

The only disadvantage is visual. If you have customized design, Navbar usually doesn't fit in.

So how we get rid of it? It is very simple...

Removing The Blogger Navbar:

1. Login to your Blogger account and navigate to Layout > Edit HTML

2. In the template code find the following tag:

<body> 

If you can't find it, search for the code below:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

3. Just above that paste the following Code:

<!--<body>-->

4. Now Save the Template and you will see a confirmation about deleting the Navbar Widget. Confirm the deletion by clicking on the Delete Widgets button.

How to get back the Blogger Navigation Bar?

If you followed this method to remove the nav bar and you want it back, then delete the extra code that you added, i.e remove the code from step 3, that you added into your template and press Save the Template.

You're done.