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='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/src=sidebar"'><i class='fa fa-pencil'/> New Post</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=page"'><i class='fa fa-file'/> New Page</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#posts"'><i class='fa fa-th-list'/> All Posts</a></li>
<li><a expr:href='"https://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=post;postID=" + data:blog.postId + ""'><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='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pageelements"'><i class='fa fa-wrench'/> Layout</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#templatehtml"'><i class='fa fa-pencil-square-o'/> Edit Template</a></li>
</ul>
</li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#comments"'><i class='fa fa-comment'/> Comments</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pendingcomments"'><i class="fa fa-bullhorn"></i> Pending Comments</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#spamcomments"'><i class="fa fa-ban"></i> Spam Comments</a></li>
</ul>
</li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'><i class='fa fa-cog'/> Settings</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'><i class="fa fa-heart-o"></i> Basics</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#postandcommentsettings"'><i class="fa fa-comments"></i> Post & Comments</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#emailandmobilesettings"'><i class="fa fa-mobile"></i> Mobile & Email</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#languageandformattingsettings"'><i class="fa fa-calendar-o"></i> Language</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#searchsettings"'><i class="fa fa-search-plus"></i> Search Preference</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#othersettings"'><i class="fa fa-code"></i> Other</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#overviewstats"'><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.
About the Editorial Team
The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
18 comments
Awesome bro, You've taken the blogger CMS to next level. Thumbs up
Можно чтоб Control Panel видел не только я а и другие?
It is only for Blog Admins and authors.
Glad you liked it Salman
Wow Amazing Thanks
Thanks for liking.
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 .
this is awesome widget +syd
I checked your site, i didn't find the admin panel code. Please add it first.
I Glad you liked it :)
An EPIC move in blogger's history, WOW!
Thnx for sharing this!!!!!
Why can everybody see it in my blog?
http://corrente-grafica.blogspot.fr/
It is only visible to blog admin and authors.
Nice. Helped Me. Keep Up The Good Work. Please, What Is The Name Of The Template You Are Using?
Its a custom design template.
You can get templates from here http://www.templateism.com/
Really awersome!!!
Can i change the image and naem of admin??
Thanks!!
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.