Home » Blogger Tutorials, Tricks and Hacks » How to Add SlideNote on Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How to Add SlideNote on Blogger

How to Add SlideNote on Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


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>



<script type='text/javascript'>


closeImage: &#39;http://1.bp.blogspot.com/_1fRuBdlSpLw/TMB7q9wHR6I/AAAAAAAAAsk/qL9qKDOzEr4/s1600/slidenote.close.png&#39;



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


Liked It ? Please Share

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here