Cara Membuat Image Slider Di Blog

Baiklah Sobat.. Hari ini saya akan berbagi tips mengenai Cara Membuat Image Slider Di Blog anda..Mungkin diantara teman-teman ada yang ingin mempercantik blog dengan menambahkan Image Slider pada halaman blog anda. Dengan Menambahkan Image Slider, Blog kita akan menjadi lebih hidup dan memudahkan kita untuk share konten-konten utama atau konten yang baru kita update dengan pengunjung. Dengan demikian pengunjung akan dengan mudah mengetahui konten-konten apa saja yang baru kita update dan ketika mengklik image slider tersebut akan langsung diarahkan ke alamat dimana konten tersebut berada.

Yupp. Mungkin kita langsung aj ke tipsnya. Anda bisa ikuti prosedur berikut untuk membuat image slider:

A. Upload Picture ke Photobucket

1. login ke Photobucket

2. Upload picture yang ingin anda shared. Setelah diuploud, masuk ke album anda

3. Pilih picture yang baru anda upload, dan pilih direct link untuk mengcopy sambil mengarahkan kursor ke pic tersebut.

B. Blogger 

1. login ke blogger.

2. pilih Rancangan/Design

3. Pilih Edit HTML

4. kemudian Centang expand widget.

5. Lalu klik dan tahan ctrl+f ( tujuannya untuk mencari), masukan cari kode:

<div id='main-wrapper'>

6. Pastekan kode berikut tepat dibawah kode diatas :

<!-- Featured Content Slider Started -->


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

<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='http://i1148.photobucket.com/albums/o571/sam_rizal911/en-US_Acer_Aspire_AS8951G-9630_Blk_CWF-00490_RM1.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 1 title</a>
</h3>
<p>
replace these sentences with your own descriptions.
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 1 Code End -->

<!-- Slide 2 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='http://i1148.photobucket.com/albums/o571/sam_rizal911/OriginalJPG12.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 2 title</a>
</h3>
<p>
replace these sentences with your own descriptions.
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 2 Code End -->

<!-- Slide 3 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='http://i1148.photobucket.com/albums/o571/sam_rizal911/bamboo11_ov3.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 3 title</a>
</h3>
<p>
replace these sentences with your own descriptions.
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 3 Code End -->

<!-- Slide 4 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='http://i1148.photobucket.com/albums/o571/sam_rizal911/vx7_ov2.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 4 title</a>
</h3>
<p>
replace these sentences with your own descriptions.
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 4 Code End -->

<!-- Slide 5 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='http://2.bp.blogspot.com/-qu0zvnJo-0c/TysJvUHLRiI/AAAAAAAADHY/umOdMWGVBdM/s000/5.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 5 title</a>
</h3>
<p>
Now replace these sentences with your own descriptions.
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 5 Code End -->

</div>

<div class='fp-nav'>
    <span class='fp-pager'/>
</div>
         
</div>
</div>
<div style='clear:both;'/>

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

<!-- Featured Content Slider End -->

klo bingung bisa lihat digambar dibawah :

Catatan:
Ganti tulisan waran merah dan fuchsia di contoh ini dengan url milik anda. warna merah adalah url konten anda, warna fuchsia url yang anda copy di photobuket.

<a href=' #'><img src=' http://2.bp.blogspot.com/-qu0zvnJo-0c/TysJvUHLRiI/AAAAAAAADHY/umOdMWGVBdM/s000/5.jpg '/></a>

hasil  :

<a href='http://infocomputer7.blogspot.com/2011/12/aspire-ethos-as8951g-9630-lxrj202153.html'><img src='http://i1148.photobucket.com/albums/o571/sam_rizal911/en-US_Acer_Aspire_AS8951G-9630_Blk_CWF-00490_RM1.jpg'/></a>

dan juga ganti kode dibawah ini ssua keinginan anda

<a href='#'>This is default featured slide 1 title</a>
contoh:

<a href=' http://infocomputer7.blogspot.com/2011/12/aspire-ethos-as8951g-9630-lxrj202153.html'>ASPIRE ETHOS AS8951G-9630 ( LX.RJ202.153 ) SPECIFICATION REVIEW</a>

lakukan hal yang sama juga pada kode slide 2,3,4,dan 5 pada kode diatas. Jika ingin melihat contoh blog yang menggunakan image slider, bisa anda lihat disini

yupp..Mungkin itu yang bisa saya bagi berikan. Semoga membantu dan bermanfaat untuk anda. terima kasih dan have a nice blogging.:)

 

Sumber : klik