Bloggercodes.com

Do you like this story?

Slide note is jQuery plugin which allows to display notification in blogger blogs.Displaying  Slide note Widget on your blog is a great way to show the post which you think your readers should notice.You should have noticed that most of the popular blogs use Slide note for their notification purposes.

This notification in blog appears when you scroll down the blog page and it disappears when you scroll up the page or when you are at the top of page.

METHOD:

Note : Back up your template before applying the code in template by navigating to  dashboard –> Design tab –>Edit html –> Download Full Template.
1) Login to your Blogger dashboard –> Design tab –> Edit html.
2) Copy the below code and paste it just before the </head> tag to insert jQuery plugin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://tntechie.googlecode.com/files/jquery.slidenote.min.js" type="text/javascript"></script>

3) Copy the below CSS code and paste it before ]]></b:skin>.

/* ----- tntechie 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; }
/* ----- tntechie CSS END------ */

4) Now copy the below code and paste it before </body> tag.

<!-- Notification Slider Start -->
<div class='slidenote' id='note'>
<div id='container'>
<h2>Blogger Tips</h2>
<span><em>Get All Blogger and Blogspot tutorial and tips !!! :) </em></span>
<p><a href='http://www.tntechie.com/search/label/BLOGGING/'>VISIT NOW</a> </p>
</div>
</div>
<script type='text/javascript'>
$(&#39;#note&#39;).slideNote({ 
closeImage: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfKhhaxJYYFJI5ZJC68mysYHJO8jbsJroNRrwQ3kM058WT85rQ1xsG0pFJIddHWHcd9Kz9Zq4cN5zxFXUCGvKh5hia1Pdpu3HD60IHadf5djo7yzHmEqENnUQWZ-JBxh2NF6j1n51ZhNWI/s1600/slidenote.close.png&#39;
});
</script>
<!-- Notification Slider Ends -->

5) save the template and you are done.
#You can customize the look by changing the CSS part.
#You can customize the content or notification in step 4).
#You can see the demo on this page itself.