Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
First of all, this is the most foolish Blogger widget on this entire blog. This widget is very useful but still a dumb idea from me.Still it's an awesome navigation bar for Blogger admins.
This widget is inspired from the WordPress Admin Bar menu and Blogger Admin Control Panel widget. This widget will be only visible to blog admins. It'll provide you some quick actions in the front end of your Blogger blog. Let's get started:
Locate Your Unique Blog ID Number:
To add this widget, it's important to find your unique blog ID number. It's really easy. Just open your Blog's dashboard (overview, posts, and backend other pages) and copy your unique blog ID from address bar.
For example, your ID will look something like this:
http://www,.blogger.com/blogger.g?blogID=1415638240907948#posts
Red part of the above URL is my blog ID. Visit your blog and copy your unique blog ID.
Add Admin Bar To Blogger Template:
To add the control panel to your Blogger template, go to Template > Edit HTML. Search and add following code just above </body>:
<style>
#wpadminbar {
direction: ltr;
color: rgb(204, 204, 204);
font: 400 13px/28px sans-serif;
height: 28px;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
min-width: 600px;
z-index: 99999;
background: linear-gradient(to top, rgb(55, 55, 55) 0px, rgb(70, 70, 70) 5px) repeat scroll 0% 0% rgb(70, 70, 70);
}
#wpadminbar .quicklinks {
border-left: 1px solid transparent;
}
#wpadminbar div {
outline: 0px none;
}
#wpadminbar * {
height: auto;
width: auto;
margin: 0px;
padding: 0px;
position: static;
text-transform: none;
letter-spacing: normal;
font: 400 13px/28px sans-serif;
color: rgb(204, 204, 204);
text-shadow: 0px -1px 0px rgb(68, 68, 68);
-moz-box-sizing: content-box;
transition: none 0s ease 0s;
}
#wpadminbar {
direction: ltr;
color: rgb(204, 204, 204);
font: 400 13px/28px sans-serif;
}
#wpadminbar .quicklinks ul {
text-align: left;
}
#wpadminbar .ab-sub-wrapper, #wpadminbar ul, #wpadminbar ul li {
background: none repeat scroll 0px 0px transparent;
clear: none;
list-style: none outside none;
margin: 0px;
padding: 0px;
position: relative;
text-indent: 0px;
z-index: 99999;
}
#wpadminbar .quicklinks > ul > li {
border-right: 1px solid rgb(85, 85, 85);
}
#wpadminbar ul li {
background: none repeat scroll 0px 0px transparent;
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0px 0px;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
clear: none;
list-style: none outside none;
margin: 0px;
padding: 0px;
position: relative;
text-indent: 0px;
z-index: 99999;
}
#wpadminbar li {
float: left;
}
#wpadminbar .quicklinks > ul > li > a, #wpadminbar .quicklinks > ul > li > .ab-empty-item {
border-right: 1px solid rgb(51, 51, 51);
}
#wpadminbar .quicklinks a, #wpadminbar .quicklinks .ab-empty-item, #wpadminbar .shortlink-input {
height: 28px;
display: block;
padding: 0px 12px;
margin: 0px;
}
#wpadminbar a, #wpadminbar a:hover, #wpadminbar a img, #wpadminbar a img:hover {
outline: 0px none;
border: 0px none;
text-decoration: none;
background: none repeat scroll 0px 0px transparent;
}
#wpadminbar .ab-top-secondary {
float: right;
background: linear-gradient(to top, rgb(55, 55, 55) 0px, rgb(70, 70, 70) 5px) repeat scroll 0% 0% rgb(70, 70, 70);
}
#wpadminbar .quicklinks .ab-top-secondary > li {
border-left: 1px solid rgb(51, 51, 51);
border-right: 0px none;
float: right;
}
#wpadminbar ul li:last-child, #wpadminbar ul li:last-child .ab-item {
border-right: 0px none;
box-shadow: none;
}
#wpadminbar #wp-admin-bar-search .ab-item {
background: none repeat scroll 0% 0% transparent;
}
#wpadminbar #wp-admin-bar-search .ab-item {
padding: 0px;
}
#wpadminbar .quicklinks .ab-top-secondary > li > a, #wpadminbar .quicklinks .ab-top-secondary > li > .ab-empty-item {
border-left: 1px solid rgb(85, 85, 85);
border-right: 0px none;
}
#wpadminbar ul li:last-child, #wpadminbar ul li:last-child .ab-item {
border-right: 0px none;
box-shadow: none;
}
#wpadminbar #adminbarsearch {
height: 28px;
padding: 0px 2px;
}
#wpadminbar #adminbarsearch .adminbar-input {
font: 13px/24px sans-serif;
height: 24px;
width: 24px;
border: 0px none;
padding: 0px 3px 0px 23px;
margin: 0px;
color: rgb(204, 204, 204);
text-shadow: 0px -1px 0px rgb(68, 68, 68);
background-color: rgba(255, 255, 255, 0);
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj28b9E4prJNAbLzgGAVLnghfUUI68B9WpuPYgIA5eRH17OOV6miL_c29kKSoG7Nfq6j0XkDoYgfwp_JQjPN4KixsnU_fc-5o2UORtJLhrOzBENCn8gFoie_HCBkSvbgmwaRSPmqeOMVM/s1600/admin-bar-sprite.png");
background-position: 3px 2px;
background-repeat: no-repeat;
outline: 0px none;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
box-shadow: none;
-moz-box-sizing: border-box;
transition-duration: 400ms;
transition-property: width, background;
transition-timing-function: ease;
}
#wpadminbar .ab-icon {
position: relative;
float: left;
width: 16px;
height: 16px;
margin-top: 6px;
}
#wp-admin-bar-comments > .ab-item .ab-icon {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj28b9E4prJNAbLzgGAVLnghfUUI68B9WpuPYgIA5eRH17OOV6miL_c29kKSoG7Nfq6j0XkDoYgfwp_JQjPN4KixsnU_fc-5o2UORtJLhrOzBENCn8gFoie_HCBkSvbgmwaRSPmqeOMVM/s1600/admin-bar-sprite.png");
background-position: -1px -134px;
background-repeat: no-repeat;
}
#wpadminbar #wp-admin-bar-new-content > .ab-item .ab-icon {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj28b9E4prJNAbLzgGAVLnghfUUI68B9WpuPYgIA5eRH17OOV6miL_c29kKSoG7Nfq6j0XkDoYgfwp_JQjPN4KixsnU_fc-5o2UORtJLhrOzBENCn8gFoie_HCBkSvbgmwaRSPmqeOMVM/s1600/admin-bar-sprite.png");
background-position: -2px -182px;
background-repeat: no-repeat;
}
#wpadminbar a:focus, #wpadminbar a:active, #wpadminbar input[type="text"], #wpadminbar input[type="password"], #wpadminbar input[type="number"], #wpadminbar input[type="search"], #wpadminbar input[type="email"], #wpadminbar input[type="url"], #wpadminbar select, #wpadminbar textarea, #wpadminbar div {
outline: 0px none;
}
#wpadminbar #adminbarsearch .adminbar-button {
display: none;
}
#wpadminbar .ab-top-menu > li:hover > .ab-item, #wpadminbar .ab-top-menu > li.hover > .ab-item, #wpadminbar .ab-top-menu > li > .ab-item:focus, #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus {
color: rgb(250, 250, 250);
background: linear-gradient(to top, rgb(58, 58, 58), rgb(34, 34, 34)) repeat scroll 0% 0% rgb(34, 34, 34);
}
#wpadminbar .quicklinks > ul > li > a, #wpadminbar .quicklinks > ul > li > .ab-empty-item {
border-right: 1px solid rgb(51, 51, 51);
}
#wpadminbar #adminbarsearch .adminbar-input:focus {
color: rgb(85, 85, 85);
text-shadow: 0px 1px 0px rgb(255, 255, 255);
width: 200px;
background-color: rgba(255, 255, 255, 0.9);
cursor: text;
}
</style>
<span class='item-control blog-admin'>
<div id="wpadminbar" class="no-grav" role="navigation">
<div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Top navigation toolbar." tabindex="0">
<ul id="wp-admin-bar-root-default" class="ab-top-menu">
<li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://draft.blogger.com/blogger.g?blogID=BlogIdNumber#overview">BWidgets.com</a> </li>
<li id="wp-admin-bar-comments"><a class="ab-item" href="http://www.blogger.com/blogger.g?blogID=BlogIdNumber#comments" title="Moderate Comments"><span class="ab-icon"></span></a> </li>
<li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://www.blogger.com/blogger.g?blogID=BlogIdNumber#editor" title="Add New"><span class="ab-icon"></span><span class="ab-label">New</span></a> </li>
<li class="menupop"><a class="ab-item" aria-haspopup="true" href="http://www.blogger.com/logout" title="Logout"><span></span><span class="ab-label">Logout</span></a> </li>
</ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
<li id="wp-admin-bar-search" class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="/search" method="get" id="adminbarsearch"><input class="adminbar-input" id="adminbar-search" name="q" value="" maxlength="150" type="text"><input class="adminbar-button" value="Search" type="submit"></form></div> </li>
</ul> </div>
</div>
</span>
Replace all instances of BlogIdNumber with your unique BlogID. Save your template & that's it!
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
