Loading
  • Home
  • Link
  • Welcome
  • Tutorial
  • Tips
  • Jamu Gendong
Related Posts Plugin for WordPress, Blogger...
Share

Wednesday, July 3, 2013

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/

4 comments: