Menampilkan Foto Slide di Blog

Menampilkan Foto Slide di Blog

Slide show bisa digunakan untuk menampilkan foto liburan yang banyak, atau memajang foto-foto produk untuk toko online. Cara untuk membuat slide show ini sangat mudah, tidak perlu pintar photoshop atau flash. Kita tinggal menyiapkan foto yang sudah diupload (dihosting). Kita bisa memanfaatkan post blogger, Picasa, Photobucket, dan lain-lain.

Cara Mudah Membuat Slide Show Foto di Blog
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 100%;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 100%;
   height: 250px;
}
</style>
<div id="content-slider">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicWEaK3eNTYBr1ZRLC_SwP1bb49lgEZCmEdXCu8bUSH3i_IyVT68OGLU4uHxhgN1M8kwXHuSgG6W-bk88-4USZxSqcK1IIx2I_ac1m6BiEhrz04tB5lP0vRuwU7o4Qi1wN64o1ZDxuQdU/s1600/DSC01930.JPG" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb3ITecxmwV7rHPGLdHpIqmNm9Hq-trlCIdLO7R5ya_5Qj80Emue3km_RKP-PwGNRT01NpnDihNsDwgNaIjnAXqPFBAKnUp3t5ZOevBDUtTXs454O9p1IURK3mE_7CjQ10_m-wjVDQPbo/s1600/DSC01931.JPG" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUBQSPjuIhpEqOT1BU8bf7BVqG75Sqe5zr4l0ccHjIl-8nk13oHZZoG90h22_Y9zG_V5q-3IFMrHHMSPHTf2q6EB8ENHs7OSvwvpObYNPJECoGFmHtOXeG0eRfqnqbhpNAwjCLYsx2vAs/s1600/DSC01950.JPG" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0bAi4fLaD-lljNmy_-fWkw1re0rp5i289knm4o7qwNde5UzxfmMyFUqafphmUpy84HS3G3gP1MgQBTT_qk32AndF1A2qFwVZWKGwNYhXLBSFajizwoPpjLYhBuGWYTIs0oB_5z4j6b9c/s1600/DSC01963.JPG" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH6xcO7wsrjtqubMTNtdNk4Uri08hSNAvzYdGe7_mkFdpBSaeaftjIYg4oSPiIWGPWn5ub1GN_gHO5ci4kea7bxaSOCvWXw7NMNsrfgPBbaNPp1Jzswwt7EoaO_ztjQuGJMLLSsq5-RbY/s1600/DSC02133.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOfugudKfe5nRHf6x6zUB0hEFLSvwS5WofohKsCBqNFxAeXdGgQPOn1fg70OSd_GKYXSEFQIcEYz9Ot-TIcglcQXqUabiEZCEvSPJQ-RExfY7USiC-pOf1_RdtKWEq3AF_ZcZcyNXc0M4/s1600/DSC02158.JPG" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju0sZ27nVSZVOZf0xBpVLHxajc5CzcqKtd_Fmas30DyzmrYQnb1wr36xckgFQVb9YCl8UpqxjVum_D70N8opgESa49I9_xJGub-ZPF6vPXyVXtY7FTJZBf-f4epXWrbIFEmLjwQjiZxyc/s1600/DSC02439.JPG" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhofrLwpryoXF-3tP0NRxF2pe3IPTQqdNaN4Ud4833Eu2yOoVk9bt81QCeUJkH44YPZRjxUFHOC4qCdHeUp3lRjudrPbZj0HGbXeRFLHE-ZJWIY2ywJmbOhfjFmmmNMcFyaojnatxcNXpA/s1600/DSC03847.JPG" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ0_ozaCXhEsBCWaHdzaq2bPOx0dFxg5q9DWxJNlJJSubl9hCzrCJydclAocQflhrZW4V7eijA3x0972ntHojrgKlajBiJR7EDYfTgT3rbm3syeiqBH6L3tHouPm6wVbYFaUzGURdE_wA/s1600/DSC03850.JPG" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZn6yZHhJBVm4E1z5OFfVt-nrqAJRr1E1Kwrh66JuQIA8I7_4LqCbOM1NXBtfYqY6DQOuEVt1Q76NpGO5dGcu_Wh3fxKAX6WN9OishA-ab-3s7gCZW1p0n5abrAHup9XjVR_UukevY5XQ/s1600/DSC03861.JPG" />
</div>

5. Ganti URL dengan URL foto yang sudah dihost (upload)
6. Kita bisa juga menyesuaikan tinggi foto (height) dan lebarnya.
7. Simpan jika sudah selesai.