MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

seo Fading Box With Newer/Older Posts Links and Titles for Blogger 2013

Seo Master present to you: The navigation links are those that appear at the bottom of the page that says "Older Posts", "Newer Posts" and "Home" and help us to move through the blog posts. This tutorial will show you how to change the word "Older Posts" and "Newer Posts" for post titles and make these to appear in a box "fading" when you scroll down the page.

You can see it in action on this demo blog - when you scroll down, the navigation links will appear showing the post titles for the older/newer entries.

This way to display the navigation links will be seen only in individual entries, while those on the homepage and other parts of the blog will still be displayed as usual.

How to Add Navigation Box with Newer & Older Posts on Blogger

Step 1. From your Blogger Dashboard, go to Template > Edit HTML, click anywhere inside the code area and search - using CTRL + F - for this line:

<b:include name='nextprev'/>

Screenshot:

Step 2. REPLACE the code above with this one:

<b:if cond='data:blog.pageType != "item"'>
<b:include name='nextprev'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='blog-pager-box'>
<h4>Other posts published:</h4>
<b:include name='nextprev'/>
</div>
</b:if>

Note: you can change the "Other posts published" title with your own

Step 3. Now add just above </head> the following code:

<b:if cond='data:blog.pageType == "item"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
// <![CDATA[
$(function() {
$('#blog-pager-box').toggle()
.css({
width: '520px',
height: '150px',
position: 'fixed',
padding: '1em',
bottom: 0,
right: 0,
background: 'url(http://www.matrixar.com/-2qUvFgMRqk4/UaD7GSA7C8I/AAAAAAAADbI/eh-qGOnAmeM/s1600/paper.jpg)'
});

$(window).scroll(function() {
if($(this).scrollTop() > 100) {
$('#blog-pager-box').fadeIn();
} else {
$('#blog-pager-box').fadeOut();
}
});
});
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$(".blog-pager-newer-link").html("<div>Newer Posts:</div>" + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$(".blog-pager-older-link").html("<div>Older Posts:</div>" + olderLinkTitle);
});
});
// ]]>
</script>

<style type='text/css'>

</style>
</b:if>

Note that this gadget uses jQuery, so try to have only one version.

Customization:

- There are three URLs in blue, the first is the paper background image for the box, the other two are the icons that correspond to the arrows. You can replace these with your own.
- In green you can see where to change the text colors.
- The red number is the distance in pixels that activates the gadget, this means that the box will appear when you scroll down the 100px. You can use a higher value if your posts are usually long and therefore the "height" of the scroll is greater.

Step 4. Now, Save the Template and that's it!

You can also change the "Older Posts" and "Newer Posts" links with posts titles or images. 2013, By: Seo Master

seo How To Add A Tabbed Navigation Widget to Blogger 2013

Seo Master present to you: The tabviews are elements that allow us to group in a single container various gadgets and these can be selected via tabs.
Its main function is to save space on the blog to avoid scattered gadgets in the same category so you can group multiple gadgets into one. There are several methods for creating tabviews, some require jQuery, other MooTools, or any other script.

To add this widget to your blog, just follow the steps below:

Step 1. From your Blogger Dashboard, go to Template and click on the Edit HTML button

Step 2. Expand the style of the template, by clicking on the sideways arrow before <b:skin> ... </b:skin>

Step 3. Search using CTRL + F for the following tag:

]]></b:skin>

Step 4. Just above it, add the following code:

/* Tabview for Blogger
----------------------------------------------- */
.tabviewcont{
margin:15px 0;
padding:0;
clear:both;
}

.tabviewnav {
margin: 0 0 0 14px;
padding:3px 0; /* If you are using a Blogger Template change 0 with 15px */
font-size:12px; /* Font size of text inside tabs */
font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#F6F6F6; /* The background color of the tabs */
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
text-decoration:none;
color:#222222;
}
.tabviewnav li a:hover {
color:#222222;
background:#EBEBEB; /* Background color of the tab on mouseover */
text-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#EBEBEB; /* Background color of the active tab */
color:#222222;
}
.tabviewcont .tabviewtab {
padding:5px;
border:1px solid #EEEEEE; /* Border around the container */
background:#fff; /* The background color of the gadget */
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}

Step 5. Find the </head> tag and just above it, paste this script:

<script type='text/javascript'>
// Tabview for grouping gadgets

//<![CDATA[
document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabviewObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}
//]]>
</script>

Step 6. Finally, look for this line:

<div class='column-right-inner'>

Or if you use an old template of Blogger, search this line:

<div id='sidebar-wrapper'>

Step 7. Paste below one of these two lines, this code:

<div class='tabview'>
<b:section class='tabviewtab' id='Tab1' maxwidgets='1'/>
<b:section class='tabviewtab' id='Tab2' maxwidgets='1'/>
<b:section class='tabviewtab' id='Tab3' maxwidgets='1'/>
</div>

Step 8. Save changes, and go to Layout and there you will see the new areas to add gadgets.

You just have to click on Add a Gadget to add the gadget to the tab that corresponds, or drag a gadget you already have to that section.

If you want to add more tabs, then just add before the last </div> a line like this:

<b:section class='tabviewtab' id='Tab4' maxwidgets='1'/>

Note that each line you add should have a different ID, for example Tab5, Tab6, etc..

You can add multiple tabs, just repeat the last step and likewise remember to change the name of the IDs.

Remember that if your sidebar is too narrow, then you should not put a lot of tabs, or tab titles that are very long.

You should also note that this gadget does not speed up the loading speed of the blog, is only to group gadgets into one, even, depending on the blog-may take a while to load the tabview.2013, By: Seo Master

seo A Beautiful jQuery Drop-Down Menu For Blogger Blogspot 2013

Seo Master present to you: Alright, this time, we are going to make a stylish and simple jQuery drop down menu. The main objective is to make it as simple as possible, with some little jQuery effect and easy to customize/ apply different style on it. To style it into your own design, you just have to modify the a tag CSS style. You can change colors or put background images, or the size and color of text.

Steps Adding the jQuery Drop-Down menu

Step 1. Go to Dashboard - Template - Edit HTML - Proceed

Step 2. Expand Widget Template (make a backup)

Step 3. Search for the following code:

]]></b:skin>

Step 4. Add the following CSS code before/above it:

#jsddm {
height: 40px;
margin: 0;
overflow: visible;
z-index: 2;
padding: 15px;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

Step 5. Now find this piece of code:

</head>

Step 6. Add this code immediately before/ABOVE it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
//]]>
</script>

Step 7. Click on Save Template button.

Step 8. Go to Layout > click on "Add a gadget" link

Step 9. Choose HTML/JavaScript from the pop-up window

Step 10. Paste the following code in the empty box:

<ul id="jsddm">
<li><a href="#">Home</a>
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Drop 1-1</a></li>
<li><a href="#">Drop 1-2</a></li>
<li><a href="#">Drop 1-3</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Drop 2-1</a></li>
<li><a href="#">Drop 2-2</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Drop 3-1</a></li>
<li><a href="#">Drop 3-2</a></li>
<li><a href="#">Drop 3-3</a></li>
<li><a href="#">Drop 3-4</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</li></ul>

Note :

You must change links titles and replace the # symbol with the URL address of each of your links

Step 11. Click on Save

Important:

- if your menu is on the sidebar, or footer, just drag it to your page header and click and click Save again.
- if drop down links are not showing, do the following:

Go back to Template > Edit HTML and search (CTRL + F) for this code:

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

You should change 1 with 3 and no with yes like this:

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

Save the Template.

Next thing to do is to go to Layout and drag your menu immediately below your header

Then click on Save Arrangement

Here you can see the DEMO.

Enjoy! :)

2013, By: Seo Master

seo How to Replace Older Posts and Newer Posts Links with Blogger Post Titles 2013

Seo Master present to you: If you have ever visited a WordPress blog, you might have noticed that the blog pager on these blogs displays the actual post titles, not just links to the older and newer posts that you find at the bottom of your Blogger blog. This links are parts of the so-called blog pager which helps readers navigate between pages and posts.

If you want to increase your page impressions, one of the ways is to replace the older/newer posts links with the Blogger post titles.

How To Add Post Titles Instead of Older Post/Newer Post Link

Step 1. Log in to Blogger, go to Layout and click on "Add A Gadget" link

Step 2. From the pop-up window, choose "HTML/JavaScript"

Step 3. Paste the following code into the empty field of the HTML/JavaScript gadget:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link:first").text();
$("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
</script>

Note: The line in red is for acquiring jQuery framework. If you have acquired jQuery in your template, then you can just delete this part.

Step 4. Now Save the Widget and drag it under the Blog Posts section.

Step 5. Click on Save arrangement.

Now view your blog and see the older/newer posts link, replaced with your post titles.

For any questions, leave a comment below.

2013, By: Seo Master

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

Seo Master present to you: 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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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

blogger tricks, older posts, newer posts

3. That's it! Preview and Save the Template.2013, By: Seo Master

seo Add Css/Jquery fixed horizontal menu to blogger blog 2013

Seo Master present to you: This navigation bar gets semi-transparent when you scroll down the page and is slightly showing up by fading out and becoming almost transparent. When the user hovers over it, the menu becomes opaque again.

Inside of the navigation there are some links, a search input and a top and bottom button that allows the user to navigate to the top or bottom of the page.

-> SEE DEMO <-

Let's start adding it...

1. Go To Blogger - Template - Edit HTML

....and select the "expand widget templated" box:

2. Search (using CTRL + F) for this piece of code:

</head>

3. Just above/before the </head> tag, add this code:

<link rel="stylesheet" href="http://helplogger.googlecode.com/svn/trunk/html/[www.matrixar.com]Fixed Fade Out Menu.css"/>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/html/[www.matrixar.com]jquery-1.3.2.js"></script>
<script type="text/javascript">
            $(function() {
                $(window).scroll(function(){
                    var scrollTop = $(window).scrollTop();
                    if(scrollTop != 0)
                        $('#nav').stop().animate({'opacity':'0.2'},400);
                    else
                        $('#nav').stop().animate({'opacity':'1'},400);
                });

                $('#nav').hover(
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'1'},400);
                        }
                    },
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'0.2'},400);
                        }
                    }
                );
            });
        </script>

4) Now search for this tag:

<body>

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

<body expr:class='"loading" + data:blog.mobileClass'>

5) Just below/after this code, copy and paste the following code:

<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a href='URL address'><span>Link 1</span></a></li>
<li><a href='URL address'><span>Link 2</span></a></li>
<li><a href='URL address'><span>Link 3</span></a></li>
<li><a href='URL address'><span>Link 4</span></a></li>
<li><a href='URL address'><span>Link 5</span></a></li>
<li><a href='URL address'><span>Link 6</span></a></li><li class="search">

<input type="text"/><input class="searchbutton" type="submit" value=""/>
</li>
</ul>
</div>
<div id="top"></div>
<div class="desc"></div>
<div id="bottom"></div>
<div class="scroll"></div>

Note: Replace URL address with the URL of your pages and Link 1, 2, 3, 4, 5, 6 with the name of the link that will appear in the menu.

6) Now click on the Save Template button and you're done ;)

Credit goes to the original author. This widget was inspired by David Walsh’s top navigation bar.2013, By: Seo Master

seo How To Remove Blogger Navbar 2013

Seo Master present to you: WHAT IS BLOGGER NAVBAR?
Blogger has got a Navigation Bar that appears by default at the top of every Blogger-powered blog. This navigation bar can be very useful when you are blogging, but sometimes, it can get in the way. The Blogger navbar is usually hidden in most of the third party templates.

The advantages of it are the following:

- 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 just doesn't fit in.

So how we get rid of it? It is very simple. Just follow the next steps...

Removing The Blogger Navbar:

1. Login to your Blogger account, click on your blog name and navigate to Layout;

2. Look for the Navbar text and click on the Edit link as shown in the picture below:

3. When the pop-up window appears, scroll down and select Off, then click on Save button:

You're done. 2013, By: Seo Master

Design by Dev Nasser