How to Add an Admin Panel in Blogger Blog

8:37 PM Gaurang Thakor
Gaurang Thakor
Tutorial about :- How to add an Admin Control Panel in Blogger Blog 
So in this post, we'll Learn how to add an admin panel with many awesome additons such as :-

 -access to the bloggers homepage
-creat a new post or post
-view all your posts
-comments
-blog'slayout or add or rearrange gadgets
-edit HTML or Template
-Refresh page or post
-open a new tab with your blog's homepage
-blog setting
-stats (overview)
-and last :- log out!

How to Add an Admin Panel in Blogger Blog
Adminpanel
Blogger AdminPanel 

 1st we need to do is get the ID of your blog by clicking on any options from Our Blog Dashboard
Bloggeradminpanel
Getting ID
withing the URL you will notice a string like above screenshot
 blogID=XXXXXXXXX

 XXXXXXXXX is the Unique ID of your blog...

 Copy the ID for the blog You wish to work so we can add adminpanel
  • Adding The AdminPanel To Blogger
  • Step - 1 
Go To Template --> Edit HTML button
Blogger EDIT HTML
  • Step - 2

 Click anywhere inside the code area and press CTRL+F key to open the blogger search box
  • Step - 3
paste the line inside the search box then hit Enter to Find it
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Note : if you can't find this line, try to find <body> tag
  • Step - 4 

 just below this link add the following code
<span class='item-control blog-admin'>
<style>
.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;}
</style>
<div class='control-panel'>
<ul>
<li><a href='http://www.blogger.com/home'>My Blogs</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#editor/target=page'>New Page</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#pageelements'>Layout</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#templatehtml'>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 href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#basicsettings'>Settings</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXX#overviewstats'>Stats</a></li>
<li><a href='http://www.blogger.com/logout.g'>Logout</a></li>
</ul>
</div>
</span>
Change XXXXXXXXXXXXXXX with your Unique Blog Id Previously Copied and be careful not to delete anything
  • Step - 4

 Now last click on the save template button to save changes!!

 now take a look at your blog while you are logged in to blogger and you shoul notice that your adminpanel appear on top of blog Enjoy

Gaurang Thakor

Author:

Facebook Comment

Subscribe to: Post Comments (Atom)