Widget Slideshow Efek 3D Gallery

Mempercantk Blog dengan Membuat Widget Slideshow Efek 3D Gallery

Membuat Widget Slideshow Efek 3D Gallery

Mempercantik Blog dengan 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/AVvXsEgjwBAVA6GsMXLW16EzA0hI398v0N4ZXWkBbG8lbokjrYDyYbTY0tT9jbXo3-qRwN6U0hC7wt2MBkWw2XJ6i4KQcFS3uTNnpkGCLntEV9B5ZvhRj2fu_oSB4CUxxnI4DScMg5rg8V1kgtY/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI07vrXoA_rK9ZqGuGgALucNay_pwtX3CnVvIHGBgfkrfyiEwcM-hjx4o266BpAr1Ril8iKWYsvwcGyt0NyHlugnA8-GGBZ-lwlf3zOSEMzJlt8vyq6fbfWWsjC_UCjmC8kYsQd0A-00k/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

Referensi 1 2