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.



Step 1: 
Edit Your TemplateFirst go to the Template 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>:

/*
 * Auto Content 4 3D Gallery by Taufik Nurrohman
 * Visit: http://hompimpaalaihumgambreng.blogspot.com
*/

.dg-container {
  width:100%;
  height:450px;
  position:relative;
  margin:0px auto;
}

.dg-wrapper {
  width:370px;
  height:300px;
  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 {
  width:370px;
  height:auto;
  display:block;
  position:absolute;
  left:0;
  bottom:0;
  text-decoration:none;
  -webkit-box-shadow:0px 10px 20px rgba(0,0,0,0.3);
  -moz-box-shadow:0px 10px 20px rgba(0,0,0,0.3);
  box-shadow:0px 10px 20px rgba(0,0,0,0.3);
}

.dg-wrapper a.dg-transition {
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -ms-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
}

.dg-wrapper a img {
  width:100%;
  height:auto;
  border:none;
  outline:none;
  background-color:white;
  padding:0px 0px;
  margin:0px 0px; 
  display:block;
}

.dg-wrapper a div {
  font-style:italic;
  text-align:center;
  line-height:50px;
  text-shadow:1px 1px 1px rgba(255,255,255,0.5);
  color:#333;
  font-size:16px;
  width:100%;
  bottom:-55px;
  display:none;
  position:absolute;
}

.dg-wrapper a.dg-center div {
  display:block;
  font:normal 14px Times,Serif;
  font-style:italic;
}

.dg-wrapper div a {
  text-decoration:none;
}

.dg-container nav {
  width:58px;
  position:absolute;
  z-index:1000;
  bottom:40px;
  left:50%;
  margin-left:-43px;
  padding:10px 15px;
}

.dg-container nav span {
  text-indent:-9000px;
  float:left;
  cursor:pointer;
  width:24px;
  height:25px;
  opacity:0.8;
  background:transparent url('http://4.bp.blogspot.com/-qV9_Htfqexw/T02JMiWMUSI/AAAAAAAACQs/E5yAia_KzCo/s1600/arrows.png') no-repeat top left;
}

.dg-container nav span:hover {
  opacity:1;
}

.dg-container nav span.dg-next {
  background-position:top right;
  margin-left:10px;
}

/* End 3D Gallery */

Then find this code: </head>
Copy the code below and paste it above:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/modernizr.custom.53451.js'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/jquery.gallery.js'></script>
<script type='text/javascript'>
    $(window).bind("load", function() {
        $('#dg-container').gallery({autoplay:false});
    });
</script>

Save your template.
  
Step 2: 
Put the SlideshowGo 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:

<script type="text/javascript">
    showPostDate_g  = false;
    showComm_g      = false;
    slideOpenNewTab = true;
    idMode          = false;
    slidebyLabels   = false;
var slideLabelName  = "Your Specific Label",
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Comments",
    numposts_g      = 4,
    numchars_g      = 0,
    home_page       = "http://latitudu.blogspot.com/";
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/autoContent43DGallery.js"></script>

 Replace the URL http://latitudu.blogspot.com/ with your blog URL.