11 Apr 2012

thumbnail

Cara Menampilkan jQuery Image Slider Di 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 sobat lihat.



agar supaya sobat blogger lebih tahu seperti apa tampilan image slider ini,
Berikut adalah langkah-langkah untuk menampilkan jQuery Image Slider pada blog



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(http://4.bp.blogspot.com/-Bc53drZbsOc/TeDnc3a2_AI/AAAAAAAAHJ4/NlGJlRzJ3dE/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(http://2.bp.blogspot.com/-xrvnRlI02a8/TeDndJyHamI/AAAAAAAAHKA/VSA--b82v9w/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(http://1.bp.blogspot.com/-UzsUMLmRXT4/TeDnchM8AEI/AAAAAAAAHJw/pOOPL9dK6-g/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 merah, Silahkan anda kreasikan dengan blog sobat.

6. Sekarang cari kode yang mirip seperti ini <div id='main-wrapper'>
(agar lebih mudahnya sobat ketikkan bersamaan CTRL+F)
7. Jika sudah 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>

,/div>

Perhatikan kode yang diatas,terdapat banyak warna,silahkan sobat edit sendiri sesuai dengan instruksi didalamnya.

8. Jika sudah selesai, silahkan Simpan Template, dan lihat perubahannya pada blog anda.

Semoga Bermanfaat untuk para sobat blogger.

Sponsored Links


Related Posts Plugin for WordPress, Blogger...

Subscribe by Email

Follow Updates Articles from This Blog via Email

No Comments