Sunday, May 26, 2013

Cara termudah membuat slide show di blog

Cara termudah membuat slide show di blog. Panduan blogger untuk blogger pemula. Panduan blogger yang akan menjelaskan, membahas serta membantu sobat blogger semua yang khususnya masih dibilang awam atau masih pemula dalam dunia blog tentang "Mudahnya Membuat Slide Show di Blog". Sebelumnya, fungsi slide show sendiri adalah untuk menambah tampilan blog supaya lebih "kelihatan" profesional dan membuat tampilan blog semakin lebih cantik. Banyak yang sekali dari teman-teman blogger yang di dalam blognya dipasang feature slide show. Kebanyakan dari mereka memanfaatkan feature slide show ini untuk kepentingan Bisnis (dalam hal ini dipakai untuk area iklan).
Memang slide show ini banyak sekali kegunaannya. Namun untuk bisa membuat sebuah slide show di blog,menurut tutorial yang banyak beredar bisa dibilang kadang berhasil dan kadang juga gagal dan terkadang "ribet" dalam proses pembuatannya. Dan dalam panduan blogger ini,sebuah panduan untuk membantu sobat blogger dalam pembuatan slide show di blog terbilang lebih mudah daripada tutorial yang banyak beredar. Selain itu,perbedaan slide show ini adalah feature slide show akan muncul pada setiap halaman blog. Perlu sobat ketahui,biasanya widget slide show yang banyak beredar serta tutorialnya hanya akan muncul pada halaman depan (Home) saja. Dan dalam pembuatannya, feature slide show yang ini tidaklah perlu "mengotak-atik HTML" artinya sobat blogger tak perlu dipusingkan dengan harus mengedit HTML terlebih dulu.

Dan untuk membuatnya,silahkan ikuti langkah-langkah seperti berikut ini :
1. Login ke Blogger
2. Klik Tata Letak
3. Klik Tambah Gadget
4. Pilih opsi HTML/Java Script
5. Copy dan Paste-kan kode di bawah ini ke dalamnya

<!-- 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='http://arabbianknight.blogspot.com/2013/05/cara-termudah-membuat-slide-show-di-blog.html'><img alt="Slide Show 1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhxwPl2iEVEuFYA3XWIEflrBHmsD8aNnDHkCK0_r6Cw4MNu8vAJAwOlo7-JlqP_GvOuELY7jUCkTilY9umjuAqIKMc_Z6cNhZuWfVvlA7ktoQ_sHf3MMU2Hwvl598RWdjXy9DFf3INNclb/s1600/1.jpg" title="Mau Buat SlideShow ini?klik aja gambarnya" /></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Judul Artikel 1</a>
</h3>
<p>
Beberapa kalimat tentang deskripsi/penjelasan atau isi dari artikel 1.Dan untuk mengganti tulisan "Judul Artikel 1" serta tulisan ini,silahkan Login ke Blogger>klik Tata Letak>klik edit (yang mana widget slide show ini diletakkan)>klik Simpan>klik Simpan setelan
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 1 Code End -->

<!-- Slide 2 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='http://arabbianknight.blogspot.com/2013/05/cara-termudah-membuat-slide-show-di-blog.html'><img alt="slide show 2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBDla-CmWr1e213YSmYnY97XAHgoap8QOc7UX4aj_DSMW-4uxS7sNSYDM6nvAg66HznkT4c2AZsOSM8r7DwEFloNsOiPmRZGR_i_nNTjwqJO7dyrSyZW5jqNiq_YaWYuKKZhVf8qbOHWPq/s1600/2.jpg" title="Mau Buat SlideShow ini?klik aja gambarnya" /></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Judul Artikel 2</a>
</h3>
<p>
Beberapa kalimat tentang deskripsi/penjelasan atau isi dari artikel 2.Dan untuk mengganti tulisan "Judul Artikel 2" serta tulisan ini,silahkan Login ke Blogger>klik Tata Letak>klik edit (yang mana widget slide show ini diletakkan)>klik Simpan>klik Simpan setelan
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 2 Code End -->

<!-- Slide 3 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='http://arabbianknight.blogspot.com/2013/05/cara-termudah-membuat-slide-show-di-blog.html'><img alt="slide show 3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjezg01RrfxVij4RhIIimHTbjkScg4I_GX0Y3sLCZG9X9ceqhy11hmMmnUILIfAeIG_C5Vl74t7mFU8s8vWydNHs-s50DL8LwTwAAUmFVaa5ozNTn8BTIjo8RQV4RvJQIyNjoJI5yuhJCYx/s1600/3.jpg" title="Mau Buat SlideShow ini?klik aja gambarnya" /></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Judul Artikel 3</a>
</h3>
<p>
Beberapa kalimat tentang deskripsi/penjelasan atau isi dari artikel 3.Dan untuk mengganti tulisan "Judul Artikel 3" serta tulisan ini,silahkan Login ke Blogger>klik Tata Letak>klik edit (yang mana widget slide show ini diletakkan)>klik Simpan>klik Simpan setelan
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 3 Code End -->

<!-- Slide 4 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='http://arabbianknight.blogspot.com/2013/05/cara-termudah-membuat-slide-show-di-blog.html'><img alt="slide show 4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhma9VYXJu6Pmk4fHs173nTbsYhH1I3zKaLV996FSslt8J5od0pMnVrPsAzzhoenbMyrI8o2OEmh1UsiPe73n7Jau610l2HhQnVastIDIa05S501pr4JhMD2Qx8I3jRlAVncN8kpO9PsOB/s1600/4.jpg" title="Mau Buat SlideShow ini?klik aja gambarnya" /></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Judul Artikel 4</a>
</h3>
<p>
Beberapa kalimat tentang deskripsi/penjelasan atau isi dari artikel 4.Dan untuk mengganti tulisan "Judul Artikel 4" serta tulisan ini,silahkan Login ke Blogger>klik Tata Letak>klik edit (yang mana widget slide show ini diletakkan)>klik Simpan>klik Simpan setelan
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 4 Code End -->

<!-- Slide 5 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='http://arabbianknight.blogspot.com/2013/05/cara-termudah-membuat-slide-show-di-blog.html'><img alt="slide show 5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKwjUL_lfEju-yaG1ySH8cJ-PNWmZgcZQAJODLIKvJNrBAlB2iUOVWMO8ySy_NfPD3As8bWrT8Sjq0RM7DOrDnkhtuCXo33b_qjXv2F7yO3Wxw8XOA9-zgd2r8Yyadh_KZ2eWfNdvF94-R/s1600/5.jpg" title="Mau Buat SlideShow ini?klik aja gambarnya" /></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Judul Artikel 5</a>
</h3>
<p>
Beberapa kalimat tentang deskripsi/penjelasan atau isi dari artikel 5.Dan untuk mengganti tulisan "Judul Artikel 5" serta tulisan ini,silahkan Login ke Blogger>klik Tata Letak>klik edit (yang mana widget slide show ini diletakkan)>klik Simpan>klik Simpan setelan
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 5 Code End -->

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

<!-- Featured Content Slider End -->

6. Saran akoe letakkan widget ini di atas Blog Post
7. Klik Simpan
8. Klik Simpan Setelan
9. Selamat Mencoba dan Semoga Berhasil

0 comments:

Post a Comment

#

Random Post

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Blogger Theme by Lasantha - Premium Blogger Templates | Affiliate Network Reviews