How to Create an Advanced Admin Control Panel in Blogger

Advertisements
For those who have removed the blogger navbar, might find it awkward to go all the way through the dashboard to create, edit, change settings or make any customization of your blog. Therefore, we thought to come up with something that is enhanced and better than the default blogger navbar. We have developed a highly professional Blogger Admin Control Panel that will help blog administrator to do jobs rather quickly. Today in this article, we will show you How to create an Advanced Admin Control Panel in Blogger.

What is Blogger Admin Control Panel?

It is to provide blog administrator a facility of making changes in their blogs with ease and speed. This Admin Panel will only be visible to blog administrator or author, not to regular readers. Which means it will only appear, if the blog administrator is logged in to his blogger account.

To provide you more overview of the admin panel, we have attached a screenshot below that shows how and where it will appear. By using this admin panel, you can quickly access new posts, edit posts, edit html, comments, layout and etc.



How to Create an Admin Control Panel in Blogger:

The very first thing you need to do is to login to your blogger account. Now on blogger dashboard, select the one blog on which you would like to install the Admin control panel. After selecting, go to Template >> Edit HTML >> and search for the ]]></b:skin> tag and just above it paste the following code:

.admin-controll,.admin-controll * {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-type: none;
    line-height: 1.0;
}
.admin-controll ul {
    position: absolute;
    top: -999em;
    width: 100%;
}
.admin-controll ul li {
    width: 100%;
    background: 333333;
}
.admin-controll li:hover {
    visibility: inherit;
}
.admin-controll li {
    float: left;
    position: relative;
}
.admin-controll a {
    display: block;
    position: relative;
}
.admin-controll li:hover ul,.admin-controll li.sfHover ul {
    left: 0;
    top: 100%;
    z-index: 99;
}
.admin-controll li:hover li ul,.admin-controll li.sfHover li ul {
    top: -999em;
}
.admin-controll li li:hover ul,.admin-controll li li.sfHover ul {
    left: 100%;
    top: 0;
}
.admin-controll li li:hover li ul,.admin-controll li li.sfHover li ul {
    top: -999em;
}
.admin-controll li li li:hover ul,.admin-controll li li li.sfHover ul {
    left: 100%;
    top: 0;
}
.mbl-admin-bar {
    margin: 0px;
    direction: ltr;
    color: #ccc;
    font: 400 13px/32px "Open Sans",sans-serif;
    height: 32px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 600px;
    z-index: 99999;
    background: #222;
    float: left;
}
.mbl-admin-bar li a {
    display: block;
    color: #fff;
    padding: 7px 15px;
    font-weight: 400;
    text-decoration: none;
    font-size: 14px;
}
.mbl-admin-bar li li a {
    font-size: 15px;
    color: #fff;
    float: none;
    padding: 0px;
    width: 0;
}
ul.children {
    color: #fff;
    background: #333333;
    font-size: 18px;
    min-width: 230px;
    padding: 10px;
    float: right;
    margin-left: -98px;
}
.mbl-admin-bar li a:hover,.mbl-admin-bar li a:active,.mbl-admin-bar li a:focus,.mbl-admin-bar li:hover > a,.mbl-admin-bar li.current-cat > a,.mbl-admin-bar li.current_page_item > a,.mbl-admin-bar li.current-menu-item > a {
    color: #38b8f0;
    background: #333333;
}
.fa {
    font-size: 18px;
    color: #999;
    margin-right: 5px;
}
.fa.fa-user {
    font-size: 50px;
    float: left;
    padding: 20px;
    border: 1px solid #212121;
    background: #575757;
}
ul.children img {
    width: 80px;
    height: auto;
    float: left;
    margin-right: 10px;
}
ul.children a {
    margin-top: 10px;
}
li.mright {
    float: right;
}
li.mblogo a {
    padding: 3px 15px 3px 15px!important;
}
ul.child1 {
    min-width: 180px;
    color: #fff;  background: #333333;
}
ul.child1 li a {
    padding: 10px;
    width: 100%;
    background: #333333;
}

Now again in the template, search for the opening <body> tag. Once you’re able to find the tag, just below it paste the following code:


<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Open Sans:400' rel='stylesheet' type='text/css'/>
 <span class='item-control blog-admin'>
<div class='span-24'>
<div class='mbl-cpanel'>
<ul class='admin-controll mbl-admin-bar'>
  <li class='mblogo'><a href="http://www.mybloggerlab.com"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV80oc-Ki5tveguyF70J71uHmMzd8M0pverc8Y0F1l-sZl1nD2Mhw_fB4c_aL2pGZWLfHrZNUAGjtkLrxhuhULF7T_Jno-8T5XEUI7Xi_UlcDW4zAVJnpBFAk-orwm4XFfnqFUM7fdy0g/s1600/v.pn'/></a></li>
  <li class='blog-title'><a expr:href='data:blog.homepageUrl'><i class='fa fa-tachometer'/> <data:blog.title/></a></li>
<li><a href='http://www.blogger.com/home'><i class='fa fa-puzzle-piece'/> Dashboard</a></li>

  <li><a href="#"><i class="fa fa-pencil"></i> Posting</a>
<ul class='child1'>
  <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;'><i class='fa fa-pencil'/> 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;'><i class='fa fa-file'/> New Page</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;'><i class='fa fa-th-list'/> All Posts</a></li>
<li><a expr:href='&quot;https://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=post;postID=&quot; + data:blog.postId + &quot;&quot;'><i class="fa fa-pencil-square"/>Edit Post</a></li>
  </ul>
</li>
  <li><a href="#"><i class="fa fa-cogs"></i> Customize</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;'><i class='fa fa-wrench'/> Layout</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;'><i class='fa fa-pencil-square-o'/> Edit Template</a></li>
  </ul>
</li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;'><i class='fa fa-comment'/> Comments</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pendingcomments&quot;'><i class="fa fa-bullhorn"></i> Pending Comments</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#spamcomments&quot;'><i class="fa fa-ban"></i> Spam Comments</a></li>
  </ul>
</li>

<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class='fa fa-cog'/> Settings</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class="fa fa-heart-o"></i> Basics</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#postandcommentsettings&quot;'><i class="fa fa-comments"></i> Post &amp; Comments</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#emailandmobilesettings&quot;'><i class="fa fa-mobile"></i> Mobile &amp; Email</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#languageandformattingsettings&quot;'><i class="fa fa-calendar-o"></i> Language</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#searchsettings&quot;'><i class="fa fa-search-plus"></i> Search Preference</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#othersettings&quot;'><i class="fa fa-code"></i> Other</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;'><i class='fa fa-signal'/>Stats</a></li>
  </ul>
</li>

<li class='mright'><a href='#'><i class='fa fa-signal'/> Howdy, Admin</a>
<ul class='children'>
<li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiis5Iuv1rpk46ScC8H-hat7oiK06xgp8Ss_q6AZLtpYCWR33FcFnUvm2hb6VA7LRXdmIXY1E7HzSuEU_vr4PklXSTYHMmKhcFPfnaPqgTO4CTp8EgdWZEmu-668UEUV3NAbxU05Vd3lSM/s1600/faizan.png'/>
<div class='mauthor'><br/>Syed Faizan Ali</div>
<a href='http://www.blogger.com/logout.g'> Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</span>

It is up to you if you want to customize the admin panel according to your needs then feel free to edit the both CSS and HTML Codes. Once everything is done, save the template by pressing “Save Template” button on the top. Congratulations, you have successfully added Admin Control Panel in Blogger.

We hope this tutorial would turn out to be useful for all blogger users. It is indeed a great replacement to the blogger’s default navbar. Do share your thoughts about the admin panel and how we can make it even better.

ATTENTION: This Widget is solely created by MyBloggerLab.com so anyone using the above codes without giving proper credit-back link to this site would have to face some legal notice. Therefore, do respect the work.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

18 comments

October 13, 2014 at 8:57 AM

Awesome bro, You've taken the blogger CMS to next level. Thumbs up

October 13, 2014 at 9:33 AM

Можно чтоб Control Panel видел не только я а и другие?

Editorial Team MOD
October 13, 2014 at 10:20 AM

It is only for Blog Admins and authors.

Editorial Team MOD
October 13, 2014 at 10:20 AM

Glad you liked it Salman

October 13, 2014 at 10:09 PM

Wow Amazing Thanks

Editorial Team MOD
October 14, 2014 at 4:44 AM

Thanks for liking.

October 17, 2014 at 3:01 AM

Great works bro you are doing a great job , now here is something new for you to work upon please bear with the English , while browsing i found a site "buytoearn.in" , i used wapallyzer extension to analyse this site , and found that this site is hosted on blogger which dont allow php and apache server on it, but i found that they have an Earn Cashback page which direct to cashback.buytoearn.in , on this page the wappalyser shows that this has apache and php script installed , also when we go to this page it shows a pop up windows to sign in along with signup option and when we create an account with them and refresh the page , it shows the details of user , like name and cashback earned on the top right corner of the same page , can you help me doing the same thing on my blogger , is there any specific requirement for doing this please help me i too want the user login and on my blogger along with displaying some of their data on their page when they log in to their account .

October 17, 2014 at 3:03 AM

this is awesome widget +syd

Editorial Team MOD
October 17, 2014 at 3:08 AM

I checked your site, i didn't find the admin panel code. Please add it first.

Editorial Team MOD
October 17, 2014 at 3:09 AM

I Glad you liked it :)

October 17, 2014 at 11:49 PM

An EPIC move in blogger's history, WOW!

October 21, 2014 at 11:57 AM

Thnx for sharing this!!!!!

October 22, 2014 at 4:37 AM

Why can everybody see it in my blog?
http://corrente-grafica.blogspot.fr/

Editorial Team MOD
October 22, 2014 at 7:22 PM

It is only visible to blog admin and authors.

DR
February 6, 2015 at 9:58 AM

Nice. Helped Me. Keep Up The Good Work. Please, What Is The Name Of The Template You Are Using?

Editorial Team MOD
February 7, 2015 at 4:01 AM

Its a custom design template.

You can get templates from here http://www.templateism.com/

June 9, 2015 at 10:47 AM

Really awersome!!!
Can i change the image and naem of admin??
Thanks!!

May 13, 2016 at 7:50 PM

I would like admin control panel located on the bottom. I have to do. Due to my menu located above.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.