22 September 2015

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.


0 Sweet Notes

Post a Comment

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

Get my eBook, How to Be Forgotten

a collection of stories and journal entries from the days that made up 2014.