The new Blogger added some links to the navbar at the top of your blog, but wouldn't it be nice to have a few more handy links? And who wants to scroll all the way back to the top--why not have a floating blogger admin menu, like the one I use here at WITFITS?

The following Blogger Hack will help you to implement a similar menu for your blog on the New Blogger. The menu will float above the rest of your content (in other words, it's always on top) and will be only visible to you, the blog owner/admin. The best part: it's really easy to implement.

1. In your Blogger Dashboard, go to Layout->Edit HTML.
2. As is always a good idea when modifying your template, make a backup copy just in case something goes terribly, terribly wrong.
3. First, let's define a style in our stylesheet to control the appearance and positioning of the admin menu. Find the following, near the top of your template:
   
   1. ]]></b:skin>
   
   This is the end of the style section of the header of your blog's HTML.
   
4. Insert the following into your template, just above the line you found in step 3:
   
   1. /* ADMIN MENU STYLE */
      
   2. div.adminMenu {
   3. position: fixed;
   4. top: 20px;
   5. right: 20px;
   6. padding-top: 6px;
   7. padding-right: 10px;
   8. padding-bottom: 6px;
   9. padding-left: 10px;
   10. border: 2px solid black;
   11. background-color: #ff6600;
   12. color: white;
   13. font: normal normal normal 10px trebuchet ms;
   14. text-align: center;
   15. }
   16. 
       
   17. div.adminMenu a:link {
   18. color: white;
   19. }
   20. 
       
   21. div.adminMenu a:visited {
   22. color: white;
   23. }
   24. 
       
   25. div.adminMenu a:hover {
   26. color: black;
   27. }
       
   
   You can modify this to suit your preferences. Line 1 is a comment so you can easily find it. Line 3 sets the position of the menu to fixed with regard to the parent element (which will be the body of your blog), with lines 4 and 5 setting the position (in this case, 20 pixels from the top and right of the browser window--you could change these values or even make it float near the bottom or left sides if you wanted). Lines 6-9 simply add some padding between the border of the menu and the internal elements (which will be text links). Line 10 sets the border of the menu, 11 the background color (orange in this case), 12 the color of the text, 13 the font and font size to use, and 14 how the text should be aligned within the box. Lines 17-27 simply style the links inside our menu--in this case, making the text white for links and visited links, and black when the mouse is hovered over.
5. Now you need to insert the HTML that will draw this menu. Scroll down to the bottom of your template, right before the following:
   
   1. </body>
   2. </html>


6. Insert the following just above the section you found in step 5:
   
   1. <!-- ADMIN MENU -->
   2. <div class='item-control blog-admin'>
   3. <div class='adminMenu'>
   4. <a href='http://www2.blogger.com/home'>DASHBOARD</a><br/>
   5. <a href= 'http://www2.blogger.com/post-create.g?blogID=YOURBLOGID' >NEW POST</a><br/>
   6. <a href= 'http://www2.blogger.com/html?blogID=YOURBLOGID' >TEMPLATE</a><br/>
   7. <a href='http://help.blogger.com/'>HELP</a><br/>
   8. <a href='http://www2.blogger.com/logout.g'>SIGN OUT</a><br/>
   9. </div>
   10. </div>
   
   This adds your admin menu to your blog. Lines 4-8 contain useful links (Dashboard, New Post, Template, Help, and Sign Out), but you could put whatever you wanted here (links to Photobucket, FlickR, another one of your blogs, your site-statistics, etc.)
7. In the code you just inserted, you will need to replace the phrase YOURBLOGID (boldfaced in step 6 for clarity) with your blogID. This is easy to find while editing your template, simply look in the address bar of your browser, you should see something like:
   http://www.blogger.com/html?blogID=123456789
   The number at the end (in this example, 123456789) is your blogID.
8. Save your changes and enjoy your new admin menu!

Let me know how this works for you, and what kind of useful links you put in your menu!