Bloggers always want to
do something unique in order to be ahead of their competitors, this is pretty
cool, well l found something new on my research today that l felt we will all
wanna try on our blog.
Today am going to teach
you how you can have all the necessary admin controls right on the top of your
homepage with no need to go through your blogger dashboard again.
This will show your
admin control panel at the top of your blog with all the necessary controls
from your blogger dashboard such as:
- Blogger dashboard
- Quick link to create a new page or a new post
- Access to view all posts on the blog
- Access to your comments
- Access to your blog’s layout where you can add or rearrange your gadgets
- Access to your blog template where you can edit the HTML
- Refresh button, you can use it to refresh the current page
- New Tab, which lets you open a new tab on your browser from within your homepage
- Access to your blog settings
- Access to your blog's stats
- And finally a Logout button
Note: these controls
will only be visible to the blog admins, so visitor won’t be able to see it.
The Result will look
like the screenshot below, click on “View original size” to
see the original size in new tab.
How to add an admin-bar to blogger?
There is no much task to do this; all
you have to do is follow these simple steps below:
- Go to your blogger dashboard
- Click on template
- Click Edit HTML
- Find the following code on your html using CTRL+ F
- If you are unable to find the above code, simply search for :
and paste the below code
just after any of the above tag.
<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>
Replace the xxxxxxxx with your blog I.D which you
can find by login into your blogger dashboard then click on the address bar and
copy the I.D as indicated on the Screenshot below.
Was this article helpful?
Please leave us a comment on the comment box below
No comments:
Post a Comment
Add Your Comments Here