adf.ly - shorten links and earn money!

How To Slide Notification Widget in Blogger

Many popular websites use this widget to give preference to readers. 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.



Note: Before making any changes to your template, take a full backup of your blogger template.

#Step
1. Go to Dashboard ->> Design ->>; Edit HTML

2. Search this code (Ctrl + F), </head>. Copy the code below, before it.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://howtohouse.googlecode.com/files/jquery.slidenote.min.js' type='text/javascript'/>
3. Copy below code and paste it just before the ]]></b:skin>.
/* -----CSS START------ */
.slidenote { width: 320px; height: 130px; 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; }
/* -----CSS END------ */
You can edit the code in red according to your needs.

4.  Now, copy below code and paste it just before the </body> tag.
<!-- Notification Slider Start -->
<div class='slidenote' id='note'>
<div id='container'>
<h2>Visit HOW-TO HOUSE :  <a href='http://www.place2how-to.com/'>www.place2how-to.com </a></h2>
<span><em>Get many useful tutorial for many useful things...</em></span>
<p>&#8226;  <a href='http://www.place2how-to.com/search/label/Pro%20Evolution%20Soccer'>Pro Evolution Soccer tricks</a></p>
<p>&#8226;  <a href='http://www.place2how-to.com/search/label/Blogger%20Tutorial'>Blogger Tips and Tutorial</a></p>
<p>&#8226;  <a href='http://www.place2how-to.com/search/label/Make%20money'>Make Money Online</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 -->

Edit code in red with your information that you want to be highlight.

5. Save. You're done. Refresh to see the result.

Share it to recommend it!

1 comment:

  1. Find out how 1,000's of people like YOU are working for a LIVING from home and are living their dreams right NOW.

    Get daily ideas and instructions for making $1,000s per day ONLINE for FREE.

    GET FREE ACCESS TODAY

    ReplyDelete

Drop your comment. Ask or suggestion.

Join us on Faceboook Page too.