April 2011 ~ Blogger-Help.com

Content sliders are not new to you as they are popular and can be seen in most of the websites. This content slider is taken from the Pre Live Mag template. It is a new and elegant slider that shows small tabs beside main post content.

Installation

Step 1

Go to Dashboard > Layout > Edit HTML. Download template for backup. Add following code just BELOW]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
/* Feature Content */
#feature-wrapper{
float:left;
width:645px;
padding:0;
margin-bottom:20px;
}

.slide{
padding:0;
margin:0
}

#featured{
float:left;
width:480px;
height:310px;
padding-right:165px;
margin:0;
position:relative;
overflow:hidden;
background:#474640;
-webkit-border-radius:8px;
-moz-border-radius: 8px;
border-radius: 8px
}

#featured ul.ui-tabs-nav{
position:absolute;
top:0;
left:430px;
list-style:none;
padding:0;
margin:10px 0 0 10px;
width:195px;
height:290px;
overflow:auto;
overflow-x:hidden;
}

#featured ul.ui-tabs-nav li{
padding:2px 0 0 13px;
font-size:12px;
color:#111;
}

#featured ul.ui-tabs-nav li img{
float:left;
margin:2px 5px;
background:#fff;
padding:3px
}

#featured ul.ui-tabs-nav li span{
font-size:12px;
line-height:18px
}

#featured li.ui-tabs-nav-item a{
display:block;
height:70px;
text-decoration:none;
color:#474640;
background:#dfded8;
line-height:20px;
outline:none;
}

#featured li.ui-tabs-nav-item a:hover{
background:#c2c0b5
}

#featured li.ui-tabs-selected{
background:url(' http://3.bp.blogspot.com/_aAjcAMHOGT4/TKgvzMEYPUI/AAAAAAAAE-o/t7KKKMyOelo/s1600/arrow.png' ) center left no-repeat
}

#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#c2c0b5
}

#featured .ui-tabs-panel{
width:425px;
height:290px;
position:relative;
padding:0;
margin:10px 0 0 10px;
.top:10px /* IE */
}

#featured .ui-tabs-panel img{
width:425px !important;
height:290px !important;
}

#featured .ui-tabs-panel .info{
position:absolute;
bottom:0;
left:0;
overflow:hidden;
height:90px;
width:425px;
background:#111;
opacity:0.8;
filter:alpha(opacity=80);
.width: 100%; /* IE */
}

#featured .ui-tabs-panel .info a.hideshow{
position:absolute;
font-size:11px;
color:#111;
right:10px;
top:-20px;
line-height:20px;
margin:0;
outline:none;
background:#dfded8
}

#featured .info h3{
font-size:20px;
font-family:"Allerta" ,arial ,sans-serif;
padding:5px 10px;
margin:0;
font-weight:bold;
overflow:hidden
}

#featured .info p{
margin:0 10px;
line-height:14px;
color:#fff
}

#featured .info a{
text-decoration:none;
color:#cd3301
}

#featured .info a:hover{
text-decoration:underline
}

#featured .ui-tabs-hide{
display:none
}

</b:if>
</style>

Step 2

Add following code just ABOVE </body>

<b:if cond='data:blog.pageType != "item"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
</b:if>

Save your template.

Step 3

Now go to Page Elements > Add a gadget > HTML/JavaScript and add following there and save.

<div id='featured'>
<ul class='ui-tabs-nav'>
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt="testing" height="60" src="http://www.mobigod.com/wp-content/uploads/2010/07/How-to-Check-Your-Account-Balance-on-Vodafone-Idea-BSNL-Reliance-GSM-Aircel-Airtel-Tata-Docomo-networks.jpg" width="80" /><span>Mobile Balance</span></a></li>

<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt="testing" height="60" src="http://2.bp.blogspot.com/_tbHfaj1A058/THJK8Y2zSBI/AAAAAAAALjw/h-wCMIxEUig/s1600/pyar+hua+ikrar+hua+hai+1.JPG" width="80" /><span>Rain Songs</span></a></li>

<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt="testing" height="60" src="http://3.bp.blogspot.com/_tbHfaj1A058/TSMgX-M1KWI/AAAAAAAAL7Q/AW6gc9IP1bI/s1600/mafia2.jpg" width="80" /><span>Top PC Games</span></a></li>

<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt="testing" height="60" src="http://1.bp.blogspot.com/_tbHfaj1A058/TSMgWZPUPuI/AAAAAAAAL7M/RGj9UwEOdis/s1600/film%252Bcast%252Bcrew1.JPG" width="80" /><span>Upcoming Movie</span></a></li>
</ul>


<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt="testing" height="290" src="http://www.mobigod.com/wp-content/uploads/2010/07/How-to-Check-Your-Account-Balance-on-Vodafone-Idea-BSNL-Reliance-GSM-Aircel-Airtel-Tata-Docomo-networks.jpg" width="420" />
<div class='info'>
<h3><a href='http://www.mobigod.com/how-to-check-your-account-balance-on-vodafone-idea-bsnl-reliance-gsm-aircel-airtel-tata-docomo-networks.html'>Check Mobile Balance</a></h3>
<p>How to Check Your Account Balance on Vodafone / Idea / BSNL / Reliance GSM / Aircel / Airtel / Tata Docomo / Virgin Mobile / Spice networks?...<a href='http://www.mobigod.com/how-to-check-your-account-balance-on-vodafone-idea-bsnl-reliance-gsm-aircel-airtel-tata-docomo-networks.html'>More</a></p>
</div>
</div>


<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt="testing" height="290" src="http://2.bp.blogspot.com/_tbHfaj1A058/THJK8Y2zSBI/AAAAAAAALjw/h-wCMIxEUig/s1600/pyar+hua+ikrar+hua+hai+1.JPG" width="420" />
<div class='info'>
<h3><a href='http://film-cast.blogspot.com/2010/08/evergreen-bollywood-songs-on-baarish.html'>Evergreen Bollywood Sawan Songs</a></h3>
<p>Evergreen Bollywood songs on Baarish, Saawan, Rainy Season with video...<a href='http://film-cast.blogspot.com/2010/08/evergreen-bollywood-songs-on-baarish.html'>More</a></p>
</div>
</div>


<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt="testing" height="290" src="http://3.bp.blogspot.com/_tbHfaj1A058/TSMgX-M1KWI/AAAAAAAAL7Q/AW6gc9IP1bI/s1600/mafia2.jpg" width="420" />
<div class='info'>
<h3><a href='http://www.systemrequirements.in/'>Upcoming Top PC Games</a></h3>
<p>SystemRequirements.in is a site where you can get the most accurate reuirements for PC...<a href='http://www.systemrequirements.in/'>More</a></p>
</div>
</div>


<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt="testing" height="290" src="http://1.bp.blogspot.com/_tbHfaj1A058/TSMgWZPUPuI/AAAAAAAAL7M/RGj9UwEOdis/s1600/film%252Bcast%252Bcrew1.JPG" width="420" />
<div class='info'>
<h3><a href='http://film-cast.blogspot.com/'>Upcoming Hollywood / Bollywood movies</a></h3>
<p>Complete discription of top upcoming movies both from Hollywood and Bollywood...<a href='http://film-cast.blogspot.com/'>More</a></p>
</div>
</div>
</div>

Customization for Step 3
Red > Image URL
Pink > Image alter text
Blue > Post URL
Green > Title of Posts
Bold and italic > Description of posts

Note: To fit to your template you have to change the width/s given in the Step 1.

Other Versions of Featured Content Slider

Simple jQuery Featured Content Slider (with numbers to navigate)
Content Slider with Read more link

When you embed the YouTube video to your website, that video shows a grey bar at the top with the title of the video. Most of you do not want to show this title and rations. You can easily remove this title.

Following the embed code of YouTube video:

<object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/FzRH3iTQPrk?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/FzRH3iTQPrk?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="349"></embed></object>

Just replace
&hl=en_US

with
&showinfo=0

This will remove the title and ratings.

Demo

Normal Video