Monday, July 15, 2013

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.

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;}
<script type="text/javascript" src=""></script>
<script type='text/javascript'>
    $(function() {
        $.fn.scrollToTop = function() {
            if ($(window).scrollTop() != "0") {
            var scrollDiv = $(this);
            $(window).scroll(function() {
                if ($(window).scrollTop() == "0") {
                } else {
            $(this).click(function() {
                $("html, body").animate({
                    scrollTop: 0
                }, "slow")
    $(function() {
<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!  


  1. Thanks for the tutorial for the Scroll Button.I also LOVE your red door. My kitchen and dining room are painted red. It doesn't look as crazy as it may sound. :)

    I just found your blog!
    Fun In 5th

  2. I love the door! I actually bought chalkboard spray paint I'm worried :( I have antique windows that I paint and wanted to try that on the glass. Maybe that will be my next Monday Made It venture. I love your blog! :)And I like the name! I've been debating on changing mine...Mine is too long! lol!!
    Ramblings of a fifth and sixth grade teacher....

  3. Cute idea! Come check out my MMI! :)

  4. The spray paint worked just as great as the can of paint, I just had a hard time using the spray can because I'm a weakling! LOL Can't wait to see how it turns out on the windows!