As we know, everyday, we found a lot of updates on different blogs about something new and unique for the blogger , tech, tricks, hacks, etc. and yes, today i found something different while Googling (Google search) is that admin-bar for blogspot blog it also called “Admin Control panel” which really helpful for the blogger user to quick navigate to any function directly to the admin control panel. isn’t it new?

Also see : Remove navbar from blogger without helps of CSS

Admin-bar will be show up at the top of the blog with a lot of cool additions such as:

  1. Access to the blogger dashboard
  2. Create a new page or post
  3. View all your posts
  4. Read 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. Log out

Well, it will be visible only for the administrator of the blog, that mean your blog visitors will be not able to see it.

Result will be look like same as screenshot below, click on “View original size” to see the original size in new tab.

Admin Control PanelView original size

How to add an admin-bar to blogger?

Adding admin-bar to blogger is too easy all you have to do is just go to the blogger dashboard > Template > Edit HTML then find the following code on your blog’s HTML using CTRL+F.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

If you are not able to find the above code, simply search for :


and paste the below code just after any of above tag.

<span class='item-control blog-admin'>
.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;}
<div class='control-panel'>
<li><a href=''>My Blogs</a></li>
<li><a href=''>New Post</a></li>
<li><a href=''>New Page</a></li>
<li><a href=''>All Posts</a></li>
<li><a href=''>Comments</a></li>
<li><a href=''>Layout</a></li>
<li><a href=''>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 href=''>Settings</a></li>
<li><a href=''>Stats</a></li>
<li><a href=''>Logout</a></li>

Important : Replace XXXXXXXXXXXXX with your blog’s unique ID which you can find by clicking on any option on your blog as example ; in your blogger dashboard > go to settings and then take a look in the address bar of your browser , there you will see URL within your blog’s unique ID number. for the more information check the screenshot below.

Blogger unique ID


Go to your blog while you are logged in with blogger, you will notice admin control panel at the top of your blog.

Enjoy !