Cara membuat image slinder

maw buat images slinder seperti saya niie diatas tu dah ada .. nah gimana yach cara nya buat images slinder .... 

langsung ke TKP :

pertama : cari gambar ke facebook ,google ,dimana saja yang penting addreas terakhir ada tulisan .jpg contohnya begini https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/187854_110770398831_1158751562_n.jpg mudah cari begituan arah kan cursos ke gambar klik kanan open image in new tab nah diadreas kan ada link thuw dicopy ke notepad yach
kedua : login blogger e-mail dan pasword (semuanya dah taw pasti)
ketiga : klo sudah didasboard masing masing pilih Rancangan/Design 

keempat : pilih edit html tapi download template dulu yach takut klo di edit salah ech hilang semua edit html nya harusnya kan blog kita penuh dengan html 

ke lima : Centang expand widget.

ke enam : cari kode <div id='main-wrapper'> ,untuk memudahkan pencarian CTRL+F 

ke tujuh : 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijGHjGHrY-Nr6YPPkNYLpYnKwkuJ1lXmAnQD5o2RptjiEj5blJQK3l-CaDx9ERcPartAf0RqvEeAm1kDoEf7P_GGoOsZZ3WJU4WEyZtiX_J-Gd0t-q97hPCvBAvnIRxzHmCrNWKMc9EVk/s0/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 --> 

masih 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=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijGHjGHrY-Nr6YPPkNYLpYnKwkuJ1lXmAnQD5o2RptjiEj5blJQK3l-CaDx9ERcPartAf0RqvEeAm1kDoEf7P_GGoOsZZ3WJU4WEyZtiX_J-Gd0t-q97hPCvBAvnIRxzHmCrNWKMc9EVk/s0/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

sudah paham belum contoh diatas ... nah semoga bermanfaat ya untuk pertama mulai nya membaca bismillah agar dimudahkan ...