Automatic Featured Content Slider: Recent Posts with Image

Automatic Featured Content Slider: Recent Posts with Image. Featured Content Slider Widget for Blogger Blog.  

CARA Membuat Slider Featured Posting Terbaru plus gambar di halaman depan (homepage) untuk Blogger. Demonya ada di halaman depan blog Cara CB ini. Penampakannya seperti gambar berikut ini:

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. Save!

Widget Automatic Recent Posts Slider alias Slider Posting Terbaru Otomatis plus Image/Gambar sudah muncul di blog Anda! Good Luck!

Sumber Kode