Wednesday, October 20, 2010
0
Step 2: If you need to change the dimensions of the slider you can use this step instead of step 1. Search for the code
]]></b:skin>
Now the place the below code before ]]></b:skin>
Step 3: This step involves the featured content structure. Search for the code
<div id=’content-wrapper’> and place the below code just before
<div id=’content-wrapper’>
Replace the default image URL with your image URL. The bigger image dimension is 400 * 250 and for smaller its 80 * 50. Do insert your image with these dimensions, to make it look better. Also replace the text and link with your info.
Step 4: Now we need to initialize a script to play the slide show. For that we use this script. Place the below script just after <head>
You are done, check to see the effect. If you have any troubles in executing this technique, drop in your comments. Click here to see the live demo
Featured Content Slider for Blogger Using jQuery
Blogger is not more a blogging platform for beginners, there are lot more can be made with a blogger / blogspot blogs. Featured content sliders are seen in many Wordpress blogs and when coming to blogger it is certainly not much seen. Here I am going to teach you, how to add a featured content slider to your blogger / blogspot blogs.
Step 1: Let get into the coding part. Here I just made a CSS stylesheet, to make the installation pretty simple. So all you need to do is just copy the below code and paste it after
<head>
1<link href='http://sites.google.com/site/bloggermintcom/style.css'rel='stylesheet'type='text/css'/>
Step 2: If you need to change the dimensions of the slider you can use this step instead of step 1. Search for the code
]]></b:skin>
Now the place the below code before ]]></b:skin>
01#featured{
02width:400px;
03padding-right:250px;
04position:relative;
05border:5px solid#ccc;
06height:250px;
07background:#fff;
08}
09#featured ul.ui-tabs-nav{
10position:absolute;
11top:0; left:400px;
12list-style:none;
13padding:0; margin:0;
14width:250px;
15}
16#featured ul.ui-tabs-nav li{
17padding:1px 0; padding-left:13px;
18font-size:12px;
19color:#666;
20}
21#featured ul.ui-tabs-nav li img{
22float:left; margin:2px 5px;
23background:#fff;
24padding:2px;
25border:1px solid#eee;
26}
27#featured ul.ui-tabs-nav li span{
28font-size:11px; font-family:Verdana;
29line-height:18px;
30}
31#featured li.ui-tabs-nav-item a{
32display:block;
33height:60px;
34color:#333; background:#fff;
35line-height:20px;
36}
37#featured li.ui-tabs-nav-item a:hover{
38background:#f2f2f2;
39}
40#featured li.ui-tabs-selected{
41background:url('http://i47.tinypic.com/6jojr4.jpg') top left no-repeat;
42}
43#featured ul.ui-tabs-nav li.ui-tabs-selected a{
44background:#ccc;
45}
46#featured .ui-tabs-panel{
47width:400px; height:250px;
48background:#999; position:relative;
49}
50#featured .ui-tabs-panel .info{
51position:absolute;
52top:180px; left:0;
53height:70px;
54background: url('http://i50.tinypic.com/11rgghl.jpg');
55}
56#featured .info h2{
57font-size:18px; font-family:Georgia, serif;
58color:#fff; padding:5px; margin:0;
59overflow:hidden;
60}
61#featured .info p{
62margin:0 5px;
63font-family:Verdana; font-size:11px;
64line-height:15px; color:#f0f0f0;
65}
66#featured .info a{
67text-decoration:none;
68color:#fff;
69}
70#featured .info a:hover{
71text-decoration:underline;
72}
73#featured .ui-tabs-hide{
74display:none;
75}
<div id=’content-wrapper’> and place the below code just before
<div id=’content-wrapper’>
01<div id='featured'>
02<ul class='ui-tabs-nav'>
03<li class='ui-tabs-nav-item ui-tabs-selected'id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1'src='http://i49.tinypic.com/e1aohv.jpg'/><span>Install Mac OS X on Intel/AMD PC using iATKOS v7</span></a></li>
04<li class='ui-tabs-nav-item'id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger'src='http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>How to remove "showing postwithlabel"inBlogger</span></a></li>
05<li class='ui-tabs-nav-item'id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz'src='http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>How to add Google Buzz to Blogspot blog</span></a></li>
06<li class='ui-tabs-nav-item'id='nav-fragment-4'><a href='#fragment-4'><img alt='chat'src='http://i50.tinypic.com/34xfg4m.jpg'/><span>Chat livewithyour blog visitors using Yahoo Pingbox</span></a></li>
07</ul>
08<!-- First Content -->
09<div class='ui-tabs-panel'id='fragment-1'style=''>
10<img alt='mac'src='http://i47.tinypic.com/rsbi80.jpg'/>
11<div class='info'>
12<h3><a href='#'>Install Mac OS X on Intel/AMD PC using iATKOS v7</a></h3>
13<p>Description goes here,thisis just a test description....<a href='http://www.bloggermint.com/2010/02/install-mac-os-x-on-intelamd-pc-using.html'>read more</a></p>
14</div>
15</div>
16<!-- Second Content -->
17<div class='ui-tabs-panel ui-tabs-hide'id='fragment-2'style=''>
18<img alt=''src='http://i50.tinypic.com/33kprh5.jpg'/>
19<div class='info'>
20<h3><a href='#'>How to remove "showing postwithlabel"inBlogger</a></h3>
21<p>Description goes here,thisis just a test description....<a href='#'>read more</a></p>
22</div>
23</div>
24<!-- Third Content -->
25<div class='ui-tabs-panel ui-tabs-hide'id='fragment-3'style=''>
26<img alt=''src='http://i47.tinypic.com/2191lqt.jpg'/>
27<div class='info'>
28<h3><a href='#'>How to add Google Buzz to Blogspot blog</a></h3>
29<p>Description goes here,thisis just a test description....<a href='#'>read more</a></p>
30</div>
31</div>
32<!-- Fourth Content -->
33<div class='ui-tabs-panel ui-tabs-hide'id='fragment-4'style=''>
34<img alt=''src='http://i48.tinypic.com/10pwp3o.jpg'/>
35<div class='info'>
36<h3><a href='#'>Chat livewithyour blog visitors using yahoo</a></h3>
37<p>Description goes here,thisis just a test description....<a href='#'>read more</a></p>
38</div>
39</div> </div>
Replace the default image URL with your image URL. The bigger image dimension is 400 * 250 and for smaller its 80 * 50. Do insert your image with these dimensions, to make it look better. Also replace the text and link with your info.
Step 4: Now we need to initialize a script to play the slide show. For that we use this script. Place the below script just after <head>
Step 5: This is an optional step, if your blog already includes the jQuery and jQuery UI libraries. If not, follow this instructions. Copy the code below and paste it after <head>
01<script type='text/javascript'>
02$(document).ready(function(){
03$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
04$("#featured").hover(
05function() {
06$("#featured").tabs("rotate",0,true);
07},
08function() {
09$("#featured").tabs("rotate",5000,true);
10}
11);
12});
13</script>
1<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'type='text/javascript'/>
2<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js'type='text/javascript'/>
You are done, check to see the effect. If you have any troubles in executing this technique, drop in your comments. Click here to see the live demo
Subscribe to:
Post Comments (Atom)
0 Responses to “Featured Content Slider for Blogger Using jQuery”
Post a Comment