Membuat Slideshow dengan S3 Slider

Membuat Slideshow dengan S3 Slider

Membuat Slideshow dengan S3 Slider



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 1text https://nama_blog.blogspot.com silahkan anda ganti dengan link website/ blog anda
    klik sipx 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;text https://nama_blog.blogspot.com silahkan anda ganti dengan link website/ blog anda
    klik si
      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: 'https://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 https://nama_blog.blogspot.com silahkan anda ganti dengan link website/ blog anda
    klik simpan jika selesai.
    Source Code : _dte.web.id/2012/02/slideshow-otomatis-blogger-dengan.html_

    Share On:

    You Might Also Like:

    Disqus
    Blogger
    Pilih Sistem Komentar Yang Disukai

    0 Comment

    Add Comment

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

    https://infoalya.com

    Gunakan konversi tool jika ingin menyertakan kode atau gambar.


    image
    How to style text in Disqus comments Top Disqus Commentators
    • To write a bold letter please use <strong></strong> or <b></b>.
    • To write a italic letter please use <em></em> or <i></i>.
    • To write a underline letter please use <u></u>.
    • To write a strikethrought letter please use <strike></strike>.
    • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
      And use parse tool below to easy get the style.
    Show Parser Box

    How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

    strong em u strike
    pre code pre code spoiler
    embed

    Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

    This is how to whitelisting Info Alya in your ad blocker.

    Thank you!

    ×
    ×
    ×