Cara Membuat Slide Show di Blogspot

Seringkali kita lihat ada blog yang mempunyai slider, yang gambarnya berubah secara otomatis tanpa perlu kita klik. Nah sekarang saya sudah bisa membuatnya. Bersama ini saya sajikan tentang cara membuat slider tersebut.

Cara Membuat Slide Show diatas Postingan kita pada Blogspot:

1. Buka Dashboard blogspot kita
2. Buat New Post
3. Lalu upload gambar yang mau kita buat sebagai slide
4. Insert gambar untuk mengetahui address dari gambar yang kita upload tadi
   Contohnya gambar berikut:
   
   
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMZNAlQZ6RQCVJ63fnNCwIFX-uRrOWitp6goPkOoeXD1rPrWBW7ZLhKrB9iwDrLSoFuXxpwssvF_dGL_d9nNhb4mjK05zD6O2MaiHIdU4l113pYQmjFDLV4AJ9wtm2qdalTv43pMK9XRKb/s320/cver.jpg" style border="0" width="320" height="200">
   
   
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq4kPLeV9v-ME0R1-wMDm9OUJoM08xrZpoB4P0EclCevzLakuJ6Hkyehp0uD9HSWD59ivCFahE126tI_i-cIUerUiVdvtn6MDIewGN4oA4Tvvpp8DNBvx9wfHRCmQRHzze_Ppi1YkZlh4q/s320/01.jpg" style border="0" width="320" height="200">
   
   
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJot1vDQvCObHMUnXYu2OBliO7Yo3gt2-PcGuq9jW7d0JeCEniyAChdrNClnkMYRXYIamNFR_rIAHm0tkruEzuXS-NdHoNSLBW2jGn2gdocLX2LG7uY9EDcKl06XB31aez78Q1Cytodpp/s320/02.jpg" style border="0" width="320" height="200">
   
   
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA0JzNkRQ2tWqL1jeMSWUlw5KIlT3K5eK20f_u8XiJLjgBouUo77JId6qZ6mpJZAw0kmniv0lX1BJZO01_q7ERzFJycEnojGp6V4jvbtHgRvz8TV88UJL8BtR-kxH84FVLTRlANJvDVBFx/s320/03.jpg" style border="0" width="320" height="200">
   
   
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWEZC05UH6kbLqG1eUiwTDnv4XYdFJyTPg1e9y7llHFjFzz9sGmf8gNvr8tf8o4v3nNVBX9ink3PGctbo6Y0LUzMUBpTm4cJ_A1FpVW3T16XU_cQwIDogfeKCH4SVHCQP2OZQx0P6bV3L_/s320/06.jpg" style border="0" width="320" height="200">
   
   
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ0jdcu4J8Z6rY2Rgl4q5NWmDLLTpwYPcl0OAUmrdQabYXUjoMJWYHfXP0OnNg7XCMzGx4p20e1bZNUl86Xdxcbcn_kfvJLv9mUd0PY5fqDfQjluibAfKlO6uYMm7jr4RdaAkQuW0K_UZW/s320/07.jpg" style border="0" width="320" height="200">
   
   
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjCe14zgChKK-M1AI7UCNwzv0DQxs9u4PyPfo-CvGB7B5px1-v6lvaYNuCNNuf6S1qFi0atmBc-EHOxJ6vv7FZUc-Ps5eB6D99AeEN20hJzCKLLS-_v5HLhPJKcrd4Itn6yHb7qKfdu9eD/s320/08.jpg" style border="0" width="320" height="200">
   
   
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu3CzeKTMiRJlfpQN54Lp7_0Fa5j5I1u3BKm6L1R8RUeu8YmSUp1DyAUAIsG4wJOPW2OPVGglDvRdGgDXk3OTP8BjgXcKXtgw9p85g5IPYQz4UkF8WoSYVwYQkjZ2cpmjI6oBHO9IB7qme/s320/09.jpg" style border="0" width="320" height="200">
   
   
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxtX9IAO-oKlt1lfxkTFjPFvy88trLTDJGI0ftqkWktQHcG7qwIzHkGbOGbWi00DeDR4KX7IhMVf0owLzhDsQdswzbC0n1GynKl77Ed44_awipTs8c6Pj8IZGPPKhpb4XKuhJASJW5TAgC/s320/10.jpg" style border="0" width="320" height="200">
   
   
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidRc8UzAspz0HkOOEbnXtWhD1kNJdjpOD3_DZ6KawphyIKvli1h19IRUUVMD8Hfw9ZhiE_XPO0YA_Vs2OwB5oN8yZlPhLtsEW3AsIlviCzAxTVj9zpp-bMWzhYXs8B1UBVhpjRDE7FnpYD/s320/11.jpg" style border="0" width="320" height="200">
   
   
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5rxtnDkYronn1Cptj5cKPzkeyLOtObkTYJ6VPYlfcUC3a4fXYqRyF2DH9ovNaIzY52yBj9B6ltQIk0aCwyV0V50jD2gdl7LC0JLJbmDFPGDNjkfMW1hCJkUmG30ysorcrKCQS_a6ubW1q/s1600/04.jpg" style border="0" height="200" width="320">
   
   
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibgpZUIGU_X_F7j1WlGUWn4LgNlolVvqf2KxyesUdlSNl2JwRhKb62EtiewpPgFLLg2ZIEQmNluhDaZfDQodSE7nIjJAarP2i_eUiWhcMhUXnh7IE1OTeK60eZGQj_HO944rczs5xhi91m/s320/05.jpg" style border="0" width="320" height="200">
   
   
5. Copy coding alamat hambar tersebut kesini:
   
   <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/AVvXsEhMZNAlQZ6RQCVJ63fnNCwIFX-uRrOWitp6goPkOoeXD1rPrWBW7ZLhKrB9iwDrLSoFuXxpwssvF_dGL_d9nNhb4mjK05zD6O2MaiHIdU4l113pYQmjFDLV4AJ9wtm2qdalTv43pMK9XRKb/s320/cver.jpg" style border="0" width="320" height="200" />
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA0JzNkRQ2tWqL1jeMSWUlw5KIlT3K5eK20f_u8XiJLjgBouUo77JId6qZ6mpJZAw0kmniv0lX1BJZO01_q7ERzFJycEnojGp6V4jvbtHgRvz8TV88UJL8BtR-kxH84FVLTRlANJvDVBFx/s320/03.jpg" style border="0" width="320" height="200" />
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu3CzeKTMiRJlfpQN54Lp7_0Fa5j5I1u3BKm6L1R8RUeu8YmSUp1DyAUAIsG4wJOPW2OPVGglDvRdGgDXk3OTP8BjgXcKXtgw9p85g5IPYQz4UkF8WoSYVwYQkjZ2cpmjI6oBHO9IB7qme/s320/09.jpg" style border="0" width="320" height="200" />
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjCe14zgChKK-M1AI7UCNwzv0DQxs9u4PyPfo-CvGB7B5px1-v6lvaYNuCNNuf6S1qFi0atmBc-EHOxJ6vv7FZUc-Ps5eB6D99AeEN20hJzCKLLS-_v5HLhPJKcrd4Itn6yHb7qKfdu9eD/s320/08.jpg" style border="0" width="320" height="200" />
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibgpZUIGU_X_F7j1WlGUWn4LgNlolVvqf2KxyesUdlSNl2JwRhKb62EtiewpPgFLLg2ZIEQmNluhDaZfDQodSE7nIjJAarP2i_eUiWhcMhUXnh7IE1OTeK60eZGQj_HO944rczs5xhi91m/s320/05.jpg" style border="0" width="320" height="200" />
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJot1vDQvCObHMUnXYu2OBliO7Yo3gt2-PcGuq9jW7d0JeCEniyAChdrNClnkMYRXYIamNFR_rIAHm0tkruEzuXS-NdHoNSLBW2jGn2gdocLX2LG7uY9EDcKl06XB31aez78Q1Cytodpp/s320/02.jpg" style border="0" width="320" height="200" />&nbsp;&nbsp;&nbsp;&nbsp;
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5rxtnDkYronn1Cptj5cKPzkeyLOtObkTYJ6VPYlfcUC3a4fXYqRyF2DH9ovNaIzY52yBj9B6ltQIk0aCwyV0V50jD2gdl7LC0JLJbmDFPGDNjkfMW1hCJkUmG30ysorcrKCQS_a6ubW1q/s1600/04.jpg" style border="0" height="200" width="320" />
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ0jdcu4J8Z6rY2Rgl4q5NWmDLLTpwYPcl0OAUmrdQabYXUjoMJWYHfXP0OnNg7XCMzGx4p20e1bZNUl86Xdxcbcn_kfvJLv9mUd0PY5fqDfQjluibAfKlO6uYMm7jr4RdaAkQuW0K_UZW/s320/07.jpg" style border="0" width="320" height="200" />
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxtX9IAO-oKlt1lfxkTFjPFvy88trLTDJGI0ftqkWktQHcG7qwIzHkGbOGbWi00DeDR4KX7IhMVf0owLzhDsQdswzbC0n1GynKl77Ed44_awipTs8c6Pj8IZGPPKhpb4XKuhJASJW5TAgC/s320/10.jpg" style border="0" width="320" height="200" />
   
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq4kPLeV9v-ME0R1-wMDm9OUJoM08xrZpoB4P0EclCevzLakuJ6Hkyehp0uD9HSWD59ivCFahE126tI_i-cIUerUiVdvtn6MDIewGN4oA4Tvvpp8DNBvx9wfHRCmQRHzze_Ppi1YkZlh4q/s320/01.jpg" style border="0" width="320" height="200" /></div>
6. Ganti tulisan yang berwarna merah jambu dengan address gambar yang kamu punya
   Text berwarna merah jambu adalah coding gambar yang saya upload
7. Buka dashboard --->>> Tata Letak ---->>> Tambahkan Gadget ---->>>> Pilih widget HTML/JavaScript -----> Pastekan coding tersebut disini ---->>> simpan
8. Drug widget HTML/JavaScript ini keatas kotak Blog Posts
   
   
   
9. Simpan setelan
   
10. Hasilnya tampilan blog akan ada slide gambar yang bergantian secara otomatis
    
    
    
    
    
    
    
11. Selesai !
    
    

Sumber Coding Slide Show tersebut:
http://trick-tips-blogger.blogspot.com/