How to Add SlideNote on Blogger

One of the coolest features to have in your website is a slide notification. SlideNote is a highly customizable and flexible jQuery sliding notification widget that displays your choice of element that you wish to display to your visitors. It is compatible with current major browsers.
Here’s what I’ve learned from Piyush Dungrani‘s tutorial.
Follow these steps:

• Go to Blogger Dashboard > Template > Edit HTML.
• Copy the code below and paste it before </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>

• Copy the following code below, paste it before ]] ></b:skin>.

/* ----- BloggerHowToTips.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; }

/* ----- BloggerHowToTips.Blogspot.com CSS END------ */

• Copy the code below. Paste it 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://bloggerhowtotips.blogspot.com/'>http://bloggerhowtotips.blogspot.com/</a&

gt; and learn ... <br/><a href='http://bloggerhowtotips.blogspot.com/'>Blogger 

How To</a> | <a

href='http://bloggerhowtotips.blogspot.com/'>Blogspot How To</a></p>

</div>

</div>

<script type='text/javascript'>

$(&#39;#note&#39;).slideNote({

closeImage: 

&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwdaCoTkSTv7YY3gk77Z18tWTe0d6K0TQbKE4GWKFSmw-58jUolQuDftCypww1WMAB7KdqxZ99eZrywwQyiCY1xOxDUfYgEW7JtiXqlMrykgtjgy5i8PcXbJvWsBwQEkpVYBWZ0yRWcusr/s1600/sli

denote.close.png&#39;

});

</script>

<!-- Notification Slider Ends -->

• Save template.

Note: Always save a backup of your template before editing it. Customize it by changing the value of CSS classes to your preference.