How To Add Admin Control Panel In Blogger Blog

Setting up the admin control panel on your blog and controlling your blog activities like accessing blogger's home page, creating a new page or post, viewing your all posts, reading the comments, accessing the blog layout to add or re-arrange the gadgets, editing the HTML of your template, refreshing current page or post, opening a new tab with your blog's home page, accessing to the blog's settings, viewing your stats and logging out will be a great idea. Through this admin control panel you can easily create a new post or customize your template with just one click. Putting up admin control panel at top on your blog page will help you to avoid logging in to your blogger every time to access your blogger dashboard options.

In this tutorial we will see how to add Admin Control Panel to our blog in simple ways.

1.  Go to your blogger dashboard > Templates > click on Edit HTML then Search (CTRL+F) for the below code line,

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>  
How to add admin control panel in blogger
How to add admin control panel in blogger

If you can't find above code, just find for <body> tag

2.   Just below that code line or tag, add the following code:

<span class='item-control blog-admin'>
.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;}
<div class='control-panel'>
<li><a href=''>My Blogs</a></li>
<li><a expr:href='&quot;; + data:blog.blogId + &quot;#editor/src=sidebar&quot;' rel='nofollow'>New Post</a></li>
<li><a expr:href='&quot;; + data:blog.blogId + &quot;#editor/target=page&quot;' rel='nofollow'>New Page</a></li>
<li><a expr:href='&quot;; + data:blog.blogId + &quot;#posts&quot;' rel='nofollow'>All Posts</a></li>
<li><a expr:href='&quot;; + data:blog.blogId + &quot;#comments&quot;' rel='nofollow'>Comments</a></li>
<li><a expr:href='&quot;; + data:blog.blogId + &quot;#pageelements&quot;' rel='nofollow'>Layout</a></li>
<li><a expr:href='&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;; + data:blog.blogId + &quot;#basicsettings&quot;' rel='nofollow'>Settings</a></li>
<li><a expr:href='&quot;; + data:blog.blogId + &quot;#overviewstats&quot;' rel='nofollow'>Stats</a></li>
<li><a href=''>Logout</a></li>

3.  Click on Save Template and you have done.

You may also like How to Add Numbered Page Navigation on Blogger Blog

Now take a look at your blog. While you logged in to your blogger, you will notice your control panel appear on top of your blog as shown below,



  • Image
  • Image
  • Image
  • Image
  • Image


Post a Comment