PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

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

Posted by on 22nd Sep 2008 | 35 comments

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.


Amanda is a freelance blogger and web/blog designer. She writes about Blogger at www.BloggerBuster.com and maintains several other blogs on various subjects.

35 comments - Leave a reply
  • Posted by MissandMisterKinkY on 22nd Sep 2008

    Dear Amanda,

    there is a few "typos" in the code part or it was wrongly formatted when you copied and pasted it from your post editor/frontpage so on maybe?

    I have come across the following things:

    a) remove the following line: Admin Control Panel>

    (why have 2 headlines?)

    b) switch all ‘ for ' as otherwise the code wont be accepted in blogger.

    (at least that was the problem when I tried it)

    After I fixed those minor glitches it worked like a charm. Thanks again for your brilliant idea and effort towards this.

    Ciao

  • Posted by MissandMisterKinkY on 22nd Sep 2008

    PS:

    the coding of this page does not allow me to correctly post the b) issue so I will try and put it in words.

    Instead of using the shift and ^ key simply use the ' key to embed the href links correctly. Replace all shift and ^ key symbols in your code with the ' symbol and it will all work.

    Hope this will be displayed correctly now and that you know what I am talking about.

    Thanks & Regards ;)

  • Posted by Tinh on 22nd Sep 2008

    Great post, many thanks for this guide. I hope to get your permission to translate this post in Vietnamese and repost it in my blog as many Vietnamese bloggers can not read English and I am sure to trackbak and include the source. Thanks Tinh

  • Posted by Pepe on 22nd Sep 2008

    Correcting the typos, it works just fantastic!

    And, for simplicity, this code may be added at the beggining/end of any other text/html widget in a blog, instead of editing html in the template :)

    Thank you Amanda!!!

  • Posted by Enrique V. on 23rd Sep 2008

    It does not work for me :sad: this is the message from blogger:

    The value of attribute "href" associated with an element type "null" must not contain the '<' character.

    can u help me please :oops:

  • Posted by MissandMisterKinkY on 23rd Sep 2008

    Dear Enrique,

    if you correct the typos I mention in my 1st 2 comments then it will work. I had the same issues. If you need more help you can email me also. My addy is on our blog.

    Hope you manage. It is a matter of exchanging the ^ key with the ' as otherwise blogger will not recognise the link or so to speak the href.

    Ciao ;)

  • Posted by lostboyblue on 23rd Sep 2008

    :???: I have built the code into a widget with the layout of my blogger.. when i add the blogger id and then view the page.. it seems to be working. When i click a link within the admin control bar, i says it cannot find the blog. I have tried to enter the ‘ symbol after the blogger id, and without.. it wasn't clear to me if that was part of the BOLD text i was meant to replace. Can someone please assist me? Thanks.

  • Posted by MissandMisterKinkY on 23rd Sep 2008

    Dear Lostboyblue,

    You would need to not only replace the ' symbol after the BlogID but in every place where you find them in the code for the admin panel. Then it will work. I have done so and it does work. I have also written to Amanda and asked her to put up the corrected version here.

    The glitches in the code might be due to a different formatting of the code on this page or possibly because "character entities" are not being displayed right.

    It can happen. If you need more help email me.

    Ciao

  • Posted by lostboyblue on 23rd Sep 2008

    :razz: Just before you responded with this reply, i re-pasted and and tried to clean everything up per all the advice. it worked finally. not sure what was different.. but yes it worked. thank you for your help.

  • Posted by Amanda Fazani on 23rd Sep 2008

    Sorry about the troubles with the formatting of the code! I've just edited the post to replace those "pretty" apostrophes with straight ones, so now the code should work just fine when you copy and paste :)

    For MissAndMisterKinky: Thank you for pointing out my code errors and the solutions for this problem! The double heading was entirely my own oversight, but I hadn't realized my straight quotes would be replaces with angled ones in the outputted code – it looked just fine when I was previewing (but then I'm more accustomed to posting with Blogger!).

    For Tinh: I'd prefer you ask permission from Kevin before posting a translation in your own blog as the content here is copyrighted.

    For Enrique and LostBoyBlue: I hope this customization works okay for you once my erroneous typos have been fixed! My apologies for this inconvenience.

    For Pepe: That would be another great place to paste the code, and would also enable movement of the widget in the Page Elements section of the dashboard.. Originally I had hoped to create this as an actual widget, but for some templates this would add a gap where the control panel is hidden for regular readers. Your idea should work much better ;)

  • Posted by Enrique on 23rd Sep 2008

    Hi, it's me again :cool: I'm going to try w the new code but, Where is the code you wrote after this?

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

    :?:

    thanks in advance!

  • Posted by Amanda Fazani on 23rd Sep 2008

    Whoops! I must have deleted a couple of lines by accident :oops:

    I've added this back in now so the post should make sense again!

  • Posted by Enrique on 23rd Sep 2008

    I dit it! this widget is very good thanks…. unfourtunatly it seems that i have real problems with my layout and i dont know how to fix them… i can not hide this widget when i'm logged off, i have same problem with other widgets and things in there…… anyway thanks a lot i hope i can install it in the future :cry:

  • Posted by Cookeville Weather G on 23rd Sep 2008

    Amanda:

    Thanks for your work. I'm a huge fan and subscribe to your blog. Keep it up. Your tips have really helped my blog look quite professional. It has also helped me to 'get noticed' by other people in the weather blog world. A great big thank-you!

    Sincerely,

    Michael
    http://www.cookevilleweatherguy.com

  • Posted by LaSconosciuta on 23rd Sep 2008

    It works wonderfully!!

    Thanks!

  • Posted by Adam on 24th Sep 2008

    Great advice. Ive been building up my new blogger blog and I was wanting to get rid of the bar as I have heard about it but didnt want to lose those buttons. this fixes that! thanks, i will do this in a couple of day when i have more time.

  • Posted by Daniel J. Pritchett on 24th Sep 2008

    Amanda,

    Is navbar hiding allowed by Blogger? I'm running a free blog hosted by them (but using my own domain name) and so I really wouldn't want to irk them and get it pulled down. If you've got a reputable source that allows the behavior I'll be ready to hide.

    Thanks,

    Daniel

  • Posted by Rashed on 24th Sep 2008

    Thanks a lot. :)

  • Posted by Mark on 24th Sep 2008

    Great tutorial thanks for sharing amanda… :smile:

  • Posted by chilly on 25th Sep 2008

    This is awesome! Thanks!

    Running off to add it to other sites. :)

  • Posted by Kaliqo on 25th Sep 2008

    Works great. Thanks!

  • Posted by Tinh on 25th Sep 2008

    Hi Amanda and Kevin,

    If it is not ok, I will not publish my translation version anymore. Thanks

  • Posted by GoldMonkey on 30th Sep 2008

    Had to play with it alittle but it works great.I really like it.Thanks

  • Posted by Todero on 12th Oct 2008

    Very good, now I can put many thinks that I only need see. Very thanks for share this.

  • Posted by fptk95 on 18th Oct 2008

    Wonderfull tutorial. I try it and work !!!

    Thanks you very much Amanda…i love u !!

  • Posted by nn on 25th Oct 2008

    I want to ask one thing how can i add this to my blog—–

    post ur comments hear

    or

    22 visitor commented———-

    {like this}

  • Posted by nn on 25th Oct 2008

    how to add this to my blog————–

    plz comment hear or like somthing that

  • Posted by blackzero85 on 6th Nov 2008

    Good tutorial. Lemme try it on my blog. :)

  • Posted by Hi there on 17th Nov 2008

    Works great for me. Thanks alot for your help! Also would like to suggest to instead of finding the cue, just use the word find option by clicking ctrl+f

  • Posted by Kshitij Parajuli on 28th Nov 2008

    Great Post! Thank You Very Much..

    I wanna suggest a tutorial.

    I wanna create a nav-bar (like blogger nav-bar which has search box in it….

    That may be a cool addition to a blog!!

  • Posted by suanm on 4th Dec 2008

    Chilly you are the ugliest guy I have seen in a long time…. sorry man, I had to say it

  • Posted by Remember History on 19th Dec 2008

    Wonderful! Thank you.

    I use the three-column Aspire template. It's a beautiful template but, it's a pain in the backside to edit. It's html doesn't follow the layout of most templates so I usually have to browse through the code to find where to make the edits. The location in the code is Aspire specific.

    In case anyone else uses Aspire or some other non-standard template, this is where in the code I found to copy and paste the lines.

    Scroll down to:

    <code></code>

    <code></code>

    Paste the lines of code for the "Control Panel" just between the two "div id"s, for example:

    <code></code>

    .

    — PASTE code here —

    .

    <code></code>

    Then, update with your blogID, and your "Admin Control Panel" will display across the top of the two columns on the right. I added a "center" tag so it would align nicely across the two columns.

    I did have to change the link for "Moderate Comments" to draft.blogger.com but that may be specific to my account setup.

    This is a great tool. Thank you very much for posting it.

    ~ Remember History

  • Posted by Remember History on 19th Dec 2008

    My Queendom for a preview function. Sorry, I'll re-post so maybe it will display correctly.

    In case anyone else uses Aspire or some other non-standard template, this is where in the code I found to copy and paste the lines.

    Scroll down to:

    div id='sidebars'

    div id='sidebar-left'

    Paste the lines of code for the "Control Panel" just between the two "div id"s, for example:

    div id='sidebars'

    .

    — PASTE code here —

    .

    div id='sidebar-left'

    Then, update with your blogID, and you'll have your "Admin Control Panel" display just across the top of the two columns on the right. I added a "center" tag so it would align nicely across the two columns.

    I did have to change the link for "Moderate Comments" to draft.blogger.com but that may be specific to my account setup.

    This is a great tool. Thank you very much for posting it.

    ~ Remember History

  • Posted by hydir on 20th Dec 2008

    tq for this info… I already add it to my template and works just fine :)

  • Posted by Jonathan on 10th Jan 2011

    Wow!!!
    Thank Amanda!!!
    God Bless You…
    Is so Good…