Cara mudah membuat gambar slide di website

Assalamualaikum wr wb

apa kabarnya sobat smart???, sudah lama nih mangkir dari dunia blog, mohon maaf sebelumnya karena sedang banyaknya aktivitas yang padat dan ada satu kendala yang membuat blog ini menjadi agak vakum beberapa hari ini.

oke sobat smart, pada postingan kali ini saya akan memberikan tips trik membuat gambar slide di website sobat semua, cukup sobat copy dan paste aja langsung deh siap dan buummm jadilah gambar slide di website sobat semua, tentunya hal ini akan menambah daya tarik tersendiri pada website sobat smart

<!-- Featured Content Slider Started -->

<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=" link gambar "/></a>

</div>

<div class='fp-content-wrap'>

<div class='fp-content'>

<h3 class='fp-title'>

<a href='#'> Judul caption mu </a>

</h3>

<p>

Caption mu

</p>

</div>

<div class='fp-prev-next-wrap clearfix'>

 

<a class='fp-next' href='#fp-next'></a>

<a class='fp-prev' href='#fp-prev'></a>

</div>

</div>

</div>

<!-- Slide 1 Code End -->

<!-- Slide 2 Code Start -->

<div class='fp-slides-items'>

<div class='fp-thumbnail'>

<a href='#'><img src=" link gambar "/></a>

</div>

<div class='fp-content-wrap'>

<div class='fp-content'>

<h3 class='fp-title'>

<a href='#'> Judul caption mu </a>

</h3>

 

<p>

Caption mu

</p>

</div>

<div class='fp-prev-next-wrap clearfix'>

<a class='fp-next' href='#fp-next'></a>

<a class='fp-prev' href='#fp-prev'></a>

</div>

</div>

</div>

<!-- Slide 2 Code End -->

<!-- Slide 3 Code Start -->

<div class='fp-slides-items'>

<div class='fp-thumbnail'>

<a href='#'><img src=" link gambar "/></a>

</div>

<div class='fp-content-wrap'>

 

<div class='fp-content'>

<h3 class='fp-title'>

<a href='#'> Judul caption mu </a>

</h3>

<p>

Caption mu

</p>

</div>

<div class='fp-prev-next-wrap clearfix'>

<a class='fp-next' href='#fp-next'></a>

<a class='fp-prev' href='#fp-prev'></a>

</div>

</div>

</div>

<!-- Slide 3 Code End -->

<!-- Slide 4 Code Start -->

 

<div class='fp-slides-items'>

<div class='fp-thumbnail'>

<a href='#'><img src=" link gambar "/></a>

</div>

<div class='fp-content-wrap'>

<div class='fp-content'>

<h3 class='fp-title'>

<a href='#'>Judul caption mu</a>

</h3>

<p>

Caption mu

</p>

</div>

<div class='fp-prev-next-wrap clearfix'>

<a class='fp-next' href='#fp-next'></a>

<a class='fp-prev' href='#fp-prev'></a>

 

</div>

</div>

</div>

<!-- Slide 4 Code End -->

<!-- Slide 5 Code Start -->

<div class='fp-slides-items'>

<div class='fp-thumbnail'>

<a href='#'><img src="link gambar"/></a>

</div>

<div class='fp-content-wrap'>

<div class='fp-content'>

<h3 class='fp-title'>

<a href='#'>Judul caption mu</a>

</h3>

<p>

Caption mu

</p>

</div>

<div class='fp-prev-next-wrap clearfix'>

<a class='fp-next' href='#fp-next'></a>

<a class='fp-prev' href='#fp-prev'></a>

</div>

</div>

</div>

<!-- Slide 5 Code End -->

</div>

<div class='fp-nav'>

<span class='fp-pager'/>

</span></div>

</div>

</div>

<div style='clear:both;'/>

<!-- Featured Content Slider End --></div>


nah sobat tinggal ganti link warna orange itu dengan link gambar, judul caption dan isi captionnya. pada script di atas saya buat sebanyak 5 gambar, dan sobat smart bisa kreasikan saja menjadi beberapa gambar.

nah gimana mudah sekali bukan

oke sekian dulu postingan kali ini, jika ada pertanyaan silahkan tanyakan dikolom komentar dibawah ini atau bisa hubungi kontak yang tersedia.

akhir kata wassalamualaikum wr wb.

1 comments:

silahkan berkomentar dengan santun

 

Pengikut