Cara Membuat Widget Slideshow Efek 3D Gallery

 

Anda bosan dengan tampilan blog yang begitu-begitu saja tapi bingung cara mengubahnya? ini dia salah satu cara caranya dengan Membuat Widget Slideshow Efek 3D Gallery


Edit Template, temukan kode ]]></b:skin>

Gambar 1-Membuat Widget Slideshow Efek 3D Gallery

Langkah Selanjutnya Copy CSS berikut, selanjutnya letakkan tepat di atas ]]></b:skin>

.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/AVvXsEjE_GP5aDEzVbSrU-9GVnXrIVh136ExjIN4adtdBOQmRGhLUEieWZTAMvOvjXbUoX6wH_199T-PGWLFrTRTgyhfh0qmKwlzgQTsDwgavsTSjVmpa5zQGEdM-g-Bd1h4Nns0DsqqWXe1xeU/s1600/01gambar.jpg') no-repeat 0 0;
  -webkit-background-size:100% 100%;
  -moz-background-size:100% 100%;
  background-size:100% 100%;
  -webkit-box-shadow:0 5px 10px rgba(225,225,225,.5);
  -moz-box-shadow:0 5px 10px rgba(225,225,225,.5);
  box-shadow:0 5px 10px rgba(225,225,225,.5);
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;}

.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/45px Helvetia;
  text-align:center;width:100%;
  height:45px;white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;display:none;
  position:absolute;bottom:-60px;
  background-color:#900;
  background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  box-shadow: inset 0 4px 0 0 rgba(225,225,225, 0.6);
  -webkit-border-radius:45px;
  -moz-border-radius:45px
  border-radius:45px;}

.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('http://lh5.googleusercontent.com/-g4AHuT29Ntw/UqUy2w8chxI/AAAAAAAAIaY/wPyJEQtryjo/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}print 'hello world!'

Selanjutnya Ke tata letak, pilih gadget diatas halaman Posting Blog/ Main, copy kode berikut, letakkan pada halaman.

Gambar 2 -Membuat Widget Slideshow Efek 3D Gallery

Perhatikan kode di bawah yang diberi warnah merah, jika pada template Anda sudah terdapat jQuery yang sama, abaikan kode tersebut atau hapus saja.

<section id="dg-container" class="dg-container">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var gallery_config = {
    url: 'http://URL-Anda.blogspot.com',
    numPost: 3,
    labelName: null,
    monthArray: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    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>

DEMO

(DTE/Crazzy-Art-01/Berbagai-Sumber-Lain/ABNS)