How to Implement jquery UI on Google Blogger
Jquery UI is a powerful java library and can be used in Blogger by adding th following code just after the tag <head> in the templates option ( Design -> Html Edition )
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/>
For example , if you want to use the accordion UI widget you can additionally put this code :
<script type='text/javascript'>
$(function() {
$("#accordion").accordion({
collapsible: true,active:false
});
});
</script>
Then on an entry you can use this code
<div id="accordion">
<h3>
<a href="#">First header</a></h3>
<div>
First content</div>
<h3>
<a href="#">Second header</a></h3>
<div>
Second content</div>
</div>
to obtain obtain this functionality:
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/>
For example , if you want to use the accordion UI widget you can additionally put this code :
<script type='text/javascript'>
$(function() {
$("#accordion").accordion({
collapsible: true,active:false
});
});
</script>
Then on an entry you can use this code
<div id="accordion">
<h3>
<a href="#">First header</a></h3>
<div>
First content</div>
<h3>
<a href="#">Second header</a></h3>
<div>
Second content</div>
</div>
to obtain obtain this functionality:
Comments
Post a Comment