How to Add a Floating, Fade In Gadget to Your Blog

Today's tutorial was prompted by a question I received in my advice column contact form. :) It read:

I LOVE everything that you did with Ingrid's blog, http://www.smilingrid.com/! When you scroll down, that tabs bar up top pops up is the bomb. Could you please do a tutorial on how to code it?? I have some web designer friends, so don't be afraid to "speak code" as they will explain it to me haha <33

This tutorial is going to be on how to create a floating, fade in gadget (specifically a Blogger pagelist). Let's get started. :)

The instructions.

1. Select the blog you want to edit.
2. Make sure you have a pagelist gadget installed on your blog.
3. Install the following codes to your template.
4. Save and view your changes.

Javascript:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){
// hide #mbz-sidebar-widget first
$(&quot;#PageList1&quot;).hide();
// fade in #mbz-sidebar-widget
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() &gt; 200) {
$(&#39;#PageList1&#39;).fadeIn();
} else {
$(&#39;#PageList1&#39;).fadeOut();
}
});
});
});
</script>

Place this code above the "</body>"  section in the HTML of your template.

CSS:

#PageList1 { position: fixed;

top: -30px;

left: 0px;

padding-left: 30px;

width: 100%;

z-index: 9;

background-color: white;

height: 55px;

line-height: 35px;

text-transform: uppercase;

box-shadow: 2px 2px 3px #eee;

display: none; }

#PageList1 a { font-family: 'Raleway', sans-serif;

line-height: 3; }

Go to Template >>> Customize >>> Add CSS and paste this code in box.

Easy peasy, right? :)

If you have any comments, questions or concerns, please feel free to contact me.