Home / Widget Blog / Automatic Slideshow for Blogger with 3D Gallery

Cara Download Automatic Slideshow for Blogger with 3D Gallery Update Terbaru

Sedikit Info Seputar Automatic Slideshow for Blogger with 3D Gallery Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Automatic Slideshow for Blogger with 3D Gallery, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel Widget Blog, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Automatic Slideshow for Blogger with 3D Gallery Terbaru
link: Automatic Slideshow for Blogger with 3D Gallery

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Automatic Slideshow for Blogger with 3D Gallery Terbaru dan Terlengkap 2017

Pembaharuan: 9 Desember 2013
3D Gallery for Blogger
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 Template

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



Edit HTML Blogger
Edit HTML

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 template.

Step 2: Puting the Slideshow

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



Menambahkan Widget
Adding widget

Copy the code below and paste it on the form:
<section id="dg-container" class="dg-container"></div>
<script src="http://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="http://dte-project.googlecode.com/svn/trunk/blogger-3d-gallery.js"></script>
The
underlinedcode is JQuery. If your template already have a JQuery, remove the underlined code! We just need one forever.

Slideshow Configuration

OptionDescription
urlChange with your blog homepage URL.
numPostUsed to set the number of slides.
labelNameUsed to determine the specific label name to sort the posts by a specific label.
monthArrayArray of month names.
noImageChange with your own “no image” URL.
newTabLinkIf true, every link will automatically open in new tab/new window.
containerIdID of the slideshow container.
slider => itemWidthImage width in pixels.
slider => itemHeightImage height in pixels.
slider => autoplayIf true, the slideshow will be played automatically.
slider => intervalSlideshow interval if autoplay set to true.
Few suggestions: This slideshow is only use CSS3 Transition and CSS3 Transformation for the animation machine. This fact will be very closely related to the browser support (although we have used the Modernizr script so we will get a very nice fallback slideshow for the browser that does not support it). If you are interested, I'll post back a better similar slideshow that support for all browsers. This is called ImageFlow 1.3.0.
Just wait :)
Edit: Here it is!

Itulah sedikit Artikel Automatic Slideshow for Blogger with 3D Gallery terbaru dari kami

Semoga artikel Automatic Slideshow for Blogger with 3D Gallery yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Automatic Slideshow for Blogger with 3D Gallery

Share this