Cara Membuat Slide Show Blogspot 02

Slide Show yang ini lebih menarik. Sekilas memang mirip dengan Slide Show sebelumnya. Skrip yang digunakan tidak terlalu banyak sehingga tak terlalu mempengaruhi loading. Instalasinya juga cukup sederhana.
Yang berbeda adalah efek transisinya. Yang ini menggunakan gaya random square. Jadi, pergantian gambarnya berkotak-kotak, gitu!

Cara membuat Slide Show yang ini saya peroleh dari http://workshop.rs/projects/coin-slider/
Seperti tutorial slide show sebizaku yang lain, ini bukan sekadar kopas. Saya telah mencobanya dan berjalan dengan baik. Buktinya, sample image sudah saya ganti dengan gambar dari blog saya (nanti Anda bisa ganti dengan image pilihan Anda sendiri)

Jika cara memasang slide show Random Square ini anda ikuti dengan hati-hati, kemungkinan gagal sangat tipis.

Spesifikasi Slide Show Coin Slider
Slide Show Random Square ini di samping menggunakan jquery ajax.googleapis.com juga menggunakan jqucoin-slider sendiri.
Antar alain adalah:
1. Pergantian image (transition effect) menggunakan gaya random square yang atraktif.
2. Skrip tidak terlalu banyak. Instalasinya cukup mudah
3. Bidang text muncul dari bawah ke atas dan menghilang ke bawah.
4. Untuk menyesuaikan dengan bidang template, Anda cukup mengubah satu bagian pada width dan heigh saja. Yang lain otomatis menyesuaikan diri.

Cara memasang Slide Show di template Anda
1. Masuk ke Akun/dashboard Anda
2. Pilih Template, lalu Edit HTML.
3. Backup dulu untuk menjaga kemungkinan buruk.
4. Temukan kode seperti ini: ]]> </skin>
5. Copy dan paste-kan code berikut sebelum kode ]]> </skin>

/* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 530px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; } /*----End Coin CSS--*/

6. Kode di text-area di bawah ini, diletakkan sebelum kode:</head>

<!--Coin Slider Scirpt--> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $('#coin-slider') .coinslider({ width: 550,height: 220, navigation: false, delay: 5000 }); }); </script><!--End Coin Slider Scirpt-->

7. Jika sudah, Save.
8. Masuk ke: Tata Letak >
9. Klik: tulisan Add New Widget
10. Pilih HTML/Javascript, kemudian letakkan kode berikut:

<!--Coin Slider widget--> <div id='coin-slider'> <a href="#" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjmEMI1ht_p4X9hkfRuR9KLLcXCyFA9LqJ8cdUKBIcqZmWQe6CsI4H4YnL5lLtgSiHxkmg6CsCT0KT3upQxjTpT2f1CGxKoDB8d8AFNqoQ3jBruqjtF-JWB-4zgSatb-WKEiCjYcwny7s/s1600/nature+01.jpg" /> <span> Bayangan selalu lebih besar dari aslinya, apapun itu! Gagal maupun sukses. </span> </a> <a href="#" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3wZUGASfyZrB-W0tOM5PtFNaStYZawRPWmkbLHGkKI3YYmdyao_DtP9Nlah9-W8LpXTpN4Pq1_gcvllci_OHciC3gZh07OuFK5GPl-UH_JI9d2O5vw2gMYD0mZzM8yX-WGNDzCD8VFQ/s1600/nature+03.jpg" /> <span>Memang baik menjadi orang penting, tetapi lebih penting menjadi orng baik </span> </a> <a href="#" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1bVqBMJrYt4sVP_tK_CEqtZxwOyu6hFjN5-GXXKSNhJ9xSsyH_JUYa7gJT1AZjwrh84F9VPS7cp4Au-fiHBDwpOOOQdqAH3zZDlTcgIsOAfzKOZAEDTLfq089Q00W6-bm8BQ3Sd1q9Bk/s1600/nature+02.jpg" /> <span> Tak seorang pun dapat membuat Anda sakit hati, kecuali Anda menghendakinya. </span> </a> <a href="#" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhamDwzy4__PTlGioIp9Ry0p3pilqAhj3uIrY1sckYpS9vtiBAMIYhtNKtMPsFJb5QLMfREIRCfK8SPes3QUiaE5S0n4lm_9LVMZhTJKVhWGcdvlJEFZ6sNMS4Ry8Yv9g_ZJAWg3Ns6w3A/s1600/nature+04.jpg" /> <span> Apapun yang Anda pikirkan, gagal atau sukses adalah benar. </span> </a> </div> <!--End Coin Slider widget-->

11. Terakhir, Simpan.

Jika cara memasang Slide Show benar, dapat dilakukan Ubah-suai
1. Perhatikan text-area pertama. Hanya cukup sekali mengatur width= dan height=. Yang lain menyesuaikan diri.
1. Lalu, lihat juga pada text-area kedua. Sudah ada contoh untuk mengganti ALAMAT POSTING dan ALAMAT IMAGE ANDA. Tinggal ganti saja.
Tidak sulit, bukan?

Jika cara membuat slide show ini gagal.
Jika gagal ya, hanya karena telah terjadi conflict dengan kode javascript sebelumnya. Maka, terserah Anda, pertimbangkan mana yang lebih penting, yang kurang penting bisa diihapus.

Namun, jika sudah begitu, masih gagal juga, mohon saya diberi tahu lewat komentar di bawah posting. Kalau berhasil, gak beritahu juga gak pa-apa! Yang pasti, saya ikut senang jika Anda senang. Success4U.Whienda. 

Sumber: http://sebizaku.blogspot.com/2012/10/cara-membuat-slide-show-blogspot-02.html?showComment=1356755774701#c794117149112003003

• Tweet
• Share
• Share
• Share
• Share