As you know Blogger.com is one of the best blogging platform available for free of cost. There are lot of Blogger.com tweaks and hacks are available online. Here I got some fresh and Interesting Blogger hack. The default Dashboard of Blogger is not bad, but it seems nice to change it. In this post I am gonna explain “How to setup custom Control panel(Dashboard) for Blogger.
Custom Control Panel For Blogger
This control panel only change some alignment of Blogger links and looks good too. We can’t add any extra features which Blogger doesn’t provide. As an Introduction the options available in this control panel are featured below.- Blogger’s Homepage link
- Create new Post or Page
- All Posts
- Comments
- Edit Layout option
- HTML and Template edit option.
- Blog settings
- Stat Viewer
- Logout
How To Setup
1.Getting your blog ID is the first step to do our job. Go to your default control panel, there you can see your blog ID in your url box.
Copy and save the Blog ID
2.Go to Template -> Edit HTML
3.Find given code in your template
<body expr:class=’"loading" + data:blog.mobileClass’>
If the code is not there then try
<body>
4.Just below the tag paste the given 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>
6. Replace the XXXXXXXXXXXXX with your blog ID
7.Save Template
Check your blog, you can see a control panel above your blog just like WordPress. Enjoy all features of Blogger without exiting your blog home page.
0 comments:
Post a Comment