BBC radio slide

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.

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>

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

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


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.

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


Ritesh Sanap said...

Cool cool very good dude i liked it so much i m going around.

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