How to Add Admin Control Panel to Blogger -- Complete Guide

Most of the bloggers don't like the blogger's navigation bar and they removed the navigation bar immediately. However removing the Navbar also has some drawbacks like Blog Administrator links for " New Post"," Logout " will be no longer visible. When the Navbar is available admin can easily create a new post with a single click but when we remove the Navbar we have to open blogger dashboard and this is really frustrating.

In this tutorial we will see how to add "Admin Control Panel" menu with some cool characteristics such as:

access to the Blogger's Homepage
create a New Page or Post
view all your posts
read your comments
access the Blog's layout to add or rearrange gadgets
edit the HTML of your Template
refresh current page or post
open a new tab with your blog's homepage
access the blog' settings
view your stats
logout

We will put all these options on the top of your page as a menu and we will make it visible only to the administrator of the blog, so our blog visitors will not be able to see it.

The result will be something like this:

Adding Admin Control Panel to Blogger template

The Admin Control Panel will only be visible when the blog author is logged in and will not display to blog readers, same with the Post Edit or widget pencil icons which are only visible to you while you are logged in.

To add the admin panel to Blogger, follow the steps below:

Step 1.Go to Template and click on the Edit HTML button

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box.

Step3. Type <body> in the search box and hit Enter.

Step4. Just below the <Body> tag, paste the following code.

<span class='item-control blog-admin'><style>.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; }.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;}.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;}.control-panel a:hover {text-decoration:none; color:#FC8F44;}</style><div class='control-panel'><ul><li><a href='http://www.blogger.com/home'>My Blogs</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/src=sidebar"' rel='nofollow'>New Post</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=page"' rel='nofollow'>New Page</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#posts"' rel='nofollow'>All Posts</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#comments"' rel='nofollow'>Comments</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pageelements"' rel='nofollow'>Layout</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#templatehtml"' rel='nofollow'>Edit HTML</a></li><li><a href='#' onclick='location.reload(true); return false;'>Refresh</a></li><li><a href='/' target='_blank'>New Tab</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"' rel='nofollow'>Settings</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#overviewstats"' rel='nofollow'>Stats</a></li><li><a href='http://www.blogger.com/logout.g'>Logout</a></li></ul></div></span>

Step5. Click on the Save template button and you are done.

Now take a look at your blog. While you are logged in you will see this control panel on the top access the cool features.