
<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Navigation Bar Archives - TECHNIG</title>
	<atom:link href="https://www.technig.com/tag/navigation-bar/feed/" rel="self" type="application/rss+xml" />
	<link>https://168.138.42.164/tag/navigation-bar/amp/</link>
	<description>Gateway for IT Experts and Tech Geeks</description>
	<lastBuildDate>Mon, 21 Dec 2015 18:56:00 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.6.2</generator>

<image>
	<url>https://www.technig.com/wp-content/uploads/2020/04/32x32.png</url>
	<title>Navigation Bar Archives - TECHNIG</title>
	<link>https://168.138.42.164/tag/navigation-bar/amp/</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">162720667</site>	<item>
		<title>How to Customize Blogger Navigation Bar?</title>
		<link>https://www.technig.com/customize-blogger-navigation-bar/</link>
					<comments>https://www.technig.com/customize-blogger-navigation-bar/#comments</comments>
		
		<dc:creator><![CDATA[Shais]]></dc:creator>
		<pubDate>Mon, 21 Dec 2015 18:56:00 +0000</pubDate>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Blogger]]></category>
		<category><![CDATA[How to]]></category>
		<category><![CDATA[Navigation Bar]]></category>
		<guid isPermaLink="false">https://www.technig.com/?p=4666</guid>

					<description><![CDATA[<div style="margin-bottom:20px;"><img width="840" height="420" src="https://www.technig.com/wp-content/uploads/2015/12/Customize-Blogger-Navigation-Bar.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Customize Blogger Navigation Bar" decoding="async" fetchpriority="high" srcset="https://www.technig.com/wp-content/uploads/2015/12/Customize-Blogger-Navigation-Bar.jpg 840w, https://www.technig.com/wp-content/uploads/2015/12/Customize-Blogger-Navigation-Bar-300x150.jpg 300w, https://www.technig.com/wp-content/uploads/2015/12/Customize-Blogger-Navigation-Bar-768x384.jpg 768w" sizes="(max-width: 840px) 100vw, 840px" /></div>
<p>Customize blogger navigation bar of your blog to look better for readers. Do you know what a good blog needs is to be easy navigate by readers to finds their favorite topics quickly? Yes, it&#8217;s the point your blog need to have on header. Think as a blog reader, if you can&#8217;t search through the posts quickly and [&#8230;]</p>
<p>The post <a href="https://www.technig.com/customize-blogger-navigation-bar/">How to Customize Blogger Navigation Bar?</a> appeared first on <a href="https://www.technig.com">TECHNIG</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div style="margin-bottom:20px;"><img width="840" height="420" src="https://www.technig.com/wp-content/uploads/2015/12/Customize-Blogger-Navigation-Bar.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Customize Blogger Navigation Bar" decoding="async" loading="lazy" srcset="https://www.technig.com/wp-content/uploads/2015/12/Customize-Blogger-Navigation-Bar.jpg 840w, https://www.technig.com/wp-content/uploads/2015/12/Customize-Blogger-Navigation-Bar-300x150.jpg 300w, https://www.technig.com/wp-content/uploads/2015/12/Customize-Blogger-Navigation-Bar-768x384.jpg 768w" sizes="(max-width: 840px) 100vw, 840px" /></div><p>Customize blogger navigation bar of your blog to look better for readers. Do you know what a good blog needs is to be easy navigate by readers to finds their favorite topics quickly? Yes, it&#8217;s the point your blog need to have on header. Think as a blog reader, if you can&#8217;t search through the posts quickly and easily to find what interests you, probably you won&#8217;t be looking no more and won&#8217;t back again to blog. Don&#8217;t you? That&#8217;s all because of a bad navigation bar. So let&#8217;s simply customize blogger navigation bar with these simple guide.</p>
<h2>Customize Blogger Navigation Bar of  Your Blog</h2>
<p>There are many different ways to create and customize blogger navigation bar. But we are going to explain through the default templates of blogger. The default templates of blogger is SEO friendly and the <a href="https://gtmetrix.com/faq.html#faq-relative-score" target="_blank" rel="noopener noreferrer">page speed</a> is very fast than other templates or <a href="https://www.technig.com/free-wordpress-magazine-themes/" target="_blank" rel="noopener noreferrer">Theme</a>.</p>
<h2>1. Create Blogger Navigation Bar</h2>
<p>By default the blogger template currently doesn&#8217;t have navigation bar. You can add your blog tags as navigation bar or create a pages.</p>
<p><strong>1.</strong> From blogger settings navigate to <strong>Settings</strong>, <strong>Layout</strong> under <strong>Favicon</strong> gadget click <strong>Edit</strong> on <strong>Navbar</strong> gadget and turn of the default <strong>Navbar.</strong></p>
<figure id="attachment_4672" aria-describedby="caption-attachment-4672" style="width: 542px" class="wp-caption aligncenter"><a href="http://3.90.216.52/wp-content/uploads/2015/12/Blogger-Default-Navbar.jpg" rel="attachment wp-att-4672"><img decoding="async" class="size-full wp-image-4672" src="http://3.90.216.52/wp-content/uploads/2015/12/Blogger-Default-Navbar.jpg" alt="Blogger Default Navbar" width="542" height="81" srcset="https://www.technig.com/wp-content/uploads/2015/12/Blogger-Default-Navbar.jpg 542w, https://www.technig.com/wp-content/uploads/2015/12/Blogger-Default-Navbar-300x45.jpg 300w" sizes="(max-width: 542px) 100vw, 542px" /></a><figcaption id="caption-attachment-4672" class="wp-caption-text">Blogger Default Navbar</figcaption></figure>
<p><strong>2.</strong> Now <strong>Add a Gadget</strong> and from <strong>Gadgets</strong> select <strong>Labels </strong>and add it. Then drag and drop it to header on one of the<strong> Cross-Columns</strong>.</p>
<figure id="attachment_4674" aria-describedby="caption-attachment-4674" style="width: 1097px" class="wp-caption aligncenter"><a href="http://3.90.216.52/wp-content/uploads/2015/12/Add-Lable-Gadget-to-Blogger.jpg" rel="attachment wp-att-4674"><img decoding="async" class="size-full wp-image-4674" src="http://3.90.216.52/wp-content/uploads/2015/12/Add-Lable-Gadget-to-Blogger.jpg" alt="Add Lable Gadget to Blogger" width="1097" height="459" srcset="https://www.technig.com/wp-content/uploads/2015/12/Add-Lable-Gadget-to-Blogger.jpg 1097w, https://www.technig.com/wp-content/uploads/2015/12/Add-Lable-Gadget-to-Blogger-300x126.jpg 300w, https://www.technig.com/wp-content/uploads/2015/12/Add-Lable-Gadget-to-Blogger-768x321.jpg 768w, https://www.technig.com/wp-content/uploads/2015/12/Add-Lable-Gadget-to-Blogger-1024x428.jpg 1024w" sizes="(max-width: 1097px) 100vw, 1097px" /></a><figcaption id="caption-attachment-4674" class="wp-caption-text">Add Label  Gadget to Blogger</figcaption></figure>
<p><strong>3.</strong> The result should be like below header navigation bar screenshot.</p>
<figure id="attachment_4670" aria-describedby="caption-attachment-4670" style="width: 746px" class="wp-caption aligncenter"><a href="http://3.90.216.52/wp-content/uploads/2015/12/Customize-Blogger-Navigation-Bar-on-Header.jpg" rel="attachment wp-att-4670"><img loading="lazy" decoding="async" class="size-full wp-image-4670" src="http://3.90.216.52/wp-content/uploads/2015/12/Customize-Blogger-Navigation-Bar-on-Header.jpg" alt="Customize Blogger Navigation Bar on Header" width="746" height="109" srcset="https://www.technig.com/wp-content/uploads/2015/12/Customize-Blogger-Navigation-Bar-on-Header.jpg 746w, https://www.technig.com/wp-content/uploads/2015/12/Customize-Blogger-Navigation-Bar-on-Header-300x44.jpg 300w" sizes="(max-width: 746px) 100vw, 746px" /></a><figcaption id="caption-attachment-4670" class="wp-caption-text">Customize Blogger Navigation Bar on Header</figcaption></figure>
<p><strong>Note:</strong> <em>When you add Labels as Navigation bar, you may have too much labels. Your blog navigation bar will look disorganized. You can customized through <strong>Configure Labels</strong> section. When you want to add it just select <strong>Selected Labels</strong> and select the labels you want to be displayed for readers. </em></p>
<figure id="attachment_4676" aria-describedby="caption-attachment-4676" style="width: 469px" class="wp-caption aligncenter"><a href="http://3.90.216.52/wp-content/uploads/2015/12/Customize-and-Configure-Labels.jpg" rel="attachment wp-att-4676"><img loading="lazy" decoding="async" class="size-full wp-image-4676" src="http://3.90.216.52/wp-content/uploads/2015/12/Customize-and-Configure-Labels.jpg" alt="Customize and Configure Labels" width="469" height="791" srcset="https://www.technig.com/wp-content/uploads/2015/12/Customize-and-Configure-Labels.jpg 469w, https://www.technig.com/wp-content/uploads/2015/12/Customize-and-Configure-Labels-178x300.jpg 178w" sizes="(max-width: 469px) 100vw, 469px" /></a><figcaption id="caption-attachment-4676" class="wp-caption-text">Customize and Configure Labels</figcaption></figure>
<p>You can place the navigation bar of your blog on sidebar also. In order to do this just drag and drop the <strong>Labels</strong> gadget on <strong>Sidebar</strong>.</p>
<figure id="attachment_4677" aria-describedby="caption-attachment-4677" style="width: 1046px" class="wp-caption aligncenter"><a href="http://3.90.216.52/wp-content/uploads/2015/12/Blogger-Navigation-Bar-on-Sidebar.jpg" rel="attachment wp-att-4677"><img loading="lazy" decoding="async" class="size-full wp-image-4677" src="http://3.90.216.52/wp-content/uploads/2015/12/Blogger-Navigation-Bar-on-Sidebar.jpg" alt="Blogger Navigation Bar on Sidebar" width="1046" height="551" srcset="https://www.technig.com/wp-content/uploads/2015/12/Blogger-Navigation-Bar-on-Sidebar.jpg 1046w, https://www.technig.com/wp-content/uploads/2015/12/Blogger-Navigation-Bar-on-Sidebar-300x158.jpg 300w, https://www.technig.com/wp-content/uploads/2015/12/Blogger-Navigation-Bar-on-Sidebar-768x405.jpg 768w, https://www.technig.com/wp-content/uploads/2015/12/Blogger-Navigation-Bar-on-Sidebar-1024x539.jpg 1024w" sizes="(max-width: 1046px) 100vw, 1046px" /></a><figcaption id="caption-attachment-4677" class="wp-caption-text">Blogger Navigation Bar on Sidebar</figcaption></figure>
<p>Another good practice is to select the most used labels as navigation bar on blog header and select others  Labels as Cloud tags on the blog Sidebar.</p>
<figure id="attachment_4678" aria-describedby="caption-attachment-4678" style="width: 1154px" class="wp-caption aligncenter"><a href="http://3.90.216.52/wp-content/uploads/2015/12/Blogger-Tags-Cloud-on-Sidebar.jpg" rel="attachment wp-att-4678"><img loading="lazy" decoding="async" class="size-full wp-image-4678" src="http://3.90.216.52/wp-content/uploads/2015/12/Blogger-Tags-Cloud-on-Sidebar.jpg" alt="Blogger Tags Cloud on Sidebar" width="1154" height="676" srcset="https://www.technig.com/wp-content/uploads/2015/12/Blogger-Tags-Cloud-on-Sidebar.jpg 1154w, https://www.technig.com/wp-content/uploads/2015/12/Blogger-Tags-Cloud-on-Sidebar-300x176.jpg 300w, https://www.technig.com/wp-content/uploads/2015/12/Blogger-Tags-Cloud-on-Sidebar-768x450.jpg 768w, https://www.technig.com/wp-content/uploads/2015/12/Blogger-Tags-Cloud-on-Sidebar-1024x600.jpg 1024w, https://www.technig.com/wp-content/uploads/2015/12/Blogger-Tags-Cloud-on-Sidebar-357x210.jpg 357w" sizes="(max-width: 1154px) 100vw, 1154px" /></a><figcaption id="caption-attachment-4678" class="wp-caption-text">Blogger Tags Cloud on Sidebar</figcaption></figure>
<p>Yes, this is work perfect for a normal blogger weblog. Just see the result on (<a href="http://www.aimgz.com/" target="_blank" rel="noopener noreferrer">www.aimgz.com</a>) our blogger weblog.</p>
<h2>2. Select Pages for Navigation Bar</h2>
<p>The second easy method is to create pages and select them on navigation bar tab. It also the best simple practice to do it. You must create all your blog pages first and then add the <strong>Pages</strong> gadget on header or sidebar.</p>
<figure id="attachment_4680" aria-describedby="caption-attachment-4680" style="width: 795px" class="wp-caption aligncenter"><a href="http://3.90.216.52/wp-content/uploads/2015/12/Display-a-list-of-stand-alone-pages.jpg" rel="attachment wp-att-4680"><img loading="lazy" decoding="async" class="size-full wp-image-4680" src="http://3.90.216.52/wp-content/uploads/2015/12/Display-a-list-of-stand-alone-pages.jpg" alt="Display a list of stand alone pages" width="795" height="193" srcset="https://www.technig.com/wp-content/uploads/2015/12/Display-a-list-of-stand-alone-pages.jpg 795w, https://www.technig.com/wp-content/uploads/2015/12/Display-a-list-of-stand-alone-pages-300x73.jpg 300w, https://www.technig.com/wp-content/uploads/2015/12/Display-a-list-of-stand-alone-pages-768x186.jpg 768w" sizes="(max-width: 795px) 100vw, 795px" /></a><figcaption id="caption-attachment-4680" class="wp-caption-text">Display a list of stand alone pages</figcaption></figure>
<p>Creating page is easy on blogger. Try to create the pages you need to display on navigation bar. The pages for navigation bar is better for blog search engine optimization.</p>
<h2>3. Code Blogger Navigation Bar</h2>
<p>It&#8217;s good for coders and developers. For a simple blog and bloggers I don&#8217;t recommend to customize the default template codes, unless you must be familiar with HTML and CSS.</p>
<p>If you really need to customize your blog navigation bar through code? Try to get help from a trusted source. Sometime it ruin or disorganize your blog template to add extra codes.</p>
<p>&nbsp;</p>
<p>Hope you find this simple blogger article helpful and we ask you to share you blogger tips with us and share our post also.</p>
<p>The post <a href="https://www.technig.com/customize-blogger-navigation-bar/">How to Customize Blogger Navigation Bar?</a> appeared first on <a href="https://www.technig.com">TECHNIG</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.technig.com/customize-blogger-navigation-bar/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">4666</post-id>	</item>
	</channel>
</rss>
