How to Add Slider Notification Widget in Blogger

SlideNote is a jQuery Plugin to Display Sliding Notifications in your blogger blogs and websites etc. Displaying sliding notification Notes as a Widget on your blog is a great way to showcase the stuff which you think your readers should notice. You might have noticed that many popular blogs are having that kind of sliding notifications area visible as you scroll the page towards the bottom of the page, and it goes invisible when you are at the top of the page.

SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application. SlideNote is compatible with jQuery 1.4.3 and current versions of major browsers. IE8 is the only version of Internet Explorer that is officially supported. I have tried to make it available for blogger users as a gadget, lets move ahead and see how we can add this wonderful widget in your blog. 

Steps to Add Slider Notification Widget in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design> Edit HTML.

#Step 2. Include SlideNote in the header of your page. Make sure it is included after jQuery.

- Copy below code and paste it just before the </head> tag.<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/bloggerhowto/blogger-how-to/jquery.slidenote.min.js" type="text/javascript"></script>
#Step 3. Copy below code and paste it just 
before the ]]></b:skin>./* ----- LinkToHow.Blogspot.com CSS START------ */
.slidenote { width: 540px; height: 140px; background: #FBEC78; padding: 1em;
-moz-box-shadow: -0.2em -0.2em 0.7em #333; -webkit-box-shadow: -0.2em -0.2em 0.7em #333;}
.slidenote img { float: left; margin-left: -2em; margin-top: -2em; }
.slidenote img:hover { margin-top: -1.95em; }
/* ----- LinkToHow.Blogspot.com CSS END------ */

#Step 4. Now Copy below code and paste it just before the </body> tag.<!-- Notification Slider Start -->
<div class='slidenote' id='note'>
<div id='container'>
<h2>Blogger How to Tips</h2>
<span><em>Get All Blogger and Blogspot Related Tips !!! :) </em></span>
<p>Visit now : <a href='http://prohackersden.blogspot.com/'>http:// prohackersden .blogspot.com/</a> and learn ... <br/><a href='http:// prohackersden .blogspot.com/'>LinkToHow</a> | <a
href='http:// prohackersden .blogspot.com/'> prohackersden </a></p>
</div>
</div>
<script type='text/javascript'>
$(&#39;#note&#39;).slideNote({
closeImage: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWFdw33LimlaedfYfMfYq5A6llfeST4m7GeaknbRvVah-TB46OWgagDq3bufiwyjtaq6MUblBHgZp6Bc197WxobuL1FFtS4ZNDd6w06n7u4Ww4CUAp4EpyowBXRDwmhc1e7j79dBxAYPH_/s1600/slidenote.close.png&#39;
});
</script>
<!-- Notification Slider Ends -->

#Step 5. Save Template and done!. You can change the value of CSS classes as per your need. Scroll down the page to the bottom of the page and you will see the notification.

Download the full plugin including the un-minified source code, demo page, README, and sample stylesheet :http://slidenote.info/download/jquery.slidenote.zip

SlideNote Options

SlideNote offers a set of five options that allow you to modify the behavior and/or content of the script.

• where specifies how far down the user must scroll before the notification slides into view.
• corner controls from which side of the screen the notification will slide in.
• URL tells SlideNote from where to pull the data to use as the content of the notification. If no container is specified, then the entire page will be used.
• container is to be used in conjunction with URL. When specified, it will only pull content from the element having the specified ID from the specified URL.
• closeImage displays the image at the specified URL. When clicked, it will slide the note out of view. The note will not display until the next time the user scrolls passed the wherevalue.