DROP DOWN ARCHIVE

Who would have thought it would take me so long to make a few small changes...

I've finally changed the design of this, and even if it's not perfect it's pretty much what I want. I wanted to make everything wider and in particular have a drop down menu linking to my previous blog posts, but it took me an awful long time to figure out. I could find instructions on making drop down lists, and obviously most people have an archive on their blog, but I could find nothing about combining the two. Has nobody tried to do this on blogger before?

Surely not. Anyway I couldn't find any instructions on the web so I'm going to write some myself. Maybe someone else would find it useful one day? It's far from perfect but for someone like me with not alot of knowledge of this sort of thing it does the job.

Basically I used CSS to tell blogger to show a list of posts when the mouse is over an image (the ARCHIVE button above.) Click on Design, then 'Add a Gadget', and choose the HTML/Javascript option. Call it what you like and paste this into the content section:

<div class="menu" id="menu">

    <div class="eddiearchive">        

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkbTCZgfWzE9Yuaoa8v1y0FoS3elSO5g_WtL8Vj1MfS4B6fO5GJ6lDZYUdBVJEn-bQ6OCjcvh6dWj_KLqhpGXFWcBWj_MOs_NXgBQbWBX1BqfvPf3r9xC0ERqr_J37Y5QtemOx_kKilqE/s800/ARCHIVEBUTTONw.jpg" />

        <div class="eddiepopup">

            <script language="JavaScript" src="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Ffasteddiie.blogspot.com%2Ffeeds%2Fposts%2Fdefault%3Falt%3Drss&chan=n&num=10&desc=0&date=n&targ=n" type="text/javascript"></script>  

<noscript>

<a href="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Ffasteddiie.blogspot.com%2Ffeeds%2Fposts%2Fdefault%3Falt%3Drss&chan=n&num=10&desc=0&date=n&targ=n&html=y">View RSS feed</a>

</noscript>

<ul>

<li>

<a href="http://fasteddiie.blogspot.com/search?updated-min=2000-01-01T00:00:00Z&updated-max=2099-01-01T00:00:00Z&max-results=999"><b>ALL POSTS</b></a>

        </li></ul></div>

    </div>

</div>

Then just replace each coloured section of text with your own. The red section is where your archive button is located. I just uploaded mine to Picasa as it's what blogger normally uses.

For the orange section, go here and put "http://YOURBLOGNAME.blogspot.com/feeds/posts/default?alt=rss" into the URL field. I left everything else at it's default and set it to display 10 posts. Click generate javascript to get the code for it on the next screen.

The purple section is simply your blog's address.

Then I used CSS to tell blogger to show the list of posts when the mouse is over the 'ARCHIVE' image. For this click design, then Template Designer, Advanced, Add Css. Paste this in:

div.eddiearchive div.eddiepopup {
    display: none;
 }

 div.eddiearchive:hover div.eddiepopup {
    position: absolute;
    display: block;
 }
.tabs .widget li, .tabs .widget li {
float: none;
}
.content-outer, .header-outer, .main-outer, .main-inner, .footer-outer, .post, .comments, .widget, .date-header, .inline-ad {
z-index: 1;
}
.tabs-outer {
z-index: 2;
}

Click apply and you're done!

{{{PS. Since I wrote this I've changed it again, and it's now slightly more sophisticated. Not much, but this doesn't match what I've done above!}}}