Awesome Blogger Admin Dashboard with JQuery Toggle Button

When you compare two CMS Blogger Vs Wordpress, which one is best platform for blogging? Obviously you will be get so many responses to choose Wordpress, Wordpress and Wordpress. Because Wordpress provide a facility to blog admin to making changes or customize their blogs with comfort and speed. Wordpress provide admin Dashboard in which admin can create and update post or page, manage comments, change settings etc. And other most important feature of Wordpress is Plugins, you can install SEO, Social Icons, Related Post etc. plugins, no need to write extra code or edit theme.

But Blogger officially does not offer these type facilities in front of you blog design. So we design an ultimate Blogger Admin Dashboard, one of the most powerful customizations feature for Blogger blogs. You can easily install a toggle button to hide or show blog Admin Control Panel, the advantage of this button is that your blog design does not directly affects, and it is very useful for blog designs where the appearance of the dashboard look at top left corner. So this CPanel is distracts from the overall design of the blog.

The most important feature of this admin Dashboard I personally recommended is “Download Template”. Because of I always forget to take a Backup first, before making changes in my blog template.

In this blog Admin Control Panel we not only add blogger features but also add some of important Google services links like Analytics, Adsense, Webmaster, Google Code, Feedburner, Google Drive, Google Plus and Gmail to access easily.

This Admin Dashboard will only be visible to blog administrator, not to regular visitors. It means this CPanel will only visible or work, when the blog administrator is logged in into his blogger account.

Install Admin Control Panel in Blogger:

Go to Dashboard on Blogger
Click on >> Template
Click on >> Edit HTML
Search for>> <body >
Add below code after <body> tag:

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

<link href='http://googledrive.com/host/0B5suMngBCm4DYnF4eTBSRG1xSDg' media='screen' rel='stylesheet' type='text/css'/>



<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

/*!

* classie - class helper functions

* from bonzo https://github.com/ded/bonzo

*

* classie.has( elem, 'my-class' ) -> true/false

* classie.add( elem, 'my-new-class' )

* classie.remove( elem, 'my-unwanted-class' )

* classie.toggle( elem, 'my-class' )

*/

/*jshint browser: true, strict: true, undef: true */

/*global define: false */

( function( window ) {

'use strict';

function classReg( className ) {

return new RegExp("(^|\\s+)" + className + "(\\s+|$)");

}

var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {

hasClass = function( elem, c ) {

    return elem.classList.contains( c );

};

addClass = function( elem, c ) {

    elem.classList.add( c );

};

removeClass = function( elem, c ) {

    elem.classList.remove( c );

};

}

else {

hasClass = function( elem, c ) {

    return classReg( c ).test( elem.className );

};

addClass = function( elem, c ) {

    if ( !hasClass( elem, c ) ) {

      elem.className = elem.className + ' ' + c;

    }

};

removeClass = function( elem, c ) {

    elem.className = elem.className.replace( classReg( c ), ' ' );

};

}

function toggleClass( elem, c ) {

var fn = hasClass( elem, c ) ? removeClass : addClass;

fn( elem, c );

}

var classie = {

// full names

hasClass: hasClass,

addClass: addClass,

removeClass: removeClass,

toggleClass: toggleClass,

// short names

has: hasClass,

add: addClass,

remove: removeClass,

toggle: toggleClass

};

// transport

if ( typeof define === 'function' && define.amd ) {

// AMD

define( classie );

} else {

// browser global

window.classie = classie;

}

})( window );

                var bodyEl = document.body,

                                content = document.querySelector( '.content-wrap' ),

                                openbtn = document.getElementById( 'open-button' ),

                                closebtn = document.getElementById( 'close-button' ),

                                isOpen = false;

                function init() {

                                initEvents();

                }

                function initEvents() {

                                openbtn.addEventListener( 'click', toggleMenu );

                                if( closebtn ) {

                                                closebtn.addEventListener( 'click', toggleMenu );

                                }

                                // close the menu element if the target it´s not the menu element or one of its descendants..

                                content.addEventListener( 'click', function(ev) {

                                                var target = ev.target;

                                                if( isOpen && target !== openbtn ) {

                                                                toggleMenu();

                                                }

                                } );

                }

                function toggleMenu() {

                                if( isOpen ) {

                                                classie.remove( bodyEl, 'show-menu' );

                                }

                                else {

                                classie.add( bodyEl, 'show-menu' );

                                }

                isOpen = !isOpen;

                }

                init();

})();

        </script>



<span class='item-control blog-admin'>

<div class='container'>

<div class='menu-wrap'>

<nav class='menu-top'>

<div class='profile'><img alt='#' src='Author Image'/><span>Author Name</span></div>

<div class='icon-list'>

<a href='https://google.com/analytics/web/?hl=en' target='_blank' title='Analytics'><i class='fa fa-fw fa-bar-chart'/></a>

<a href='https://www.google.com/adsense/app' target='_blank' title='Adsense'><i class='fa fa-fw fa-usd'/></a>

<a href='https://www.google.com/webmasters/tools/wmxbot-fetch-ac?authuser=0' target='_blank' title='Webmaster'><i class='fa fa-fw fa-desktop'/></a>

<a href='https://code.google.com/' target='_blank' title='Google Code'><i class='fa fa-fw fa-code'/></a>

<a href='https://drive.google.com/' target='_blank' title='Google Drive'><i class='fa fa-fw fa-dropbox'/></a>

<a href='https://feedburner.google.com' target='_blank' title='RSS'><i class='fa fa-fw fa-rss'/></a>

<a href='https://plus.google.com/u/0/' target='_blank' title='GPlus'><i class='fa fa-fw fa-google-plus'/></a>

<a href='https://mail.google.com/mail/u/0/#inbox' target='_blank' title='Gmail'><i class='fa fa-fw fa-envelope-o'/></a>

</div>

</nav>

<nav class='menu-side'>

<li>Admin CPanel</li><br/>

<li><a expr:href='data:blog.homepageUrl' target='_blank' title='Visit Blog'><img alt='logo' src='http://Blog URL Here/favicon.ico'/> <data:blog.title/></a></li>

<ul class='main'>

<li><a expr:href='"https://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#overview/src=dashboard"' target='_blank' title='Dashboard'><i class='fa fa-fw fa-dashboard'/> Dashboard</a></li>

<li><a href='#'><i class='fa fa-fw fa-paste'/> Posting</a>

<ul>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/src=sidebar"' target='_blank' title='New Post'><i class='fa fa-fw fa-file'/> Create Post</a></li>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#posts"' target='_blank' title='View Posts'><i class='fa fa-fw fa-files-o'/> View Posts</a></li>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=page"' target='_blank' title='New Page'><i class='fa fa-fw fa-clipboard'/> Create Page</a></li>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pages"' target='_blank' title='All Pages'><i class='fa fa-fw fa-copy'/> View Pages</a></li>

<li><a expr:href='"https://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=post;postID=" + data:blog.postId + ""' target='_blank' title='Edit Post'><i class='fa fa-fw fa-edit'/> Edit Post</a></li>

</ul>

</li>

<li><a href='#'><i class='fa fa-fw fa-newspaper-o'/> Template</a>

<ul>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pageelements"' target='_blank' title='Page Element'> <i class='fa fa-fw fa-th-list'/> Layout</a></li>

<li><a expr:href='"http://www.blogger.com/template-editor.g?blogID=" + data:blog.blogId' target='_blank' title='Customize'><i class='fa fa-fw fa-puzzle-piece'/> Customize</a></li>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#templatehtml"' target='_blank' title='Edit HTML'> <i class='fa fa-fw fa-pencil-square-o'/> Edit Template</a></li>

<li><a expr:href='"http://www.blogger.com/blogger-nongwt.do?blogID=" + data:blog.blogId + "&action=download&expandWidget=true"' target='_blank' title='Take Backup'><i class='fa fa-fw fa-download'/> Download Template</a></li>

</ul>

</li>

<li><a href='#' title='Comments'><i class='fa fa-fw fa-comments'/> Comments</a>

<ul>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#publishedcomments"' target='_blank' title='Published Comments'><i class='fa fa-fw fa-comment'/> Published Comments</a></li>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pendingcomments"' target='_blank' title='Pendding Comments'><i class='fa fa-fw fa-comment-o'/> Pending Comments</a></li>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#spamcomments"' target='_blank' title='Spam Comments'><i class='fa fa-fw fa-ban'/> Spam Comments</a></li>

</ul>

</li>

<li><a href='#'><i class='fa fa-fw fa-area-chart'/> Stats</a>

<ul>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#overviewstats"' target='_blank' title='Ststs Overview'><i class='fa fa-fw fa-stack-overflow'/> Overview</a></li>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#postsstats"' target='_blank' title='Posts Stats'><i class='fa fa-fw fa-bar-chart-o'/> Post Stats</a></li>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#trafficsourcesstats"' target='_blank' title='Traffic Sources'><i class='fa fa-fw fa-signal'/> Traffic Source</a></li>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#audiencestats"' target='_blank' title='Audience'><i class='fa fa-fw fa-area-chart'/> Audience</a></li>

</ul></li>

<li><a href='#'><i class='fa fa-fw fa-cogs'/> Settings</a>

<ul>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"' target='_blank'><i class='fa fa-fw fa-wrench'/> Basics</a></li>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#postandcommentsettings"' target='_blank'><i class='fa fa-fw fa-weixin'/> Post & Comments</a></li>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#emailandmobilesettings"' target='_blank'><i class='fa fa-fw fa-mobile'/> Mobile & Email</a></li>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#languageandformattingsettings"' target='_blank'><i class='fa fa-fw fa-bullhorn'/> Language</a></li>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#searchsettings"' target='_blank'><i class='fa fa-fw fa-search'/> Search Preference</a></li>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#othersettings"' target='_blank'><i class='fa fa-fw fa-area-chart'/> Other</a></li>

</ul>

</li>

<li><a href='http://www.blogger.com/logout.g'><i class='fa fa-fw fa-power-off'/> Logout</a></li>

</ul>

</nav>

</div>

<button class='menu-button' id='open-button'>Open Menu</button>

</div>

</span>