Caranecom : Cara membuat layar slide di atas postingan pada blog
Salam Blogger"
Caranecom kali ini akan membahas tentang cara membuat layar slide diatas postingan pada blog kalian, jika pernah dalam satu kesempatan kalian mengunjungi salah satu blog atau situs yang terdapat layar slide tentu kalian sempat terbersit ingin mencoba menggunkannya pada blog kalian.
Sebelum kita melanjutkan tentang pembahasan cara membuat layar slide ada baiknya kalian bisa lihat terlebih dahulu pada gambar dibawah ini mungkin sudah seperti inilah yang kalian inginkan. :
Jika benar seperti tampilan gambar diatas dan itu yang kalian inginkan, mungkin tidak perlu basa-basi lagi kita langsung sama menuju TKP!
Untuk langkah awal tentunya kalian harusnya sudah memiliki blog bukan, namun jika masih ada yang belum memiliki blog ya tentunya buat dulu dan sangat gampang kok, bisa kunjungi link ini untuk cara membuat blok lengkap : Klik Aku.
Jika sudah memiliki Blog silahkan kalian untuk masuk ke Dashboard blog kalian kemudian klik Template selanjutnya klik Edit HTML, disini kalian akan masuk pada lembar script untuk edit HTML.
Pada laman HTML ini silhkan kalian cari kode script : <div id='main-wrapper'> untuk mempermudah pencarian kode tersebut gunakan pencarian dengan cara tekan CTRL + F pada keyboard kalian kemudian copy dan pastekan kode <div id='main-wrapper'> selanjutnya tekan Enter,
Jika sudah ketemu kode tersebut maka selanjutnya kalian tinggal pastekan kode berikut tepat dibawah kode : <div id='main-wrapper'>
Kode Script untuk Layar slide:
<!-- Featured Content Slider Started -->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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='#1.1'><img src='#1.2'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#1.3'>#1.4</a>
</h3>
<p>
#1.5
</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'>
<ahref='#2.1'><img src='#2.2'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#2.3'>#2.4</a>
</h3>
<p>
#2.5
</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'>
<ahref='#3.1'><img src='#3.2'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#3.3'>#3.4</a>
</h3>
<p>
#3.5
</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'>
<ahref='#4.1'><img src='#4.2'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<ahref='#4.3'>#4,4</a>
</h3>
<p>
#4.5
</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'>
<ahref='#5.1'><img src='#5.2'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<ahref='#5.3'>#5.4</a>
</h3>
<p>
#5.5
</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 -->
Jumlah slide pada kode diatas terdapat 5 layar slide, dan kita akan bahas tentang kode script yang berwarna merah untuk kalian isi url atau link dan gambar sesuai keinginan kalian, silhkan anda baca penjelasan berikut ini :
Disini kita hanya mengambil contoh satu slide yaitu slide nomer satu karena dari nomer dua sampai dengan nomer lima caranya sama :
<!-- Slide 1 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#1.1'><img src='#1.2'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#1.3'>#1.4</a>
</h3>
<p>
#1.5
</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 -->
Pada kode warna merah yang pertama :
- #1.1 (silahkan isi link url yang kalian inginkan untuk menuju ke artikel atau postingan kalian atau menuju ke situs lain yang kalian inginkan)
- #1.2 (silahkan kalian isi dengan link gambar sesuai yang diingikan) [penjelasannya : adalah link gambar jika di klik akan menuju ke link url #1.1)
- #1.3 ( silahkan kalian isi dengan link yang sama seperti pada #1.1, )
- #1.4 ( silahkan kalian isi Kepala atau judul sesuai )
- #1.5 ( silahkan kalian isi dengan deskripsi yang sesuai)
Demikian pembahasan kali ini semoga dapat bermanfaat.
Terima Kasih
Salam Caranecom