Automatic Slideshow for Blogger with 3D Gallery

A letter from Arhan Tubar:

Hello I like very much the automatic slideshow tutorial and I was wondering if you can help me with something.

I would like to make the slideshow from this link:

http://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/

...to be automatic like in your tutorials.

Can you help me with this request?

Thank you in advance.

My answer is, “Yes, why not. This is just about inserting images into 3D Gallery markup. A special post for you. Sorry about my bad English” :p

View Demo

Step 1: Edit Your Tema 

First go to the Tema menu and then click Edit HTML and click Continue/Proceed:

Find this code:

]]></b:skin>

Copy the code below and paste it above ]]></b:skin>:

/*!
 * 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('http://lh5.googleusercontent.com/-4pQoBU5e0lg/UqUzJIM7jMI/AAAAAAAAIak/NkYdYXHow-M/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('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}

Save your tema.

Step 2: Puting the Slideshow 

Go to the Layout menu, then add a new HTML/JavaScript page element that placed above the posts:

Copy the code below and paste it on the form:

<section id="dg-container" class="dg-container"></div><script src="//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="//dte-project.googlecode.com/svn/trunk/blogger-3d-gallery.js"></script>

Slideshow Configuration