BBC radio slide Posted by vuluganck | at Thursday, June 04, 2009

Hi everyone , today you will have a chance to see the greatest tip and can get it on your blog.I am sure all of you have not seen this kind of slide.It is call BBC radio slide.As its name, this slide is now used on the very famous website-bbc.co.uk.

Of course, I will make it simple and easy here, but anyway , if you are the pro designer and know Jquery function, you can option it like bbc.co.uk.This is not an auto slide and where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.

• View live demo


• Download file

Yes very nice, now let's start!
Log in your blogger account and find the ]]></b:skin> tag, add this CSS code before it :

body {
background: #eee;
font-size: 62.5%;
font-family: helvetica, arial, sans-serif;
}

.zoomoutmenu {
border: 0.5em solid #fff;
position: relative;
height: 23.5em;
width: 50em;
margin: 0 auto;
}

.panels {
height: 23.5em;
width: 50em;
overflow: hidden;
}

.tabs {
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
z-index: 1;
}

.tabs li {
float: left;
display: block;
width: 10em;
background-color: #fff;
text-align: center;
}

.tabs li a {
padding: 0.2em;
display: block;
text-decoration: none;
color: #000;
border-top: 5px solid #fff;
font-size: 1.3em;
}

.tabs li a:hover {
border-top: 5px solid #333;
background-color: #666;
color: #fff;
}

.panel {
background: #ccc;
padding: 1em;
height: 21.5em;
position: relative;
}

.panel h2 {
font-size: 3em;
color: #fff;
font-family: Garamond, times, serif;
padding: 1em;
margin: 0;
text-align: right;
}

#one {
background: url(Image URL 1) no-repeat center center;
}

#two {
background: url(Image URL 2) no-repeat center center;
}

#three {
background: url(Image URL 3) no-repeat center center;
}

#four {
background: url(Image URL 4) no-repeat center center;
}

#five {
background: url(Image URL 5) no-repeat center center;
}

Notice the red code, replace them by your images URL

Next , add these 2 scripts before the </head> tag :

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>

<script charset='utf-8' src='bbcslide.js' type='text/javascript'/>

Notice the pink code, that's the bbcslide.js file, you have to upload it to your favorite host and put it here.This file is given at first(click on the "Download file" button).


Last step,Save all and create a HTML/Javascript ( press Add A Gadget), add this code:

<div class="zoomoutmenu">
<ul class="tabs">

<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
<li><a href="#four">Four</a></li>
<li><a href="#five">Five</a></li>
</ul>

<div class="panels">
<div id="one" class="panel">
<h2><a href="http://www.zenplate.blogspot.com">I love you</a></h2>
</div>
<div id="two" class="panel">
<h2><a href="http://www.zenplate.blogspot.com">Zenplate</a></h2>
</div>
<div id="three" class="panel">

<h2><a href="http://www.zenplate.blogspot.com">This is test</a></h2>
</div>
<div id="four" class="panel">
<h2><a href="http://www.zenplate.blogspot.com">Zen loves you</a></h2>
</div>
<div id="five" class="panel">
<h2><a href="http://www.zenplate.blogspot.com">Subscribe me</a></h2>

</div>
</div>
</div>

Note:You can option the words at this step.

All Done! Now try to save and join, if you need to know the function (if you are pro) , visit here jqueryfordesigners.
If you have any trouble please comment me and don't forget to subscribe me for the future tips.
Zen


Requirements:Jquery
Website: http://jqueryfordesigners.com
Developer : Remy Sharp
Convert to blogger : Zenplate