Freedom For Blogging Tricks: 2013

Navigation bar is a most useful section of a web or blog site, because it help visitors to navigate through your posts easy. When we talking about Google adsense program they mostly consider about easy navigation of your blog/web site. But most of the time when we scroll particular page down site navigation bar is hidden.

In past I wrote article about How To Create Animated Recent Posts for Blogger with Thumbnails, Recent Posts Widget for Blogger Text CSS Hover Effect and Related post widgets with thumbnails so in this article I decided to teach how to create a floating Navigation bar. Specially this navigation bar contain 

Back button
Previous button
Home button
Refresh button
Back to top button

 Follow these steps to add this navigation bar to your blog too.

Step 01 - Log in to your blogger account and then dashboard

Step 02 - Select Design and then Edit html

Step 03 - Find below code

]]></b:skin>

Step 04 - Past Below code above the ]]></b:skin> 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/AVvXsEg-o_y3TwEjgywGWkEJXfXCU2XnmqrbcfxF6tM_iBXGpyqdmSV4GJGN4k3T0JC57_jTMWKqQ7vDMi6Z53y1GvUEFM4jpM3bPO4Ir2R70oNH0X8CVCMn_Qgb2ThoMlZyORUp_HgbKFgN_obE/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 05 - Find this code

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

Step 06 - Past below code just after above code.

<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>

Step07 - Save template and Check your blog.

Comment on this post if is it useful.

Recent Posts Widget by Freedom For Blogging Tricks

This is a live demo of my recent post. In here I have ad my blog address to the home page so you need to change home page to your blog address.

Page/post meta tags describes that what the page or post actually contains. It makes the search engine to crowel your blog more frequently and index your pages in blog fastly.

Follow below steps to add meta tags to individual posts in blogger :

step 1 : Log in to your blogger account and go to blogger dash board

step 2 : click on template and click on edit template.

Step 3 : Find below link in template code

<b:include data='blog' name='all-head-content'/>

Step 4 : Copy past below code, below the above code

<b:if cond='data:blog.url == "url link of your post"'>

<meta content='DESCRIPTION' name='description'/>
<meta content='KEYWORDS' name='keywords'/>
</b:if>

step 5 :click on save

Remmemer to past your post/page description in DESCRIPTION section and keywords in KEYWORDS section 

Meta description describes what about the content of your blog and search engine can easily recognize/find your blog through meta description.Before add meta description to individual posts on blogger, first we have to enable meta description to blogger.

We give you tutorial of Meta tags inserting in blogger template. You can put Meta tags in Blogger template for better ranking in search engine with follow easy steps.

Step 1: Login to Blogger > Go to Dashboard > Template > Edit Html

Step 2: Search <head> section in Template from Ctrl+F.
 
Step 3: After <head> section put following code in your template.

 <meta content='Your Blog Description' name='description'/>
 <meta content='Keyword1,Keyword2,Keyword3' name='keywords'/>
 <meta content='Author Name' name='Author'/>
 <meta content='Author Email Address' name='Email'/>
 <meta content='all' name='robots'/>
 <meta content='index, follow' name='robots'/>
 <meta content='Language Name' name='language'/>
 <meta content='Country Name' name='country'/>
 <meta content='blogger' name='generator'/>

Step 4: Change you original data to demo data as your need.
Step 5: Save your template and Go to your blog, view page source to see your description and keyword.

You can also add meta description to each posts and pages on your blogger blog. After enable search description in your blogger settings then all posts and pages have search description option.You can see search description option below posts settings right side to your posts editor. You can add meta description to your blog posts and pages while publishing or after publish.So after adding meta description to your blog , add meta description to all posts in your blogger.

After adding meta description to your blog , meta description will appear in search results as snippet.If meta description not appear in search results then add meta description using tags to your blogger template.

Blog Commenting is a great way to increase blog traffic by getting back links from other blogs to your blog.To get back links from blogs you have to put links in blog comments.In general typing you can not type word with link in a comments box. So This post will help you to add your blog URL links in blogger comments.

Some blogs shows website/blog column in the comment form and some will not show  URL option to enter your blog URL.If the URL option
is there in the blog comment for , it is easy to put you blog/website link in the comment, but if the URL option is not available in the comment form , you have to manually put your URL link in the comment text using anchor tag.

Follow the below simple steps to  to put links in Blogger comments

step 1 : visit blogger blog post on which you want to put links

step 2 : click on comment

step 3 : click on down arrow in comment as and select Name/URL

step 4 : Post comment, give Name and URL click on continue.

step 5 : click on publish

Go to blog where you post comment and click on your name in comment then it will go to that link which you added in blog comment. We have to manually put your blog URL link in the comment message if it doesn't has URL option in the comment form.

  * Go to blog on which you have to comment.
  * Click on comment
  * Write comment and use below anchor tag

          <a href="your blog URL link"> some comment message</a>

  * Click on publish

Sponsors

Popular Posts

Followers

Labels

Recent Comments

About Me

Blog Archive

Contact Form

Categories

Visitors