Home Menus How to Add Admin Control Penel in Blogger

How to Add Admin Control Penel in Blogger

In the previous I have posted a tutorial on how create drop-down menus , so this time I come to share with you  about "Admin Control penel in Blogger".In this tutorial, we will see how to add an "Admin Control Penl" menu with cool additional such as:

- Access to a Blogger's home page
- Create a new page or post
- View all your posts
- Access to Blogger's layout
-  Read your comments
- Edit HTML or costmize your blog's template
- Refresh crrent page or post
- Open a new tab with your blog's home page
- Access to blog's settings
- View your state
- and log out

We will put all of these option on the top of the page as a menu and we'll make it visible only to the administrator of blog, so our visitor will not be able to see it.

Step 1: Getting your Blog ID

Firs we need to do is getting the blo ID by clicking on any settings from your Blog Dashborad, for example "Post", once we have clicked there, take a look at your address bar on your browser:
Within the Url you can see like this:

blogID=XXXXXXXXX
XXXXXXXX is the unique identifier "ID" for your blog

Copy the blog ID which you want to use, so that you can add this ID to the link with your "Control Penel"

Step 2: Go to Blog Dashboard >> Template >> Edit Html

Admin Control Penel in Blogger

Step 3: Clici anywhere and press "Ctrl + F" to open search box and past the code inside the search box

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Note: If you can't find, you can try  <body> tag

Step 4: Just below this line, past 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=XXXXXXXXXXX#editor/src=sidebar'>New Post</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXX#editor/target=page'>New Page</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXX#posts'>All Posts</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXX#comments'>Comments</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXX#pageelements'>Layout</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXX#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=XXXXXXXXXXX#basicsettings'>Settings</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=XXXXXXXXXXX#overviewstats'>Stats</a></li>
<li><a href='http://www.blogger.com/logout.g'>Logout</a></li>
</ul>
</div>
</span>

Note: Change XXXXXXXXXXX to your own blog ID, and be careful not to delete anythings, like qoute or any other charater.

Step 5: Click save the template

Now you are done! Enjoy it!

Enjoyed this post?
Be sure to subscribe to get regular updates delivered to your email inbox, for free.



How to Add Admin Control Penel in Blogger How to Add Admin Control Penel in Blogger Reviewed by Unknown on 1/21/2015 07:41:00 AM Rating: 5

No comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.