[Top10]


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:




  1. access to the Blogger's Homepage
  2. create a New Page or Post
  3. view all your posts
  4. read your comments
  5. access the Blog's layout to add or rearrange gadgets
  6. edit the HTML of your Template
  7. refresh current page or post
  8. open a new tab with your blog's homepage
  9. access the blog' settings
  10. view your stats
  11. 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:

Admin Control Panel

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

Admin Control Panel


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

Admin Control Panel


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='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;' rel='nofollow'>New Post</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=page&quot;' rel='nofollow'>New Page</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;' rel='nofollow'>All Posts</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;' rel='nofollow'>Comments</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;' rel='nofollow'>Layout</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;' 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='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;' rel='nofollow'>Settings</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;' 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.

How to Add Admin Control Panel to Blogger -- Complete Guide How to Add Admin Control Panel to Blogger -- Complete Guide Reviewed by Sunny Thakur on 12:59 PM Rating: 5
Related Posts Plugin for WordPress, Blogger...