Helplogger Blogger tips, tricks, tutorials and widgets.
  • Home
  • about
  • contact
  • Sitemap

How to Add an Admin Control Panel in Blogger

Posted by Manthan in: How to menus Navigation navigation menu widgets
A while ago I've posted some tutorials on how you can remove the Blogger Navbar or add a Peek A Boo Effect so that it would show only when we mouse over on top of our page.

However, customizing or removing the Blogger Navbar also has its downside because the admin links for "New post", "Customize" and "Log Out" will be no longer visible and navigating through the blog functions could be really frustrating sometimes. When the navbar is visible, blog administrators can easily create a new post or customize their template with just one click; however, when the navbar is hidden, many more clicks are required to access the Blogger dashboard panel again.

In this tutorial, we'll see how to add an "Admin Control Panel" menu with many cool additions 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
- log out

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 for blogger

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

Step 3. Paste this line inside the search box then hit Enter to find it:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Note: if you can't find this line, try to find the <body> tag.

Step 4. Just below that line or tag, add 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>
Step 4. Click on the Save template button to save the changes.

Now take a look at your blog. While you are logged in to Blogger, you should notice your control panel appear on top of your blog. Enjoy!

With this admin control panel for Blogger you can easily access the functions of the blog and you will not have to always open your blog page and the Blogger homepage at the same time.

0 comments:

Post a Comment

Newer Post Older Post Home

About Manthan Dudeja

Manthan dudeja Manthan dudeja is the founder of Helplogger, He is a young Blogger ,Web Designer, Graphic Designer and owns his popularity to the fact that he posts genuine contents to his blog and believe in good rituals. He is young and truly innovative in his work At helplogger he mostly writes about How to blog tips, Tech news, Gadget Reviews etc. Countinue Reading

Popular Posts

  • (no title)
    Dual whatsapp Happy Diwali SMS Happy Diwali Whatsapp Status, SMS, Messages and Wishes Happy Diwali Shyari in Hindi Happy Diwali Shyari...
  • Add a forum on your Blogger blog with Nabble
    Forum is a platform where visitors can interact with each other and discuss different hot topics. There you can add desired topics for getti...
  • Add Floating Social Media Sharing Buttons To Blogger
    The Floating Social Media Sharing is a very popular widget on all the top blogs and this is one of the ways to increase the number of times ...
  • Happy Veterans Day 2016
    Happy Veterans Day Quotes, Messages, Card Sayings, Thank You Giving Veterans Day Wallpapers Images Photos 2016
  • Related Posts Widget with Thumbnails and Summary for Blogger
    There are several tutorials quite old in which I have shown different methods for displaying related posts in Blogger [ 1 ] [ 2 ] but in th...

About This Blog

Helplogger.in is a blog for Tech Geeks and Bloggers where we share fresh and updated information related to Internet, Social Media, Gadgets, Blogging, How-To Guides, Internet Marketing, SEO and much more related to Technology. You can check out about the admin of the blog here and check out our Sitemap.

Quick Navigation

  • Home
  • About Us
  • Contact Us
  • Privacy Policy

Follow Manthan Dudeja

Follow us on Facebook Follow us on Twitter Follow us on Google+

"© Copyright 2014-2016" · All Rights Reserved · And Our Sitemap · All Logos & Trademark Belongs To Their Respective Owners·
Website designed by Manthan dudeja.