ShareThis

How to add featured post slide to your blog

This is very smart featured post content slider for your blogger blog or any other site.You can easily add or remove slides to this widget.And also very easy to configure.To add it to your site follow the steps given below.



step 1. Login into your blog.

step 2. goto template ---> edit html

step 3. find </head>

step 4. paste the below code just before the</head>




<style type='text/css'>
#slidearea{
height: 280px;
overflow: hidden;
position: relative;
width:700px;
background:#242424;
}
#gallerycover{
overflow: hidden;
margin:0px 0px;
}

.mygallery{
overflow: hidden;
position:relative;
}

.mytext img{
position:absolute;
left:10px;
top:10px;
padding:5px;
background:#515252;
border:1px solid #5e5e5e;
}

.mytext{
position:relative;
margin:0px 0px;
height:200px;
width:680px;
float:left;
display:inline;
line-height:20px;
color:#c4c4c4;
font-family: Tahoma,Georgia,century gothic,Verdana, sans-serif;
}

.mytext ul li{
height:200px;

}

.mytext a:link, .mytext  a:visited {
color:#fff;
}

.mytext h2 {
font: 18px Georgia,century gothic,Verdana, sans-serif;
margin:15px 0px 5px 310px;
font-weight:normal;
width:350px;
height:24px;
overflow:hidden;
}

.mytext p {
width:350px;
margin:0px 0px 5px 310px;
color:#6f6f6f;
}

.mytext h2 a:link, .mytext h2 a:visited {
color:#fff;
}
.slnav{
padding:3px 0px;
background:#000;

}
.prev{
float:left;
width:24px;
height:45px;
z-index:200;
margin-left:5px;
background:url(http://3.bp.blogspot.com/-SclNoyMTmkQ/UPrmLhtebdI/AAAAAAAAEK4/a9wrfxu-mgI/s1600/featured-prev.png);
}

.next{
float:right;
width:24px;
height:45px;
z-index:200;
background:url(http://2.bp.blogspot.com/-Igp4rm0t4E8/UPrmLhQ8gYI/AAAAAAAAEK8/q00Kkz6qb6w/s1600/featured-next.png);
display:block;
}

</style>



step 5. Now go to Layout-->Page Element and click on "Add a gadget".

step 6. Select "html/java script" and add the code given below and click save.

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
     visible: 1,
     easing: "backout",
 speed: 1000
});

});
</script>

<div id="slidearea">

<div id="gallerycover"><div class="mygallery"><ul>

<li><div class="mytext"><h2><a href="URL-of-Post-1" title="#">Title-of-Post-1</a></h2><p>Slide 1 Description [...]</p>

<img src="Slide-1-Image-Address" alt=""  /></div></li>

<li><div class="mytext"><h2><a href="URL-of-Post-2" title="#">Title-of-Post-2</a></h2><p>Slide 2 Description [...]</p>

<img src="Slide-2-Image-Address" alt=""  /></div></li>

<li><div class="mytext"><h2><a href="URL-of-Post-3" title="#">Title-of-Post-3</a></h2><p>Slide 3 Description [...]</p>

<img src="Slide-3-Image-Address" alt=""  /></div></li>

<li><div class="mytext"><h2><a href="URL-of-Post-4" title="#">Title-of-Post-4</a></h2><p>Slide 4 Description [...]</p>

<img src="Slide-4-Image-Address" alt=""  /></div></li>

<li><div class="mytext"><h2><a href="URL-of-Post-5" title="#">Title-of-Post-5</a></h2><p>Slide 5 Description [...]</p>

<img src="Slide-5-Image-Address" alt=""  /></div></li>

</ul>

<div class="clear"></div>

</div></div>

<div class="slnav"><a href="#" class="prev"></a><a href="#" class="next"></a><div class="clear"></div></div>

</div>



use your image sizes height 280x width 700



see the example below

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
     visible: 1,
     easing: "backout",
 speed: 1000
});

});
</script>

<div id="slidearea">

<div id="gallerycover"><div class="mygallery"><ul>

<li><div class="mytext"><h2><a href="http://3.bp.blogspot.com/-AOqTGpS7kK8/UNwaiEbJ3jI/AAAAAAAAD-8/YR9eo7I-WRI/s1600/100_6222.JPG" title="#">Slide 1</a></h2><p>Slide 1 Description [...]</p>

<img src="Slide-1-Image-Address" alt=""  /></div></li>

<li><div class="mytext"><h2><a href="http://3.bp.blogspot.com/-AOqTGpS7kK8/UNwaiEbJ3jI/AAAAAAAAD-8/YR9eo7I-WRI/s1600/100_6222.JPG" title="#">Title-of-Post-2</a></h2><p>Slide 2 Description [...]</p>

<img src="Slide-2-Image-Address" alt=""  /></div></li>

<li><div class="mytext"><h2><a href="http://3.bp.blogspot.com/-f5UvRKIoPvE/UNwalED84vI/AAAAAAAAD_E/9joxBXQl-GI/s1600/100_6223.JPG" title="#">Title-of-Post-3</a></h2><p>Slide 3 Description [...]</p>

<img src="Slide-3-Image-Address" alt=""  /></div></li>

<li><div class="mytext"><h2><a href="URL-of-Post-4" title="#">Title-of-Post-4</a></h2><p>Slide 4 Description [...]</p>

<img src="Slide-4-Image-Address" alt=""  /></div></li>

<li><div class="mytext"><h2><a href="URL-of-Post-5" title="#">Title-of-Post-5</a></h2><p>Slide 5 Description [...]</p>

<img src="Slide-5-Image-Address" alt=""  /></div></li>

</ul>

<div class="clear"></div>

</div></div>

<div class="slnav"><a href="#" class="prev"></a><a href="#" class="next"></a><div class="clear"></div></div>

</div>


save the changes and enjoy.

0 comments:

Post a Comment