Featured Post Image Slider untuk Blog - Manual dan Otomatis

Cara Membuat atau Memasang Featured Posts Image (Content Slider Carousel) untuk di Halaman Depan Blog Blogspot.

MEMASANG, menampilkan, atau membuat Featured Content Post Image Slider (Carousel) untuk blog tidak disarankan oleh sebagian pakar SEO dan Web Usability.

Pasalnya, selain membuat berat loading blog (karena ada javascript dan gambar), posts slider juga tidak user friendly.

Slider akan membuat "silau" mata pengunjung. Slider juga jarang diklik. Sejumlah studi dan survei tentang slider di web menunjukkan, slider yang diklik pengunjung hanya di bawah 1%. Itu pun yang diklik hanya gambar pertama.

CB sudah share soal featured content slider ini:  Featured Content Slider di Homepage Blog Tidak Bagus buat SEO.  Namun, toko online atau blog foto kayaknya cocok pake Featured Slider, asalkan diatur slide-nya jangan terlalu cepat dan lebih baik di-off-kan otomatis slidenya.

Btw... posting ini "sekadar" menyimpan dokumentasi. Soalnya, suka adaaaaa aja klien Layanan Premium CB yang "keukeuh" ingin memasangnya, meski sudah dikasih tau.

1. Cara Membuat Featured Post Slider Manual

Tutorial Featured Post Slider Manual sangat banyak bahkan kebanyakan. Salah satunya ada di Windows Reloded. Sebanyak 17+ lainnya ada di Blogspot Tutorials.

Yang dimaksud "manual" adalah kita harus memasukkan link gambar, link posting, judul, dan deskirpnya satu per satu di widget Featured Content Slider ini. Ribet bener! Tapi gampang banget pasangnya. Silakan cek cara memasangnya ada di kedua link tadi.

Yang ini dari Spice Up Your Blog. Tampilannya lebar, cocok untuk "etalse" produk/jasa Anda. (Lihat Demo).

Cara Pasangnya:
1. Klik Template > Customize > Advanced > Add CSS
2. Copas kode berikut ini

<!--Featured Slider for Blogger -->
.fp-slider {
background: none repeat scroll 0 0 #FFFFFF;
height: 329px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 850px;
}
.fp-slides-container {
}
.fp-slides, .fp-thumbnail, .fp-prev-next, .fp-nav {
width: 850px; /*Set The Width Of Slider Here*/
}
.fp-slides, .fp-thumbnail {
height: 280px; /*Set The Height Of Images Here*/
overflow: hidden;
padding-top: 0;
position: relative;
}
.fp-title {
color: #FFFFFF;
font: bold 18px Arial,Helvetica,Sans-serif;
margin: 0;
padding: 0 0 2px;
text-shadow: 0 1px 0 #000000;
}
.fp-title a, .fp-title a:hover {
color: #FFFFFF;
text-decoration: none;
}
.fp-content {
background: none repeat scroll 0 0 #111111;
bottom: 0;
left: 0;
opacity: 0.7;
overflow: hidden;
padding: 10px 15px 5px;
position: absolute;
right: 0;
}
.fp-content p {
color: #FFFFFF;
line-height: 18px;
margin: 0;
padding: 0;
text-shadow: 0 1px 0 #000000;
}
.fp-more, .fp-more:hover {
color: #FFFFFF;
font-weight: bold;
}
.fp-nav {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEo8Pd0HoW7y2jxk6fu63ooput0vULXNB3hyphenhyphenwBE5ZynXQKNWU10PXu0ExBIXD8lqTz5eg4ftf2RDrq8V2EkiLAohjkM4P2nu0l_mie4ginsx4-H3SltynClOAOzI6kDpQlTZm2ksWQzhaq/s1600/h2.png") repeat-x scroll 0 0 transparent;
height: 12px;
padding: 10px 0;
text-align: center;
}
.fp-pager a {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihYpQwQwco6NJ3MdT8_rlO2K3bR78rw5g82_Qw8iSShlP7GKu6BNzwLNAEBzjhCeRXsLH9UmaWsYTxqqHDH_RMj5UOwz5BTojhC4I8OYigXLzeerbxU7z_gKWll6MFZaHoKAiTvlj4a6_J/s1600/featured-pager.png");
background-position: 0 0;
cursor: pointer;
display: inline-block;
float: none;
height: 12px;
line-height: 1;
margin: 0 4px 0 0;
opacity: 0.7;
overflow: hidden;
padding: 0;
text-indent: -999px;
width: 12px;
}
.fp-pager a:hover, .fp-pager a.activeSlide {
background-position: 0 -112px;
opacity: 1;
text-decoration: none;
}
.fp-prev-next-wrap {
position: relative;
z-index: 200;
}
.fp-prev-next {
bottom: 130px;
height: 37px;
left: 0;
position: absolute;
right: 0;
}
.fp-prev {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjxsRy0rBUeeSxSHIrLMRTh_4QJihIVGlwMD1TBImB3fUodMmogR_-EaYs_R2BE1LT-XPtuASwhQGKJ5JDTy5xZgDwGawRTuYVcy3d9Hx4XAFsz-4MnCrxejX5SC-c8MSBxkEXVdldwAHe/s1600/featured-prev.png") no-repeat scroll left top transparent;
float: left;
height: 37px;
margin-left: 14px;
margin-top: -180px;
opacity: 0.6;
width: 37px;
}
.fp-prev:hover {
opacity: 0.8;
}
.fp-next {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisiJXInA4fgDa12rJmGUZMRYHv53xqinkn2oP5p-O_q9NK435Fp6COH38BhWYG5lIYoTcEaXGn_lLB1jbfdaGs95rXm6Iz1R9vlkUqqyqmlaJwtSEJFSJWSLGMmS5nCHPSLnECZxxRItzN/s1600/featured-next.png") no-repeat scroll right top transparent;
float: right;
height: 37px;
margin-right: 14px;
margin-top: -180px;
opacity: 0.6;
width: 36px;
}
.fp-next:hover {
opacity: 0.8;
}
<!-- Featured Slider for Blogger  -->

3. Klik "Apply to Blog"

4. Klik "Back to Blogger"

5. Klik " Template" > "Edit HTML

6. Temukan (Ctrl+F) kode </head>
7. Copas kode berikut ini di atas kode </head>

<!--New Featured Slider -->
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
}
);
}
);
/* ]]> */
</script>
<script src='http://yourjavascript.com/3304001418/slider-code-3.js' type='text/javascript'/>
<script src='http://yourjavascript.com/0412100943/slider-code-1.js' type='text/javascript'/>
<script src='http://yourjavascript.com/3060311041/slider-code-2.js' type='text/javascript'/>
<!--New Featured Slider -->

5. Save Template!

Kini saatnya pasang kode HTML:
1. Layout > Add a Gadget > pilih HTML/Javascript

2. Copas kode berikut ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!--New Featured Slider -->

<div class='fp-slider clearfix'>
<div class='fp-slides-container clearfix'>

<div class='fp-slides'>

<!-- Slide 1 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyN0wF0gzyv5Monc8DkHwiSBf8XXYoWAmX0o76kWg083x3e6n3lcOi9BOBH0SB0Lda-OOoJRy2RGOrnnTIRH5HKNwTQ1CFYRxwpH8xWB_4szLK8ExYBDApSJMzFfirLcrD4K-dn9_A5LYe/s1600/spice-slider-image-1.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Place Your Title Here</a>
</h3>
<p>
Write your description and information for the first image here. </p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 1 Code End -->

<!-- Slide 2 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPMyUoGpB-rUp-_QQ_aXIbg7nfeSMbScmiborP2azFn051NzjgLJFOEQVGd5Y4y-GmNdDaKq-GU19xhe15Y61tNt03krZ1_OHELCi08-61p24ijtERcGXLLkFXtgLdPsqA6mNmRFh6K9ON/s1600/spice-slider-image-2.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Place Your Title For Image Two Here</a>
</h3>
<p>
Write Your Description For Image Two Here. </p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 2 Code End -->

<!-- Slide 3 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtyI_xJneOUGRavlaK8mxCm3667bY_oJx2ZJV566GgP73lzZMrqwq7zRLOE1yzf9LMeZ7Hzbwsd98rz9fnbwFnDIFc74g-1nnrV4YdxTQh4wgEGGOLaIcxFitOc-wTPTfQxUzgmrWvj9tC/s1600/spice-slider-image-3.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Place Your Title For Image Three Here</a>
</h3>
<p>
Write Your Description For Image Three Here. 
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 3 Code End -->

<!-- Slide 4 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2578c05opIelwtpDzIIFuqRVYGbyihTimcw4D4gS62tMrlzd4Ly0ZpPYbPkUo1PCeaB74ISIP5lewLI0jSLvMkd_NjpRhOoNOC5qb_KpbC-t2HyzIW-KCxZFuJnV6Qtyl1kapUAn-2IdT/s1600/spice-slider-image-4.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Place Your Title For Image Four Here</a>
</h3>
<p>
Write Your Description For Image Four Here. </p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 4 Code End -->

<!-- Slide 5 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIhyRET9MondKeuSlpCmkQ-NKV2nOCRz4vV_RCGieE9QKQZJ1IBvcneMVHFL08qTV3LLHmgIZTbUSoQ8NLSCWARpCmekXOyfwXC_-8hIsGxZZNjyAf3_Vo-TNzTkviNrZKofOk5lv2gttU/s1600/spice-slider-image-5.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Place Your Title For Image Five Here</a>
</h3>
<p>
Write Your Description For Image Five Here. </p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 5 Code End -->

</div>
<div class='fp-nav'>
<span class='fp-pager'/>
</span></div>
</div>
</div>
<div style='clear:both;'/>
<!--New Featured Slider --></div>
</b:if>

Catatan: 
1. Hapus kode warna merah jika slider akan dimunculkan di tiap halaman (tidak hanya halaman depan).
2. Ubah Url Gambar, Text, dan Link-nya dengan versi Anda.

2. Cara Memasang Featured Post Slider Otomatis

Yang dimaksud otomatis adalah kita gak perlu pasang satu per satu gambar, link, dan judul di widget ini. Gambar plus link dan judul akan muncul otomatis, bisa posting terbaru, bisa juga per label (kategori tertentu).

Yang otomatis sudah di-share dari maskolis. Featured post di halaman depan atau ala New Johy Wuss juga sudah. Berikut ini ada dua lagi sebagai tambahan dan alternatif:

Featured Image Slider Otomatis #1

Tips dari exeidias ini nggak seribet cara manual. Slider Image akan muncul otomatis dari Posting Terbaru. Jadi, pastikan gambar ilustrasi posting terbaru Anda "pas" dengan "content area" di halaman depan:

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode </head>

<!-- Automatic Latest/Recent Post Slider For Blogger Start-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<script style='text/javascript'>
//<![CDATA[
var showpostthumbnails_gal  = true;
var showpostsummary_gal   = true;
var random_posts       = false;
var numchars_gal = 150;
var numposts_gal = 10;
var img_width    = 550;
var img_height    = 250;
function showgalleryposts(json) {
 var numPosts = json.feed.openSearch$totalResults.$t;
 var indexPosts = new Array();
 document.write('<ul>');
 for (var i = 0; i < numPosts; ++i) {
 indexPosts[i] = i
 }
 if (random_posts == true) {
 indexPosts.sort(function() {
 return 0.5 - Math.random()
 })
 }
 if (numposts_gal > numPosts) {
 numposts_gal = numPosts
 }
 for (i = 0; i < numposts_gal; ++i) {
 var entry_gal = json.feed.entry[indexPosts[i]];
 var posttitle_gal = entry_gal.title.$t;
 for (var k = 0; k < entry_gal.link.length; k++) {
 if (entry_gal.link[k].rel == 'alternate') {
 posturl_gal = entry_gal.link[k].href;
 break
 }
 }
 if ("content" in entry_gal) {
 var postcontent_gal = entry_gal.content.$t
 }
 s = postcontent_gal;
 a = s.indexOf("<img");
 b = s.indexOf("src=\"",a);
 c=s.indexOf("\"", b + 5);
 d = s.substr(b + 5, c - b - 5);
 if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
 var thumburl_gal = d
 } else var thumburl_gal = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';
 document.write('<li><div id="slide-container"><span class="slide-desc"><a href="' + posturl_gal + '"><h2 style="margin:10px 0px;">');
 document.write(posttitle_gal + '</h2></a>');
 var re = /<S[^>]*>/g;
 postcontent_gal = postcontent_gal.replace(re, "");
 if (showpostsummary_gal == true) {
 if (postcontent_gal.length < numchars_gal) {
 document.write(postcontent_gal);
 document.write('</span>')
 } else {
 postcontent_gal = postcontent_gal.substring(0, numchars_gal);
 var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
 postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
 document.write(postcontent_gal + '...');
 document.write('</span>')
 }
 }
 document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="' + img_width + '" height="' + img_height + '"/></a></div>');
 document.write('</li>')
 }
 document.write('</ul>')
}
//]]>
</script>
<style type='text/css'>
#slide-container {position: relative;height: 250px;width: 550px;font-family: calibri;}
.slide-desc {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgafROAkFDak5Tlo_Ted6i75hEP62H-zSLV5Jwiathkgi2yhZ8GU_HlYHFk77MAS_hruBymoIB9udOJH3N-PJtuV71a3D9BPtNyvSV0WvNpC-oNzGlRaj3EhNhQitxEmfSgHlybGsrNVA/s5/darkbg.png) repeat scroll 0 0;color: #FFFFFF;padding: 5px;position: absolute;text-align: left;bottom: 0px;z-index: 99999;line-height:20px;}
.slide-desc h2 {display: block;}
#slider li {width: 550px;height: 250px;overflow: hidden;margin: 0;padding: 0;list-style: none;}
#prevBtn, #nextBtn {display: block;width: 30px;height: 77px;position: relative;left: -30px;text-indent: -9999px;top: -150px;z-index: 99999999;}
#nextBtn{left: 550px !important;top: -225px;}
#prevBtn a, #nextBtn a {display: block;position: relative;width: 30px;height: 77px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLP2tlhYkSesiU86z0Dvx5RqHIF0mDwa52v_w2rZAyxYFw4UEXE9Yki6yPwG_ekThchXc4mezeS106GnEhXCbsSiYTKs2gGdcYh8nkvvjqP8xdZMq45i5nwEliJox6BsJmKD-cQ1KGuw/s30/Left-Double-Black-Arrow.png) no-repeat 0 0;}
#nextBtn a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu3ggbocLBW-bQierD7Ke41lvfX6Q2Rig6P0jXPlppZgMVqsXWhjfv1e2u1EyV3rLlS_Z1yeTIGFBsNj9JBZAF0cu9vpfI4juCa3VvViQsBYKPCzbSigqMLnILCv0YS7fST73hN7RW3Q/s30/Right-Double-Black-Arrow.png) no-repeat 0 0;}
</style>
<!-- Automatic Latest/Recent Post Slider For Blogger End-->

3. Save Template!
4. Layout > Add a Gadget > pilih HTML/Javascript
5. Copas kode berikut ini:

<!-- Automatic Latest/Recent Post Slider For Blogger Start -->
<div id="slider"><script src="http://contohblognih.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script></div>
<!-- Automatic Latest/Recent Post Slider For Blogger Start -->

6. Ganti alamat blognya dan save! Beres........!

Featured Image Slider Otomatis #2

Yang ini dari DTE. Demonya bisa dilihat di halaman depan Cara CB.
Cara memasangnya gampang banget:

1. Layout → Add Widget → HTML/JavaScript
2. Copy & Paste kode berikut ini:

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<style type="text/css">
.slider-rotator {
  width:430px;
  height:240px;
  padding:0 0;
  background-color:white;
  font:italic normal 13px/1.4 Arial,Sans-serif;
  color:white;
  border:1px solid black;
}
.slider-rotator .slider-item {
  background-color:white;
  height:240px; /* Same with `.slider-rotator` height */
  padding:0 0;
}
.slider-rotator h4 {margin-top:0;color:#ff6}
.slider-rotator p {margin:2px 0 0}

/* Slider details as caption */
.slider-rotator .detail-wrapper {
  position:absolute;
  top:auto;
  right:0;
  bottom:0;
  left:0;
  background-color:black;
  background-color:rgba(0,0,0,.9);
  padding:.5em 1em;
  z-index:4;
}
.slider-rotator-nav {
  text-align: center;
  background: #777;
}
</style>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
    makeSlider({
    url: "http://cara-cb.blogspot.com", // Your blog URL
    thumbWidth: 430 // Thumbnail width in pixels (same with slideshow width)
});
</script>

3. Ganti alamat blog warna merah dengan alamat blog Anda.
4. Save!

Memasang Automatic Featured Posts Slider Widget di Sidebar Blog

Ada juga kode untuk memasang featured image slider di sideba blog. Cara pasangnya juga mudah banget:

1. Layout > Add a Gadget > pilh HTML/Javascript
2. Judul isi dengan, misalnya, Featured Posts atau "Post Gallery", bebas lah!
3. Copas kode berikut ini:

<style type="text/css">
ul.drdsr-feat-posts *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.drdsr-feat-posts{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.drdsr-feat-posts,ul.drdsr-feat-posts li{margin:0;padding:0;list-style:none;position:relative}
ul.drdsr-feat-posts{width:300px;height:450px}
ul.drdsr-feat-posts li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.drdsr-feat-posts li:nth-child(1),ul.drdsr-feat-posts li:nth-child(2),ul.drdsr-feat-posts li:nth-child(3),ul.drdsr-feat-posts li:nth-child(4){display:block}
ul.drdsr-feat-posts img{border:0;width:100%;height:100%}
ul.drdsr-feat-posts li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.drdsr-feat-posts li:nth-child(2){left:0;top:50%}
ul.drdsr-feat-posts li:nth-child(3){left:50.5%;top:50%}
ul.drdsr-feat-posts li:nth-child(4){width:100%;left:0;top:75%}
ul.drdsr-feat-posts  .overlayx,ul.drdsr-feat-posts li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.drdsr-feat-posts .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-color: #000;
color: #fff;
-moz-opacity: .5;
-khtml-opacity: .5;
opacity: .2;
text-align:justify;background-position:100% 50%;background-repeat:repeat-x}
ul.drdsr-feat-posts
ul.drdsr-feat-posts li:nth-child(1) .overlayx{background-position:50% 25%}

ul.drdsr-feat-posts .overlayx:hover{-ms-filter:Alpha(Opacity=90);filter:alpha(opacity=10);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}

ul.drdsr-feat-posts h4{position:absolute;bottom:2px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:"Segoe UI",Verdana,"Trebuchet MS",Times,"Times New Roman";font-weight:normal}

ul.drdsr-feat-posts h4{color:#fff;background-color:#000; filter:alpha(opacity=60); opacity:.6;}

ul.drdsr-feat-posts li:nth-child(1) h4{position:absolute;bottom:30px;font-size:230%;color:#fff;background-color:#000; filter:alpha(opacity=70); opacity:.7;}
ul.drdsr-feat-posts li:nth-child(4) h4{font-size:170%}
li:nth-child(2) h4{font-size:120%}
li:nth-child(3) h4{font-size:120%}
ul.drdsr-feat-posts .label_text{position:absolute;bottom:10px;left:10px;z-index:2;font-size:120%;color:#fff;font-weight:normal;background-color:#000; filter:alpha(opacity=60); opacity:.6;}
.label_text .autname{color:#fff;right:2px;padding:2px;}

ul.drdsr-feat-posts li:nth-child(2) .autname,ul.drdsr-feat-posts li:nth-child(3) .autname{display:none} li:nth-child(3) .label_text{display:none}
li:nth-child(2) .autname{display:none} li:nth-child(2) .label_text{display:none}
li:nth-child(4) .label_text{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:124px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:128px}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript" data='cfasync'></script>
<script src="http://feat-posts.googlecode.com/svn/widgetjs"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://contohblognih.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:200,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>

>>> Ganti http://contohblognih.blogspot.com dengan alamat blog Anda!

4. Save!

Itu dia ragam cara membuat Featured Post Image Slider untuk Blog, baik versi manual maupun otomatis. Sekali lagi, NOT RECOMMENDED untuk blog pribadi atau yang fokus ke loading blog yang cepat. (http://contohblognih.blogspot.com).*