How to Add Show/Hide NavBar Link Gadget to Blogger

Blogger has added some gadget and features for blogs.Some of them optional and unnecessary items such as Blogger navbar. Already i have wrote a tutorial about removing blogger navBar. In that tutorial i have explained what is the blogger nav bar and some advantages of it to users and bloggers.Although if there are some usages out, most of bloggers dislike to display navbar on the top of blog or header of blog.Therefore certain bloggers prefer to remove blogger navbar from their blog. Other bloggers would like to hide navbar in blogger.some advantages and features of blogger navBar are listed in below.

  • You can Search and visit other blogger blogs easily.
  • When you click on B icon you can go to blogger home (Blogger.com).
  • There are quick links to Dashboard and sign in/sign out.
  • You can "Flag Blog".
  • You can see recently-updated blogs clicking on "Next Blog".
  • Share blog on Google plus...New feature

If navbar gives several benefits to a blog,as a blogger who like to maintain the blog looks like professional website,you might not intend to display the navbar on the top of window.But you can hide blogger navbar from your blog and display a link to show it when user wants.In this tutorial you will ascertain how to add Hide/Show NavBar link gadget to your blog.I suggest you  to check the demo first,before following below few steps.



1: Sign in to your Blogger account.
2: Go to Dashboard >> Layout and click on "Add a Gadget" link.
3: Select on "HTML/JavaScript" page element from the pop up window.
4: Paste below code on it.

<script type="text/javascript">
var showHeader=false;
function ShowHideNavBar()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>
<span style="cursor:pointer; font-weight:normal; " onclick="ShowHideNavBar();">
Show/Hide Blogger NavBar
<a style="visibility:hidden;" href="#"></a>
</span>
Replace Purple color text with your desired message.

5: Now Save your "HTML/JavaScript".

That's all.Visit your blog and see the new gadget is appearing on sidebar.
Happy Blogging buddies ;)

Pengelola Blog : ABDUL WAHAB

Judul : How to Add Show/Hide NavBar Link Gadget to Blogger
Ditulis oleh : Kejutan Internet pada hari
Rating Blog : 5 dari 5
Terima kasih Anda telah membaca artikel tentang How to Add Show/Hide NavBar Link Gadget to Blogger
Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman anda.
Namun jangan lupa harap memberikan link aktif dofollow yang mengarah ke URL ini ya
http://kejutaninternet.blogspot.com/2013/07/how-to-add-showhide-navbar-link-gadget.html

Dan Terima kasih sekali lagi atas kunjungan Anda.

Kritik dan saran atau apapun bisa anda sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak bisa selalu online selama 24 Jam.


Mau Di Buatkan Blog Siap Pakai Seperti Ini ?.

Artikel Terkait

Previous
Next Post »