0 Cara Memasang SlideShow Di Blog

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!

 

Contoh Slide Show

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 heighsaja. 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/AVvXsEism82GEBbzp_AeBLWLLNYHKmTFTUySUZYn5JWN1LxJowB2qaorTofhXtzIQsIEked3KS_TD5lLV3Bz9El9oTDf9HOQnlhJL8KCedYGruSr4whbk_ty1rbAhnVyFqsppNhA-bWzt-2q3Cg/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/AVvXsEjPPXsHZQqBKah0cal7QrYqZQzSPt1S93Stdo-6bP2H913mU8KtU-wMDN9gL7bNTTQqAJk28RZ6mNVSiKd08W2XkGtyE-Luv5CeyNvycdrAGwEhlRu1QI22p2hE1n_m_gCrulYwNUc2d1Q/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/AVvXsEhKFP5RkXswbNT3vu29xyoOW3vPHj8bZOk0kTJuyD24hKvMjJyStibM58p9c4Dcv_CPyJjbojI6X41X3EoOtFooKoKpLVPMRi-OOQXAC_YBQG-m4rXjqUZl-NQ7tOw08xAtCyYkBOJ1ZPQ/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/AVvXsEhT86V0WwLGliWgQ2jRKM7CHE9qZc34EYHjYi0CERoqoecpyP-ccOfTx1Et92YHTphTQpXpY1yFtBkE3IJ8j2SZoqZmsq2Ur2btFokKYmmnyo346fPfm8mI65UTUOrul-m_KXOz3zVotbQ/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?

Artikel Terkait :