Cara Membuat dan Memasang Featured Content Slider di Blogger

Cara Membuat dan Memasang Featured Content Slider di Blogger - Banyak fitur untuk mempermanis blog. Salah satunya, featured content slider (FCS). Ibarat toko, FCS adalah etalase di mana kita bisa memajang konten yang dirasa ‘menjual’. Berikut ini cara membuat featured content slider.



Contoh blog dengan featured content slider klik disini

Sekarang masuk ke tutorialnya:

1. Masuk ‘Layout’-->‘Edit HTML’, centang ‘Expand Template Widget’ (jangan lupa backup dulu untuk jaga-jaga).

2. Cari kode </head>

3. Tambahkan kode berikut ini di atasnya.

Kode

4. Perhatikan pada kode bagian ini:
<style type='text/css'>
#slidearea{
height: 230px;
overflow: hidden;
position: relative;
width:600px;
background:#333333;
}

Anda bisa ganti tinggi (height) dan lebar (width), serta warna background (di situ kodenya #333333) sesuai selera.

5. Simpan.

6. Masuk dashboard. Klik ‘Layout/Rancangan’, lalu ‘Tambah Gadget’, pilih ‘HTML/JavaScript’, dan masukkan kode ini:

<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 postingan yang akan ditampilkan" title="#">Judul postingan</a></h2>
<p>Uraian singkat postingan.[...]</p>

<img src="URL foto/gambar" alt="" />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL postingan yang akan ditampilkan" title="#">Judul postingan</a></h2>
<p>Uraian singkat postingan.[...]</p>

<img src="URL foto/gambar" alt="" />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL postingan yang akan ditampilkan" title="#">Judul postingan</a></h2>
<p>Uraian singkat postingan.[...]</p>

<img src="URL foto/gambar" alt="" />
</div>
</li>
<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>

7. Simpan, lalu pilih penempatannya.

8. Selesai. Selamat mencoba.