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

12:00 PM

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,! 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.


<script src='' type='text/javascript'/>
// hide #mbz-sidebar-widget first
// fade in #mbz-sidebar-widget
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() &gt; 200) {
} else {

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


#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.

You Might Also Like

0 Sweet Notes

All comments I receive are cherished for many hours after reading them. Thank you for taking the time to type something to me.

xx Nicole Rose