Here I have tried using of Yahoo panels in my blog .
click on to view the YUI panel
The procedure is:
see the Yahoo configurator first to insert the links(CSS) and scripts(JS) for a YUI component.
For example :
To create panel I need to use following StyleSheets
<link href='http://yui.yahooapis.com/2.5.1/build/fonts/fonts-min.css' rel='stylesheet' type='text/css'/>
<link href='http://yui.yahooapis.com/2.5.1/build/container/assets/skins/sam/container.css' rel='stylesheet' type='text/css'/>
to use above style sheets in the blog we need to put those css's in the template of our blog.
click on 'Customize' which is in right corner of the blog.It will opens a page containing three tabs.
- Postings
- Settings
- Layout
- Pageelelmets
- FontsandColors
- Edithtml
- PicknewTemplate
And next we need to include below Yahoo Js files to create a panel(you can get these files from Yahoo configurator).
<script src="%27http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js%27" type="'text/javascript'/"></script>
<script src="%27http://yui.yahooapis.com/2.5.1/build/dragdrop/dragdrop-min.js%27" type="'text/javascript'/"></script>
<script src="%27http://yui.yahooapis.com/2.5.1/build/container/container-min.js%27" type="'text/javascript'/"></script>
To create YUI panel paste below code under <body> tag of your blog template.
<script>
var pane=null;
function init() {
pane = new YAHOO.widget.Panel("panel1", { width:"620px", height:"220px", visible:false, resizable:true,constraintoviewport:true } );
pane.render();
showWin();
pane.body.style.height="220px"
}
function showWin()
{
pane.show();
pane.center();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
<div id='panel1'>
<div class='hd'>My Customized Panel</div>
<div class='bd'>Customized Iframe<iframe height='100%' src='http://www.developer.yahoo.com' width='100%'/></div>
</div>
