Create A Blogger Template From Scratch

The Navbar (Top Navigation Bar) is one of the most important elements in any Blogger template, because it is responsible for:

Organizing pages and sections
Making navigation easier
Improving user experience
Increasing visitor trust in your website

In this lesson, we will explain the concept of designing the Navbar used in the template.
The full code implementation is explained step-by-step inside the video.

🔹 What is the function of the Navbar in Blogger?

The Navbar helps visitors to:

Quickly access important sections
Easily navigate between pages
Understand the website structure from the first visit

It also plays an important role in:

Improving SEO
Reducing bounce rate
Increasing session duration

🔧 How to Create a Navbar in Blogger

In this lesson, we used:

The Links gadget from the Layout section in Blogger
No external plugins
No complexity

Steps include:

Adding section links
Organizing them inside the menu
Controlling their appearance through the template

📌 Note

All the code used in designing the Navbar is fully explained in detail inside the video attached to this lesson.

🎨 Features of the Navbar in This Template

The Navbar designed in this course includes:

Modern and clean design
Fully responsive layout
Smooth transitions
Easy customization from Blogger dashboard
Google AdSense friendly

📱 Fully Responsive Design

The Navbar is designed to:

Work efficiently on mobile devices
Display properly on tablets
Be clear and easy to use on desktops

This ensures the best possible user experience.

✅ Fully Compatible with Google AdSense

The design takes into consideration:

Not disturbing the user
Avoid placing ads inside the menu
Following Google AdSense policies

This makes the template safe for monetization without future issues.

📥 Download & Live Preview

Download & Preview

💻 Used Codes

1- Template Reset Code (Clean Template Before Starting)



<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<b:section id='main'/>
</body>
</html>

2- Blank Template for Writing Code



<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:layoutsVersion='3' lang='en' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>

<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<!-- Page Title -->
<title><b:if cond='data:view.isHomepage'><data:blog.title/><b:elseif cond='data:blog.pageType == "error_page"'/>خطأ 404 | <data:blog.title/><b:elseif cond='data:view.isSingleItem'/><data:blog.pageName/><b:elseif cond='data:blog.pageName == ""'/><data:blog.title/><b:else/><data:blog.pageName/> | <data:blog.title/></b:if></title>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/> 
<!-- Blogger Default -->
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<meta content='blogger' name='generator'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<meta expr:content='data:blog.locale' http-equiv='content-language'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.canonicalUrl' itemprop='url' rel='canonical'/>
<meta expr:content='data:view.description.escaped' name='description'/>
<link expr:href='data:blog.postImageUrl' rel='image_src'/>
<b:eval expr='data:blog.openIdOpTag'/>
<b:if cond='data:blog.adultContent'><meta content='adult' name='rating'/></b:if>
<meta expr:content='data:skin.vars.keycolor' name='theme-color'/>
<meta expr:content='data:skin.vars.keycolor' name='msapplication-navbutton-color'/>
<b:eval expr='data:blog.feedLinks'/>
  
<!-- Open Graph --> 
<b:switch var='data:blog.locale'><b:case value='en-GB'/><meta content='en_GB' property='og:locale'/><b:case value='da'/><meta content='da_DK' property='og:locale'/><b:case value='pt-PT'/><meta content='pt_PT' property='og:locale'/><b:case value='he'/><meta content='he_IL' property='og:locale'/><b:default/><meta expr:content='data:blog.locale + "_" + data:blog.locale' property='og:locale'/></b:switch>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:view.isMultipleItems'>
<b:if cond='data:view.isHomepage'><meta expr:content='data:blog.title' property='og:title'/>
<b:else/><meta expr:content='data:blog.pageName + " | " + data:blog.title' property='og:title'/></b:if>
<b:else/><meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta expr:content='data:view.description.escaped' property='og:description'/>
<b:if cond='data:view.isMultipleItems'>
  <meta content='website' property='og:type'/>
  <meta content='' property='og:image'/>
<b:else/>
  <meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' property='og:image'/>
  <meta content='article' property='og:type'/>
  <meta content='' property='article:publisher'/> 
  <meta content='' property='article:author'/>
</b:if>
<meta content='' property='fb:app_id'/>
<meta content='' property='fb:admins'/>
  
<!-- Twitter Card --> 
<b:if cond='data:view.isMultipleItems'>
<b:if cond='data:view.isHomepage'><meta expr:content='data:blog.title' name='twitter:title'/>
<b:else/><meta expr:content='data:blog.pageName + " | " + data:blog.title' name='twitter:title'/></b:if>
<b:else/><meta expr:content='data:blog.pageName' name='twitter:title'/>
</b:if>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:view.description.escaped' name='twitter:description'/>
<b:if cond='data:view.isMultipleItems'>
<meta content=''/> 
<b:else/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/> 
</b:if>
<meta content='' name='twitter:site'/>
<meta content='' name='twitter:creator'/>
  
<!-- DNS Prefetch --> 
<link href='//www.blogger.com' rel='dns-prefetch'/><link href='//1.bp.blogspot.com' rel='dns-prefetch'/><link href='//2.bp.blogspot.com' rel='dns-prefetch'/><link href='//3.bp.blogspot.com' rel='dns-prefetch'/><link href='//4.bp.blogspot.com' rel='dns-prefetch'/><link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/><link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/> 
  
<b:skin><![CDATA[

/* ===========================================================
 # Template    : Allito App
 # Version     : 3.5
 # Updated     : 1 March 2026
 # Developer   : Alaa Makkawi
 # URL         : https://allitoappmarket.blogspot.com/
 * ============================================================ */
/* ==================== 
 * CSS RESET
 * ==================== */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:system-ui;}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
img{max-width:100%;}
a{color:inherit;text-decoration:none;}
.section{margin:0;padding:0;}
.widget{margin:0;padding:0;line-height:unset;}
.widget li, li{margin:0;padding:0;text-indent:0;}




]]></b:skin>

<b:template-skin>

<![CDATA[

<!-- CSS code to style Layout options ---!>

]]></b:template-skin>

</head>

<body>








<!-- Footer Start -->

<footer>

<b:section class='footer' id='footer' showaddelement='yes'/>

</footer>



</body>

</html>

3- Search Bar & Navbar Script

Step 1: Add this before </head>



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

Step 2: Add this at the end of HTML



<form action='/search' id='search-box' target='_top'>
  <input name='q' placeholder='Search.....' type='search'/>
  <span class='close-btn' onclick='searchoff()'>×</span>
</form>

Step 3: Add this before </body>



<script>
    function menuon(){
    document.getElementById("LinkList1").style.left = '0';
    }
    
    function menuoff(){
    document.getElementById("LinkList1").style.left = '-100%';
    }  
      
      
      function searchon(){
      document.getElementById("search-box").style.right = '5px';
      }
      
    function searchoff(){
      document.getElementById("search-box").style.right = '-100%';
     }   
</script>  
<script type='text/javascript'> 
 //<![CDATA[
 $("#dropmenu").each(function(){var e="<ul id='menu1'><li><ul id='sub-menu'>";$("#dropmenu li").each(function(){var t=$(this).text(),n=t.substr(0,1),r=t.substr(1);"_"==n?(n=$(this).find("a").attr("href"),e+='<li><a href="'+n+'">'+r+"</a></li>"):(n=$(this).find("a").attr("href"),e+='</ul></li><li><a href="'+n+'">'+t+"</a><ul id='sub-menu'>")});e+="</ul></li></ul>";$(this).html(e);$("#dropmenu ul").each(function(){var e=$(this);if(e.html().replace(/\s| /g,"").length==0)e.remove()});$("#dropmenu li").each(function(){var e=$(this);if(e.html().replace(/\s| /g,"").length==0)e.remove()})});
//]]>
</script>

4- Background Gradient



:root {
--bg:linear-gradient(45deg, hsl(352.1, 95.7%, 45.1%) 0%, hsla(352, 96%, 45%, 0) 70%), linear-gradient(135deg, hsl(252.9, 95.3%, 42%) 10%, hsla(253, 95%, 42%, 0) 80%), linear-gradient(225deg, hsl(179.1, 91.3%, 44.9%) 10%, hsla(179, 91%, 45%, 0) 80%), linear-gradient(315deg, hsl(119, 96%, 49%) 100%, hsla(119, 96%, 49%, 0) 70%);
}

5- Mobile Navbar CSS



@media only screen and (max-width:600px){
#header .menu-icon{display:block;padding-left: 25px;color:#fff;}
#header-section{display:block;}
#header ul{display:block;padding:0;}
#header h1{margin:0;}
#LinkList1{width:70%;position:fixed;top:0;padding:1em;background: linear-gradient(45deg, hsl(352.1, 95.7%, 45.1%) 0%, hsla(352, 96%, 45%, 0) 70%), linear-gradient(135deg, hsl(252.9, 95.3%, 42%) 10%, hsla(253, 95%, 42%, 0) 80%), linear-gradient(225deg, hsl(179.1, 91.3%, 44.9%) 10%, hsla(179, 91%, 45%, 0) 80%), linear-gradient(315deg, hsl(119, 96%, 49%) 100%, hsla(119, 96%, 49%, 0) 70%);height:100%;transition: 0.5s;z-index:99;left:-100%;}
.nav-head{display:block;padding:1em;}
.nav-head .menu-close{font-size:50px;position:absolute;top:0;right:0;text-align:center;width:50px;color:#fff;}
.nav-head h1{text-align:center;color:#fff;}}
@media only screen and (max-width:750px){
#header .menu-icon{display:block;padding-left: 25px;color:#fff;}
#header-section{display:block;}
#header ul{display:block;padding:0;}
#header h1{margin:0;}
#LinkList1{width:70%;position:fixed;top:0;padding:1em;background: linear-gradient(45deg, hsl(352.1, 95.7%, 45.1%) 0%, hsla(352, 96%, 45%, 0) 70%), linear-gradient(135deg, hsl(252.9, 95.3%, 42%) 10%, hsla(253, 95%, 42%, 0) 80%), linear-gradient(225deg, hsl(179.1, 91.3%, 44.9%) 10%, hsla(179, 91%, 45%, 0) 80%), linear-gradient(315deg, hsl(119, 96%, 49%) 100%, hsla(119, 96%, 49%, 0) 70%);height:100%;transition: 0.8s;z-index:99;left:-100%;}
.nav-head{display:block;padding:1em;}
.nav-head .menu-close{font-size:50px;position:absolute;top:0;right:0;text-align:center;width:50px;color:#fff;}
.nav-head h1{text-align:center;color:#fff;}
#header .fa-search{margin:0;cursor:pointer;margin-left:25px;}}
@media screen and (max-width: 880px){
#header .menu-icon{display:block;padding-left: 25px;color:#fff;}
#header-section{display:block;}
#header ul{display:block;padding:0;}
#header h1{margin:0;}
#LinkList1{width:70%;position:fixed;top:0;padding:1em;background: linear-gradient(45deg, hsl(352.1, 95.7%, 45.1%) 0%, hsla(352, 96%, 45%, 0) 70%), linear-gradient(135deg, hsl(252.9, 95.3%, 42%) 10%, hsla(253, 95%, 42%, 0) 80%), linear-gradient(225deg, hsl(179.1, 91.3%, 44.9%) 10%, hsla(179, 91%, 45%, 0) 80%), linear-gradient(315deg, hsl(119, 96%, 49%) 100%, hsla(119, 96%, 49%, 0) 70%);height:100%;transition: 0.8s;z-index:99;left:-100%;}
.nav-head{display:block;padding:1em;}
.nav-head .menu-close{font-size:50px;position:absolute;top:0;right:0;text-align:center;width:50px;color:#fff;}
.nav-head h1{text-align:center;color:#fff;}}
#LinkList1 h2{display:none;}

🔑 Conclusion

The Navbar is a core element in any professional template.

In this lesson, you learned:

The design concept
How to control it from Blogger
How to make it AdSense-friendly

For the full implementation and code explanation, check the video tutorial.

Menu

Allito App

Create A Blogger Template From Scratch - Top menu