Cara Membuat Slideshow 3D Otomatis

Tips And Trik Trik Blog

AkuDuluAnak.Tk - Selamat hari minggu kawan. Di pagi yang mendung ini saya mau share tentang cara membuat 3D Slideshow Otomatis ala DTE :]. ok langsung saja kita ke pokok pembahasan kita.

• Lihat Demo

Langkah Pertama: Menambahkan Kode CSS

1. Masuk blogger
2. Klik Template lalu Edit HTML
3. Cari kode ini

]]></b:skin>

4. Copy kode dibawah ini lalu paste di bawah kode tadi

/*!
 * Automatic 3D Gallery by Taufik Nurrohman
 * http://gplus.to/tovic
 */

.dg-container {
  width:100%;
  height:450px;
  position:relative;
}
.dg-wrapper {
  width:481px;
  height:316px;
  margin:0 auto;
  position:relative;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-perspective:1000px;
  -moz-perspective:1000px;
  -ms-perspective:1000px;
  -o-perspective:1000px;
  perspective:1000px;
}
.dg-wrapper a {
  display:block;
  position:absolute;
  left:0;
  top:0;
  background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5FgT1GA7PTkhmltJcr7ejttqMTApKD_oWZElm29x_UM_ZXUqRxFTL8w0P3kQYoGhG7r55wxBPGaEHvtVI2Li-X6DKMaab7-Xl8wc8-7EPGXlsH_HBtf5u5n1eNmfY73URYPrwS2ILwik/s1600/browser.png') no-repeat 0 0;
  -webkit-background-size:100% 100%;
  -moz-background-size:100% 100%;
  background-size:100% 100%;
  -webkit-box-shadow:0 10px 20px rgba(0,0,0,.3);
  -moz-box-shadow:0 10px 20px rgba(0,0,0,.3);
  box-shadow:0 10px 20px rgba(0,0,0,.3);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
.dg-wrapper a.dg-transition {
  -webkit-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  -ms-transition:all .5s ease-in-out;
  -o-transition:all .5s ease-in-out;
  transition:all .5s ease-in-out;
}
.dg-wrapper a img {
  display:block;
  margin:0;
  padding:41px 0 0 1px;
  border:none;
  outline:none;
}
.dg-wrapper a .dg-caption {
  font:italic normal 16px/50px Georgia,"URW Bookman L",Serif;
  text-align:center;
  width:100%;
  height:50px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:1px 1px 1px rgba(255,255,255,.5);
  color:#333;
  display:none;
  position:absolute;
  bottom:-55px;
}
.dg-wrapper a.dg-center .dg-caption {display:block}
.dg-container .dg-nav {
  width:58px;
  position:absolute;
  z-index:1000;
  bottom:40px;
  left:50%;
  margin-left:-29px;
}
.dg-container .dg-nav span {
  text-indent:-9000px;
  float:left;
  cursor:pointer;
  width:24px;
  height:25px;
  opacity:0.8;
  background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ECNr_GjUknxE58YIRRVglA7k_qAYtPf12IVfzLyi_HIdsjaXtGGUeB8HER9DJwEMo8W-yiH5t_OFFpbPoAdm1EeDDwTlTz9ePI00Hw5SF2MXNGHh_RVo7Icq1310p0m6TZbh3oid2c0/s1600/arrows.png') no-repeat 0 0;
}
.dg-container .dg-nav span:hover {opacity:1}
.dg-container .dg-nav span.dg-nav-next {
  background-position:100% 0;
  margin-left:10px;
}
.dg-caption-date:before,
.dg-caption-comment:before {content:" - "}
.dg-caption-comment {display:none}

5. Save template kamu

Langkah kedua: Menambahkan Gadget

1. Masuk ke Layout (Tata Letak)
2. Lalu klik tambah gadget (Lihat gambar)

3. Klik HTML/Javascript
4. Copy kode dibawah ini lalu pastekan di widget tadi

<section id="dg-container" class="dg-container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var gallery_config = {
    url: 'http://dte-feed.blogspot.com',
    numPost: 3,
    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: 'dg-container',
    slider: {
        itemWidth: 480,
        itemHeight: 260,
        prevText: '&lt;',
        nextText: '&gt;',
        current: 0,
        autoplay: false,
        interval: 2000
    }
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-3d-gallery.js"></script>

Penjelasan:

• url : ganti dengan alamat blog sobat
• noImage : ganti dengan url noImage sobat 

sekian dari saya jika ada yang ditanyakan silahkan tulis di kolom komentar.

Bagikan

Jangan lewatkan

Cara Membuat Slideshow 3D Otomatis

4/ 5

Oleh Rijal Imnida

Rijal Imnida 08:14 11 Komentar