Cara Menampilkan "jQuery Image Slider" pada Blog

jQuery Image Slider telah banyak terpasang pada template blogger gratis yang tersedia. Mungkin sobat blogger bertanya-tanya dengan widgwt yang satu ini. Jika sobat blogger ingin tahu seperti apa Image Silde ini, bisa sobat blogger lihat DISINI. Akan tetapi tampilan slidenya pada tips ini tidak seperti yang anda lihat.

Mungkin supaya sobat blogger lebih tahu seperti apa tampilan image slider ini, alangkah lebih baiknya jika sobat blogger langsung menampilkannya paaada blog

sobat.

Berikut adalah langkah-langkah untuk menampilkan jQuery Image Slider pada blogspot.

1. Login ke blogger
2. Pada Dasbor blog, silahkan pilih Template ==> Edit HTML
3. Jangan lupa Backup template kamu.
4. Cari kode </head>
5. Jika sudah ketemu kodenya, Letakkan kode CSS berikut diATASnya.

/*-------------------- MBT jQuery Image Slider -------------*/
.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;}
.fp-slides{}
.fp-post{padding:13px;}
.fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-title{color:#787878;font:bold 14px  Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;}
.fp-title a{color:#000;text-decoration:none;}
.fp-title a:hover{color:#0080fF;text-decoration:none;}
.fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;}
.fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;}
.fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;}
.fp-nav{width:590px;padding:0px 10px;height:14px;}
.fp-pager a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4VaFgSn2z8GoSlQDvoIoevVuVrYmbBTKrCSoloWCdvSV_miFTl9C2HhcCArbij_tnVTo_xy7H8j2IYkuGvBBDXSZAqedMdQNRURAtIJpSrJwQ9XTJHNSspjcusR3j2JDNl_xBEnmJrw4/s1600/featured-pager.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;}.fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;}.fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9i88twqZw6K-OyvHF1LEulc4fY17utDg5rJTvBlrr0yDiHL2GIzBIOn0Sj7Q_bEuYF3n5gAnwpSgtv_55fVG3QSRbIL4J7Kclr-XmrKpEVYBsZFqSrZUR4wePaeVjepPHz2JzrDcZ_kc/s1600/featured-prev.png) top left no-repeat;}.fp-prev:hover{opacity:1;}.fp-prev:active{opacity:0.7;}.fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpxzqtiZm_R7Bb76mprkX9KHcrjXQPgclxFOBhG7cllxGDczBjwxY8w5qDiClGFsr2vd2turMGaVlt5KSIvPnVtb-dyil81j2bppmcAJmYXlcwZb_oy3pb-kqc1NDkfBP9Fi5x4AiB-wA/s1600/featured-next.png;) top left no-repeat}.fp-next:hover{opacity:1;}.fp-next:active{opacity:0.7;}

Perhatikan kode yang bercetak tebal dan berwarna ungu. Silahkan anda ganti sesuai dengan blog anda.

6. Sekarang cari kode yang mirip seperti ini <div id='main-wrapper'>
7. Jika ketemu, letakkan kode HTML berikut diATASnya.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div class='featuredposts clearfix'>
<div class='fp-slides'>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='TAMBAH URL POST-1'><img src='TAMBAHKAN LINK GAMBAR-1'/></a></div><h3 class='fp-title'><a href='TAMBAH URL POST-1'>TULIS JUDUL POST</a></h3> <p> TULIS DESKRIPSI POST</p>
</div>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='TAMBAH URL POST-2'><img src='TAMBAHKAN LINK GAMBAR-2'/></a></div>
<h3 class='fp-title'><a href='TAMBAHKAN URL POST-2'>TULIS JUDUL POST</a></h3> <p> TULIS DESKRIPSI POST</p>
</div>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='TAMBAH URL POST-3'><img src='TAMBAHKAN LINK GAMBAR-3'/></a></div>
<h3 class='fp-title'><a href='TAMBAHKAN URL POST-3'>TULIS JUDUL POST</a></h3> <p> TULIS DESKRIPSI POST</p>
</div>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='TAMBAHKAN URL POST-4'><img src='TAMBAHKAN LINK GAMBAR-4'/></a></div>
<h3 class='fp-title'><a href='TAMBAHKAN URL POST-4'>TULIS JUDUL POST</a></h3> <p> TULIS DESKRIPSI POST</p>
</div>
<div class='fp-post'>
<div class='fp-thumbnail'><a href='TAMBAHKAN URL POST-5'><img src='TAMBAHKAN LINK GAMBAR-5'/></a></div>
<h3 class='fp-title'><a href='TAMBAHKAN URL POST-5'>TULIS JUDUL POST</a></h3> <p> TULIS DESKRIPSI POST</p>
</div>
</div>          
<div class='fp-nav clearfix'>
<span class='fp-pager'/>               
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
         
</div>

</b:if></b:if>

Perhatikan kode-kode yang berwarna-warni di atas. Silahkan ganti sesuai instruksi yang telah ada.

8. Jika sudah selesai, silahkan Simpan Template, dan lihat perubahannya pada blog anda.
Semoga bermanfaat, dan mohon maaf jika ada salah. (Jkt/2012)