DESKTOP WALLPAPERS

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 ]]> 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  tag :





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:

• One
• Two
• Three
• Four
• Five

I love you

Zenplate

This is test

Zen loves you

Subscribe me

 

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 herejqueryfordesigners.
If you have any trouble please comment me and don't forget to subscribe me for the future tips.
Zen