Widget Slideshow Efek 3D Gallery - Hallo sahabat Alice Blogger, Pada Artikel yang anda baca kali ini dengan judul Widget Slideshow Efek 3D Gallery , kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel BLOGER, Artikel WIDGET, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Widget Slideshow Efek 3D Gallery
link : Widget Slideshow Efek 3D Gallery

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/AVvXsEjM6rvenWAVNiOoAj64-cBxqTKJsOfpdX-SvvhtFdgkUo5S2IhONcHr6E-FN78ZyKzJGwDcz4vmAEwCzX1Z1VdJwBcUAqAykbI3y2HWkr09EhAc2aG3wasIdZc2Q-fHW2jLqWNe0fZnIQk/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/AVvXsEi-u6kahH5qx8d_BHtsBp1wlQx3G_nLZ7f6lTfP7PoBGqEY2CriiLy706_2dw-4hJkye1xyD34GLSjpYVPfFWaPXElz0pgZNccLbmSnzORLCWqWcRP5nQVRUOzRVkZXWuo1NfYRfnxFhTg/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

Demikianlah Artikel Widget Slideshow Efek 3D Gallery

Sekianlah artikel Widget Slideshow Efek 3D Gallery kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Widget Slideshow Efek 3D Gallery dengan alamat link https://www.alicewinklers-blogku.eu.org/2015/09/widget-slideshow-efek-3d-gallery.html