How to Add SlideNote on Blogger

Document Sample
How to Add SlideNote on Blogger Powered By Docstoc
					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>
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;http://1.bp.blogspot.com/_1fRuBdlSpLw/TMB7q9wHR6I/AAAAAAAAAsk/qL9qKDOzEr4/s1600/slide
note.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.

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:16
posted:9/27/2012
language:English
pages:2
Description: How to Add SlideNote on Blogger