Most Blogger users like me hide the
Blogger navigation bar in their blog. I don’t knw why but it kind of distracting. However, removing the Blogger Navbar
also has its downside because the admin links
for “New post”, “Customize and
log Out” will no longer be visible and navigating through the blog functions
could be frustrating.
So in this tutorial, we‘ll see how
to add “admin Control Panel” menu with many cool additions such as;
1.
Access to the Blogger’s homepage
2.
Create a New Page or Post
3.
View all your comments
4.
Read your comments
5.
Access the Blog’s layout to add or
rearrange gadgets
6.
Edit the HTML of your Template
7.
Refresh current page or post
8.
Open a new tab with your blog’s
homepage
9.
Access the blog’s setting
10.
View your stats
11.
And finally logout
We will put all these options on the
top of your page as a menu and we will make it visible ony to the administrator
of the blog, so your blog visitors will not be able to see it.
The result will be something like
this…………
Getting
the Blog ID
The first thing we need to do is get
the iD of our blog by clicking on any option from our Blog Dashboard, for example Settings. Once
we have clicked there, take a look at the address bar in your browser.
Within the url you will notice a string
like this:
blogID=XXXXXXXXX
Where XXXXXXXXX is the unique
identifier (ID) for your blog.
Open Microsoft word and Copy the ID for the blog you wish to
work with, so we can add this in the links for your admin control panel.
Note: The Admin Control Panel will
only be visible when the blog author is logged in. it is invisible to blog
readers.
Ensure you backup your blog first
when adding features, its a general rule every webmaster do, if you don’t know how to Backup/Restore a blog, click this article How To Backup/Restore Blogger Template
Adding
the admin control panel to Blogger template
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’s search box
Step 3
Paste this line inside the search
box and hit enter to find it:
<body expr:class='"loading" + data:blog.mobileClass'>
Note: If you cant find this line,
try to find the <body> tag.
Step 4.
Just below the line, 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>
<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 XXXXXXXXXXXXX with your
unique Blog ID previously copied, and be careful not to delete anything, like
quote or any other character.
Step 5.
Click on the Save template button to save the changes.
Now take a look at your blog. While you
are logged in to Blogger, you should notice control panel appear on top of your
Blog. Enjoy!
With this admin control panel for
Blogger, you can easily access the functions of the blog and you will not have
to always open your blog page and the Blogger homepage at the same time.
0 comments:
Post a Comment