How to Create an Advanced Admin Control Panel in Blogger

The only downside of remiving Blogger Navbar is that the links like New Post, Template, Pages, Log Out etc. are no longer available.With the help of Navbar blog administrators can easily manage their blogs. With a visible navbar admins can easily create posts, pages but when the navbar is hidden sometimes its really frustrating to visit the dashboard again and again for performing a task.

Today, in this tutorial I'll show you that How to Create an Advanced Admin Control Panel in Blogger. Admin Control Panel is a facility for blog administrators to manage his blogs with ease and speed. This Admin Control Panel is only visible to blog administrator (Not to readers/visitors). Only blog administrator will be able to see this navbar/panel when he is logged in to his account.

Here's a screenshot of this Admin Control Panel. Using this Panel you can easily access to your Dashboard, create new post, access to all posts, comments, your blog stats, layout, template, your blog setting and finally Logout button.

Find your Blog ID

The very first thing for creating an Admin Control Panel is to find your Blog ID.
To find your Blog ID, log in to your Blogger Account >> Select the Blog to which you want to add the Admin Control Panel. Choose any option from the sidebar, like Setting, Template etc. Now take a look at the address bar of your browser. You will notice a string like this

blogID=XXXXXXXXXXXXX

The digits next to blogID= (blogID=XXXXXXXXX) is your Blog ID number.

Copy the blog ID, we'll use it later. Now its time to add the Admin Control Panel, lets do it

How to Create an Advanced Admin Control Panel in Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Use Ctrl+F and search for the ]]></b:skin> tag. Now add the below CSS code just above/before it

.bgt-cpanel ul{
border-bottom:2px solid black;
text-align:center;
position: absolute;
margin: 0px auto;
background-color: #333333;
width: 100%;
z-index: 20;
}
.bgt-cpanel ul li{
float: center;
padding: 7px 0px;
display: inline-block;
}
.bgt-cpanel ul li a {
font-family: 'Slabo 27px', serif;
color:#fff;
padding: 7px 15px;
border-right: 1px solid #E3E3E3;
font-size: 13px;
font-weight:bold;
}
.bgt-cpanel a:hover {
text-decoration:none;
color:#2aa4cf;
}
.fa {
font-size: 18px;
color: #999999;
margin-right: 5px;
}

Again search for the <body> tag and add the below HTML code just below/after it

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'/>
<div class='bgt-cpanel'>
<ul>
<li><a href='http://www.blogger.com/home'> Dashboard</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#editor/src=sidebar'> New Post</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#posts'> All Posts</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#comments'> Comments</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#overviewstats'> Stats</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#pageelements'> Layout</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#templatehtml'> Edit HTML</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#basicsettings'> Settings</a></li>
<li><a href='http://www.blogger.com/logout.g'> Logout</a></li>
</ul>
</div>

Customization:
Replace XXXXXXXXXXXXX with your Blog ID that we copied earlier.

Important: The admin panel will only be visible to blog admin or author (not to readers/visitors) only when he/she is logged in to his blogger account.

Finally click Save Template button and you're done!

If you're looking to share this admin panel on your blog/website then please don't post it without a proper credit-link to blogolect.com

From Editors Desk

We hope this article may have helped you in Creating an Advanced Admin Control Panel in Blogger. Share this article with your friends, don't forget to subscribe us for more cool tricks and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum