How To Add Slider (pop up) Notification in Blogger

0
510
views
SlideNote is a jQuery Plugin to Display Sliding Notifications,subscription request,Links, in your blog or website..Its is Like a popup subscription or message to you visitors..It adds a new attractive and professional looks to your blog.

It will slide when someone scroll down to your blog.and hides when visitor is on top of the blog.it can also be closed if someone is not intrested in it..

So if you cannot wait ti add this gadget to your blog,here are the steps to implement on How To Add Slider ( Pop Up ) Notification To Blogger..
Login to Your Blogger Dashboard.
Go To Design->Edit Html
Find </head> and paste the below code before/above it.

<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 Copy below code and paste it just before the ]]></b:skin>. 

/* —– step2problogging.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; }
/* —– step2problogging.blogspot.com CSS END—— */

 Now finally Copy below code and paste it just before the </body> tag.

<!– Notification Slider Start –>
<div class=’slidenote’ id=’note’>
<div id=’container’>
<h2>problogging</h2>
<span><em>All Blogger and Blogspot Help ,tips,tricks,customization and hacks,Facebook,tricks and news !!! 🙂 </em></span>
<p>Visit now : <a href=’http://step2problogging.blogspot.com/’>http://step2problogging.blogspot.com/</a> and learn … <br/><a href=’http://step2problogging.blogspot.com/’>problogging</a> | <a
href=’http://step2problogging.blogspot.com/’>problogging</a></p>
</div>
</div>
<script type=’text/javascript’>
$(&#39;#note&#39;).slideNote({
closeImage: &#39;http://1.bp.blogspot.com/_1fRuBdlSpLw/TMB7q9wHR6I/AAAAAAAAAsk/qL9qKDOzEr4/s1600/slidenote.close.png&#39;
});
</script>
<!– Notification Slider Ends –>

Preview ,SAve it…

SlideNote EDIT Options


SlideNote offers a set of five options that allow you to modify the behavior and/or content of the script.

where specifies how far down the user must scroll before the notification slides into view.


corner controls from which side of the screen the notification will slide in.


URL tells SlideNote from where to pull the data to use as the content of the notification. If no container is specified, then the entire page will be used.

container is to be used in conjunction with URL. When specified, it will only pull content from the element having the specified ID from the specified URL.


closeImage displays the image at the specified URL. When clicked, it will slide the note out of view. The note will not display until the next time the user scrolls passed the wherevalue. 

Leave a Reply