ProLavish | Blogger GuruProLavish

A blog provide Blogging Ethics

How to add an admin control panel in blog(Updated)

navbar  has its downside because the admin links for "New post", "Customize" and "Log Out" will be no longer visible.So we decided to make an admin panel to contol it.
How to add an admin control panel in blog(Updated)


Welcome readers in our previous we shared about the 2 awesome pouplar posts widget for blogger.Now lets  make an admin panel for blogger.To control it manual.




We all now removing navbar  has its downside because the admin links for "New post", "Customize" and "Log Out" will be no longer visible.So we decided to make an admin panel to contol it.

But wait what features we expect from it .

- access to the Blog's Homepage
- create a New Page or  New Post
- view  posts
- to read comments
- layout to add or rearrange gadgets
- edit the HTML
- blog' settings
- log out
and much more so lets start .

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

Steps to add admin in blog

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'>
Step 4. Add the following code just after it
<span class='item-control blog-admin'>
<style>
.control-panel ul{z-index: 22; position: absolute; margin: 1px 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: 19px;}
.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 5. Click Save template

Have Questions?

If you need help with respect to any concept do post your comment below..We are happy to help you  

Gaurav dudeja

Gaurav Dudeja has 3 years of blogger experience.He wasthe only owner of prolavish .He does internet blogging and sharingblogging ethics,widgets,quality tips based on blogging.Having More than 50 followersand 250 people subscribed his blog Join me . Prolavish receives 1 thousand Pageviews/month and has over 32K subscribers

You can find us on

Read Comment Policy ▼
  We have Zero Tolerance to Spam. Chessy Comments & Links' will be deleted immediately

Comments are moderated and may take some time to appear.
If you ask a question make sure you tick the Notify Me option

No comments:     Post Yours!