Add Stylish jQuery Text Resize Buttons To Posts On Blogger Blogs

I have had a few requests for a tutorial on adding text re size buttons to posts on Blogger.Back in 2009 i published a gadget that allowed visitors to change all the text size and fonts on your blog including headings, sidebar text and post text.But this time i wanted a gadget that onlu changed the text in the posts.I checked out a number of scripts and styles before settling on the one i have for you today.Using some simple jQuery and some colorful icons in a table we can create a stylish text resize section and float them on the corner of posts.The gadget has three buttons to increase text size, decrease text size and a reset button along with the standard text resize icon.

Animated Bubble Buttons

Bloggercodes
Bloggercodes
Bloggercodes
Bloggercodes
Bloggercodes
Bloggercodes
Bloggercodes
Bloggercodes
Bloggercodes
Bloggercodes
Bloggercodes
Bloggercodes
Bloggercodes
Bloggercodes
Bloggercodes
Bloggercodes

Slide note is jQuery plugin which allows to display notification in blogger blogs.Displaying  Slide note Widget on your blog is a great way to show the post which you think your readers should notice.You should have noticed that most of the popular blogs use Slide note for their notification purposes.

This notification in blog appears when you scroll down the blog page and it disappears when you scroll up the page or when you are at the top of page.

METHOD:

Note : Back up your template before applying the code in template by navigating to  dashboard –> Design tab –>Edit html –> Download Full Template.
1) Login to your Blogger dashboard –> Design tab –> Edit html.
2) Copy the below code and paste it just before the </head> tag to insert jQuery plugin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://tntechie.googlecode.com/files/jquery.slidenote.min.js" type="text/javascript"></script>

3) Copy the below CSS code and paste it before ]]></b:skin>.

/* ----- tntechie 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; }
/* ----- tntechie CSS END------ */

4) Now copy the below code and paste it before </body> tag.

<!-- Notification Slider Start -->
<div class='slidenote' id='note'>
<div id='container'>
<h2>Blogger Tips</h2>
<span><em>Get All Blogger and Blogspot tutorial and tips !!! :) </em></span>
<p><a href='http://www.tntechie.com/search/label/BLOGGING/'>VISIT NOW</a> </p>
</div>
</div>
<script type='text/javascript'>
$(&#39;#note&#39;).slideNote({ 
closeImage: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfKhhaxJYYFJI5ZJC68mysYHJO8jbsJroNRrwQ3kM058WT85rQ1xsG0pFJIddHWHcd9Kz9Zq4cN5zxFXUCGvKh5hia1Pdpu3HD60IHadf5djo7yzHmEqENnUQWZ-JBxh2NF6j1n51ZhNWI/s1600/slidenote.close.png&#39;
});
</script>
<!-- Notification Slider Ends -->

5) save the template and you are done.
#You can customize the look by changing the CSS part.
#You can customize the content or notification in step 4).
#You can see the demo on this page itself.