How to create an “Admin Control Panel” in your Blogger template

Hiding the Blogger nav-bar is one of the most popular customizations for Blogger blogs. The advantage of this is that your blog design does not immediately appear to be powered by Blogger, and it is very useful for designs where the appearance of the nav-bar distracts from the overall design of the blog.

The only downside of removing the nav-bar is that the admin links for “New post”, “Customize” and “Log Out” are no longer visible. When the nav-bar is visible, blog administrators can create a new post or customize their layout with just one click; when the nav-bar is hidden, many more clicks are required to access the dashboard panel again.

In this post, I’ll explain how you can easily add a “Admin Control Panel” widget which enables one click access to the main sections of your dashboard if you have hidden the Blogger nav-bar from your layout.

First things first!

There are two things we need to do before adding the control panel to our Blogger template:

  1. Make a back-up of the existing template
  2. Find our unique Blog ID number

Let’s go through both of these in order.

Make a back-up of your Blogger template

As we are adding code directly to the Blogger template for this customization, it is omportant to make a back-up of the existing (working) template code.

Then if we do make any major errors, we can easily restore the original working template to our blog.

To make a back-up of your Blogger template, go to Layout>Edit HTML in your Blogger dashboard, and look for the “Download full template” link near the top of the page.

Clicking on this link will prompt you to save your existing template as an XML file to your computer hard drive. You can change the name of the file and choose the location to ensure it is easy to find if you need to use this later.

Locate your unique Blog ID number

To create the admin control panel, we need to use your unique Blog ID number, as this will form part of the URL required for admin links.

To find your Blog ID number, log into Blogger and ensure you have accessed the dashboard you intend to work with.

While you are logged in, access any page of your Blogger dashboard and take a look at the address bar in your browser:

Locating your Blog ID number

Locating your Blog ID number

Within the URL you will notice a string like this:

blogID=XXXXXXXXXX

Where XXXXXXXXXX is the unique identifier for your blog.

You need to make a note of the BlogID number for the blog you wish to work with so we can add this in the links for your admin control panel.

Adding the control panel to your template

The Admin Control Panel will only be visible when the owner/author of the blog is logged into their relevant Blogger account. It is invisible to blog readers, similar to the “edit post” and “edit widget” links which are only visible while you are logged in and viewing your own blog.

To add the control panel to your Blogger template, go to Layout>Edit HTML and do not check the “Expand widget templates” box.

Then search for the following line of code (or similar):

<b:section class='sidebar' id='sidebar' preferred='yes'>

Immediately before this line, paste the following section of code:

<span class='item-control blog-admin'>
<h2>Admin Control Panel</h2>
<a href='http://www.blogger.com/post-create.g?blogID=BlogIdNumber'>New Post</a>
|
<a href='http://draft.blogger.com/blog-options-basic.g?blogID=BlogIdNumber'>Settings</a>
|
<a href='http://www.blogger.com/rearrange?blogID=BlogIdNumber'>Change Layout</a>
|
<a href='http://www.blogger.com/html?blogID=BlogIdNumber'>Edit HTML</a>
|
<a href='http://www.blogger.com/moderate-comment.g?blogID=BlogIdNumber'>Moderate Comments</a>
|
<a href='http://www.blogger.com/logout.g'>Sign Out</a>
</span>

Replace all instances of BlogIdNumber with your unique BlogID.

Once you have done this, preview your template. You should not see any of the code for the Admin Control Panel appear in your template during the preview! If all is well, you can then proceed to save your template.

Now take a look at your blog. While you are logged in to Blogger, you should notice your control panel appear above the widgets in your sidebar.

If you log out of Blogger and look at your blog, you will not see the control panel appear (this is also how your readers will see your blog).

<h3>How this works</h3>

The code for the control panel is wrapped in span tags with the class of “item-control blog-admin”. These CSS classes are not included in your Blogger template code, but are instead added in when your blog pages are generated by Blogger’s external scripts.

These classes also apply for your post and widget editing icons (the familiar pencil and wrench icons) which are invisible to readers of your blog.

The links will still be visible if a reader views the source code of your blog. However, these links are only accessible by the administrators of the blog. If anyone else attempts to access these pages, they will be asked to log in to their own Blogger account and would be unable to make any changes to your own blog.

How to hide the Blogger nav-bar

If you do not already hide the Blogger nav-bar in your template, you can achieve this in just a few simple steps:

  1. Go to Layout>Edit HTML in your Blogger dashboard.
  2. Locate the closing &lt;/b:skin&gt; tag
  3. Just before this tag, add the following lines of code:

    #navbar-iframe {
    height:0px;
    visibility:hidden;
    display:none
    }

  4. Then save your template

These few lines of CSS code hide the Blogger nav-bar from the design. The code is still present in the source code, and all functions generated by the nav-bar will still work.

Your opinions?

I hope this tutorial will be useful for those who hide the Blogger nav-bar and still require easy access to the main functions of their Blogger dashboard. Please let me know your opinions or offer suggestions for improvement by leaving your comments below.

Disclosure: In full disclosure, it is safe to assume that the site owner is benefiting financially or otherwise from everything you click on, read, or look at while on my website. This is not to say that is the case with all content, as all publications on the site are original and written to provide value and references to our audience.

35 Comments

  1. MissandMisterKinkY September 22, 2008
  2. MissandMisterKinkY September 22, 2008
  3. Tinh September 22, 2008
  4. Pepe September 22, 2008
  5. Enrique V. September 23, 2008
  6. MissandMisterKinkY September 23, 2008
  7. lostboyblue September 23, 2008
  8. MissandMisterKinkY September 23, 2008
  9. lostboyblue September 23, 2008
  10. Amanda Fazani September 23, 2008
  11. Enrique September 23, 2008
  12. Amanda Fazani September 23, 2008
  13. Enrique September 23, 2008
  14. Cookeville Weather G September 23, 2008
  15. LaSconosciuta September 23, 2008
  16. Adam September 24, 2008
  17. Daniel J. Pritchett September 24, 2008
  18. Rashed September 24, 2008
  19. Mark September 24, 2008
  20. chilly September 25, 2008
  21. Kaliqo September 25, 2008
  22. Tinh September 25, 2008
  23. GoldMonkey September 30, 2008
  24. Todero October 12, 2008
  25. fptk95 October 18, 2008
  26. nn October 25, 2008
  27. nn October 25, 2008
  28. blackzero85 November 6, 2008
  29. Hi there November 17, 2008
  30. Kshitij Parajuli November 28, 2008
  31. suanm December 4, 2008
  32. Remember History December 19, 2008
  33. Remember History December 19, 2008
  34. hydir December 20, 2008
  35. Jonathan January 10, 2011