I have published several post on Removing, Hiding and Customizing Blogger Navbar. And I'm sure that by this time you have very much known to Blogger Navbar. Basically Blogger Navbar has not only social sharing feature but also has some shortcut admin control features. So, it is very important to have Blogger Navbar on. But if you have already removed Navabr and also want to have Admin Control Panel for your Blog then Adding an Admin Control Panel to your Blog is the best solution. And in this post I am gonna show how to add an Admin control panel in Blogger.
However removing or customizing Blogger Navbar also has its downside, because New Post, Customize and Log Out option is no longer will be visible. Beside that navigating through the blog could be really frustrating sometimes. As the result of the Navbar removal more clicks are required to access to Blogger Dashboard. The custom Admin Control Panel that I am introducing for Blogger has many cool options by which you can easily manage and control you blog directly from the blog page. The following option available in this Admin Control Panel...
When you will add this Admin Control Panel in your blog it will be located at the top of your Blog homepage. This Admin Control Panel will be invisible to your blog visitors. And it will only be visible to the Blog Admin when he is Logged In. Let's have a look how to add this Admin Control panel to Blogger.
Get Your Blog ID:
First you need to get your Blog ID. And you will get it from your Blog Dashboard. After going to your Blog Dashboard, now look at the Address Bar of your Browser. Copy your Blog ID. Your Blog ID is something like, as I shown in the below image.
Adding Admin Panel to Blogger:
Customization: Now Replace XXXXXXXXXXXXX with your Blog ID.
However removing or customizing Blogger Navbar also has its downside, because New Post, Customize and Log Out option is no longer will be visible. Beside that navigating through the blog could be really frustrating sometimes. As the result of the Navbar removal more clicks are required to access to Blogger Dashboard. The custom Admin Control Panel that I am introducing for Blogger has many cool options by which you can easily manage and control you blog directly from the blog page. The following option available in this Admin Control Panel...
- Access to Blogger Homepage.
- Creating a New Post and Page.
- View all Posts.
- Check all your Comments.
- Access to your Blog Layout.
- Editing the blog HTML page.
- Refresh current Post and Page.
- Open new tab with the Blog Homepage.
- Access to your Blog Settings.
- View your Blog traffic Status.
- And the final option is for Log Out.
When you will add this Admin Control Panel in your blog it will be located at the top of your Blog homepage. This Admin Control Panel will be invisible to your blog visitors. And it will only be visible to the Blog Admin when he is Logged In. Let's have a look how to add this Admin Control panel to Blogger.
Get Your Blog ID:
First you need to get your Blog ID. And you will get it from your Blog Dashboard. After going to your Blog Dashboard, now look at the Address Bar of your Browser. Copy your Blog ID. Your Blog ID is something like, as I shown in the below image.
Adding Admin Panel to Blogger:
- Sign into your Blogger Account and go to Dashboard.
- Then click on Template and then click on Edit HTML button. You will land on the HTML page.
- Here in the HTML page find <body> tag or Find the following line.
- Now just below the <body> tag or Above line, Paste the following code.
<body expr:class='"loading" + data:blog.mobileClass'>
<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>
Customization: Now Replace XXXXXXXXXXXXX with your Blog ID.
- Now click on Save Template button to apply it.
That it, Now view your blog and as the Admin of your blog you will see an Admin Control Panel at the top of your blog.
Stay with www.iTTimebd.com for more IT related Post
No comments:
Post a Comment