Tutorial More on this category »
MS. Office More on this category »
Tokoh dan Penemu More on this category »

Membuat Slideshow dengan S3 Slider

Slideshow 

S3 Slider adalah slide show sederhana namun menarik, tapi sebelum anda mencoba di blog harap backup template terlebih dahulu !
  • pertama anda login di blog masing-masing atau klik disini
  • klik template... edit html...
  • cari kode ]]></b:skin> atau </style> gunakan ctrl+ F untuk mempermudah pencarian
  • salin kode dibawah ini dan letakkan tepat diatasnya ]]></b:skin>  atau </style>

    /*! s3Slider for Blogger*/
    
    .s3slider {
      margin:0 auto 10px;
      border:2px solid white;
      background:white none no-repeat 50% 50%;
      -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
      -moz-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
      box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
      position:relative;
      overflow:hidden;
    }
    .s3slider.loading {
      background-image:url('data:image/gif;base64,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');
      text-indent:-9999px;
    }
    .s3slider-content,
    .s3slider-content li {
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      margin:0;
      padding:0;
      list-style:none;
      overflow:hidden;
    }
    .s3slider-content li {
      position:static;
      display:none;
    }
    .s3slider-content img {
      display:block;
      width:100%;
      height:100%;
      max-width:none;
      max-height:none;
      border:none;
      outline:none;
      padding:0;
      margin:0;
    }
    .s3slider-caption {
      position:absolute;
      right:0;
      bottom:0;
      left:0;
      height:auto;
      font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;
      color:white;
      background-color:black;
      opacity:.8;
      filter:alpha(opacity=80);
      padding:7px 10px 10px;
      display:none;
    }
    .s3slider-title,
    .s3slider-meta {display:block}
    .s3slider-title a {
      font-size:110%;
      font-weight:bold;
      color:white;
      text-decoration:none;
    }
    .s3slider-title a:focus,
    .s3slider-title a:hover {text-decoration:underline}
    .s3slider-meta-comment:before {content:" - "}

    • klik simpan template
    • setelah template tersimpan klik tata letak/ layout
    • klik tambah gadget
    • cari dan klik HTML/JavaScript
    • salin kode dibawah ini kemudian paste pada box HTML/JavaScript tersebut
    <div id="s3slider-container">
      <div class="s3slider loading" style="width:420px;height:270px;">
        Memuat...
      </div>
    </div>
    <script src="https://2c91da3b0842b7a20dc98f7de7a7f40cf3bfcfc5.googledrive.com/host/0B2EhGFVaqn6zbXRjbkJlZEJaX0U/jquery1.3.2jquery.min.js"></script>
    <script>
    var s3slider_config = {
        url: 'http://nama_blog.blogspot.com',
        numPost: 7,
        labelName: null,
        monthArray: [
            "Januari",
            "Februari",
            "Maret",
            "April",
            "Mei",
            "Juni",
            "Juli",
            "Agustus",
            "September",
            "Oktober",
            "November",
            "Desember"
        ],
        noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',
        newTabLink: false,
        containerId: 's3slider-container',
        slider: {
            width: 420,
            height: 270,
            timeOut: 4000
        }
    };
    </script>
    <script src="https://cdn.rawgit.com/samhidayat/javas/master/s3slider.js"></script>

    • text http://nama_blog.blogspot.com silahkan anda ganti dengan link website/ blog anda
    • klik simpan jika selesai.
    Source Code : http://www.dte.web.id/2012/02/slideshow-otomatis-blogger-dengan.html
    Blogger
    Disqus

    Tidak ada komentar

    [+] Silahkan tinggalkan komentar
    [+] Berkomertarlah dengan santun
    [+] Mohon tidak meninggalkan live link
    [+] Terima kasih untuk komentar anda

    Copyright © 2013. INFOALYA.COM - All Rights Reserved | Template Created by Kompi Ajaib Proudly powered by Blogger