Admin bar widget for blogger

While working on our blog sometimes we get some ideas of new posts or to do some changes with the blog. So it becomes really hard to get to the create a new post option or edit template. This admin bar makes it easy to navigate straight away to those options.

This widget creates the links that will take straight to the blogger options. There are two types of these and each having its own different installation way. We will discuss both of these ways.

1. Installing the Custom type- This is the styled type of admin bar.You can see the screenshot below.

To install this widget go to PAGE ELEMENTS>>ADD A GADGET>>HTML/JAVASCRIPT and paste the code below.

<ul class="adminbar">

<li><a class="dashboard" href="http://www.blogger.com/home" target="_blank">Dashboard</a></li>

<li><a class="settings" href="http://www.blogger.com/blog-options-basic.g?blogID=####" target="_blank">Change Settings</a></li>

<li><a class="layout" href="http://www.blogger.com/rearrange?blogID=####" target="_blank">Change layout</a></li>

<li><a class="editpost" href="http://www.blogger.com/post.g?blogID=####" target="_blank">Edit posts</a></li>

<li><a class="newpost" href="http://www.blogger.com/post-create.g?blogID=####" target="_blank">New post</a></li>

</ul>

Remove #### with your blog’s id. You can find your blog’s id by going to design option and see the address bar.Save it.

Now Go to Edit HTML and search for ]]></b:skin> and paste this code above it.

ul.adminbar

    {      background-color:#EEEEEE;

        border:1px solid #E6E8E9;

        margin-bottom:8px;

        padding:5px 5px 0;

    }

    ul.adminbar li {

        background-color:#FAFAFA;

        border:1px solid white;

        list-style:none outside none;

        margin-bottom:6px;

        outline:1px solid #DDDDDD;

        padding:12px;

}

    ul.adminbar li a

    {      display:block;

        color:#888888 !important;

        text-shadow:1px 1px 0 #FFFFFF;

        text-decoration:none;

        font-size:22px;

        height:27px;

        margin:0 0 0 15px;

    }

    a.dashboard

    {      background:url(http://i54.tinypic.com/9iseuw.jpg) no-repeat 0px 0px;

        padding:4px 0 2px 47px;

    }

        a.settings

    {      background:url(http://i56.tinypic.com/2hdofnt.jpg) no-repeat 0px 0px;

        padding:5px 0 0 47px;

    }

        a.layout

    {      background:url(http://i55.tinypic.com/2d8s4qw.jpg) no-repeat 0px 0px;

        padding:5px 0 0 47px;

    }

        a.editpost

    {      background:url(http://i54.tinypic.com/10gwpl5.jpg) no-repeat 0px 0px;

        padding:5px 0 0 47px;

    }

        a.newpost

    {      background:url(http://i54.tinypic.com/4ky1xi.jpg) no-repeat 0px 0px;

        padding:5px 0 0 47px;

    }

Save the template and its done.
Now if your having trouble with widget there is another simple way to install it without the CSS styling.
2. Installing the classic type- This is a simple,easy and a classic way of installing the widget. Just go to PAGE ELEMENTS>>LINK LIST and add the following links in it.

Dashboard : http://www.blogger.com/home
Change Settings : http://www.blogger.com/blog-options-basic.g?blogID=####
Change Layout : http://www.blogger.com/rearrange?blogID=####
Edit Posts : http://www.blogger.com/post.g?blogID=####
New Post : http://www.blogger.com/post-create.g?blogID=####

Replace #### with your blog’s id and save these links to the link list.