How To Slide Notification Widget in Blogger

	Share
Tweet

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.

DEMO

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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLB7AlPpAbAzU0vrbu3Cy__o_B-sfnnSqge0qCYYTNyKHCYZtUbtMwm0zqPTPIre0grN4fw4cnD8fFrk7MioKYlG4jjKIDFUnrxiv87naktkwktxmRhbNjTLSIHx_EuimpcKh-VuKUXOEY/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!