How to Add slide message (special) to blogger. 0

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. 

Now how to add this widget on blog follow simple step..........

* First go to blogger Dashboard.

* Now click Design Tab and Edit HTML.

* Now expand your template.

* Find with CTRL+F key tjis code  </head> 


* Now copy below code And paste before </head> 

<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>

* Now find again this code ]]></b:skin>

 *  Now copy below code and paste just before this code ]]></b:skin>

/* ----- Blogger9.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; }
/* ----- Blogger9.com CSS END------ */

* Find </body> This code and copy below code paste before it.

<!-- 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> 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/AVvXsEhVFg-DPllVWbT2jxTe9xVLFS2SpjK8RVL1rEwKWkmE1gcJ204DmzsAMT8UNC_rv5DnpBNCdbSuvFsIKzq17_yCvqLauH-I_7Yi0MKrbhkdij6bAj6EVKhrlwiVxyu8qtliqkDDOxxVyp8L/s1600/slidenote.close.png&#39;
});
</script>
<!-- Notification Slider Ends -->

* Now save your template and you are done.

blogger tutorials Social Bookmarking Blogger Widget

I'm reading: How to Add slide message (special) to blogger. ~