Add Slider Notification/SlideNote Widget in Blogger

SlideNote is a jQuery Plugin to Display Sliding Notifications in your blogger blog. Displaying sliding notification Notes 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 using this kind of widget which is visible when you scroll the page towards the bottom, and it goes invisible when you are at the top of the page.

Slider Notification Widget Demo

LIVE DEMO

How To Add Slider Notification Widget in Blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

</head>

• Now Paste the Code Shown Below just above/before it

<style type="text/css">
.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; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://latest-hacks.googlecode.com/svn/gadgets/Sliding Description Panel/jquery.slidenote.min.js" type="text/javascript"></script>

• Now Find the code shown below using [ctrl+F]

</body>

• Now Paste the Code Shown Below just above/before it

<div class='slidenote' id='note'>
<div id='container'>
<h2>LATESTHACK</h2>
<span><em>Get All Blogger Tricks And Tips !!! :) </em></span>
<p>Visit now : <a href='http://latesthack.com/'>http://latesthack.com/</a> and learn ... </p>
</div>
</div>
<script type='text/javascript'>
$(&#39;#note&#39;).slideNote({
closeImage: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixzntCF5pnuSr1X-JnY_tQpPnOnQ0fODdeVBNjm-3kUSLtdlfSYx_CBe7KVUIX1cQSgG3D5u-WUbbfez8iNWKsZVniozxfn1rPrEbJEInRSbClaJSnvp1YsvGWtWrfW9wFEaNEAhm0cBU/s320/slidenote.close.png&#39;
});
</script>

• Now save your template

Like it? Share it.