This is the next cool tip using Jquery code on blogger.As the name appears on the title, can you imagine how it looks and what is it used for ? Do you see the "Spread" button ? click on it you will see the result.With smooth effect ( the familiar effect in Jquery), this box can be used instead for the tip "put code in a frame" that I have published for a long time.
1. You have to add this script to your source template, before the </head> tag:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">$(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});});</script>
2.Next, add this CSS code before the </body> tag :
#dvt{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center; display:none;}
3.Finally ,create a HTML/JavaScript then add this code or you can add it to your entry too :
<div id="dvt">Put your codes, texts here...</div>
<button id="butToggle">Spread</button>
Look for the red code ,that is the place you need to put text and option the size of the box.
Save and have fun.
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">$(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});});</script>
2.Next, add this CSS code before the </body> tag :
#dvt{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center; display:none;}
3.Finally ,create a HTML/JavaScript then add this code or you can add it to your entry too :
<div id="dvt">Put your codes, texts here...</div>
<button id="butToggle">Spread</button>
Look for the red code ,that is the place you need to put text and option the size of the box.
Save and have fun.
You like it ? Yeah , you have got an interesting tip for blogger with Jquery, i love designing and getting these on blog,I hope you like it.Please subscribe me to receive my daily tips and comment below.Thanks
Zen
Requirements:Jquery
Website : http://Zenplate.blogspot.com
Convert to Blogger: Zenplate
4 comments:
muy buena tu entrada, me gusto,
saludos. paz.
que estes de lo mejor.
question. can i have different size buttons on different posts? As in say a 300x100px then a 200x200px button.
Is there any way i can make the dimensions only post specific instead of global?
Yes you can , just change the red code which i have highlighted in red, the box size will be changed.
And the button try this code instead of the word "Spread":
<img src='icon URL here'/>
Find some beautiful icons and get the direct link, paste that link instead of " icon URL here".
great ..
i tried but not working .. have a look
http://bloghelpforbegineers.blogspot.com/2009/06/how-to-add-favicon-to-your-site.html
thanks,
-Amaresh
Post a Comment
Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen