Monday Made It - Chalkboard and Scroll Button

Seems like forever since I've been able to link up with 4th Grade Frolics for Monday Made It.  I have two things I'd like to share today.  The first is an awesome chalkboard I made for my new office for $6 (post coming soon about my office) out of an old door!

Thanks to one of my best friends, the old door was free!  My cat Phoebe likes to supervise all my projects!

 My daughter helped me paint the middle part with chalkboard paint.  We started off with spray paint (this is where the $6 comes from), but soon realized that was too hard for our puny hands.  My neighbor actually had a quart of chalkboard paint in her garage she wasn't planning on using and so she gave it to me.  What a life (actually hand) saver!

Next I painted the rest of the door with red paint.  I had this in my garage leftover from a Christmas project. 

 The last step, I used a glaze over the red to give it a more rustic, distressed look.  (Same glaze I used on my kitchen cabinets!)  My dog Paisley is checking out my finished product!

 As soon as I paint my new office and decorate, I will post a picture of it hanging up.  I can't wait to get it all done! 

My 2nd addition for Monday Made It is adding that awesome little "Scroll to Top" button at the bottom of my blog.  I love when blogs have those and had to have one for mine too!  Thanks to Cheers for School for posting a tutorial on how to do this.  You can click on her link above, or keep reading for a quick tutorial on how to do it.

HOW TO ADD A "SCROLL TO TOP" BUTTON on your blog:

Step 1. Go to your blogger Dashboard
           Click on Template
            Then click on Edit HTML



Step 2.   ctrl + F  and then type in the following code: </body>
 
Step 3.  Under </body> copy and paste the following code:

<style type="text/css">

#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}

</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type='text/javascript'>

    $(function() {

        $.fn.scrollToTop = function() {

            $(this).hide().removeAttr("href");

            if ($(window).scrollTop() != "0") {

                $(this).fadeIn("slow")

            }

            var scrollDiv = $(this);

            $(window).scroll(function() {

                if ($(window).scrollTop() == "0") {

                    $(scrollDiv).fadeOut("slow")

                } else {

                    $(scrollDiv).fadeIn("slow")

                }

            });

            $(this).click(function() {

                $("html, body").animate({

                    scrollTop: 0

                }, "slow")

            })

        }

    });

    $(function() {

        $("#w2b-StoTop").scrollToTop();

    });

</script>

<a href='#' id='w2b-StoTop' style='display:none;'>Scroll to Top </a>

Step 4.  Save your template and you are ready to go! 

You should have an awesome "Scroll to Top" button!  

I'm still trying to figure out a new name for my blog...