Cara Membuat Widget Slideshow Efek 3D Gallery

Cara Membuat Widget Slideshow Efek 3D Gallery - Membuat widget slideshow atau yang kita kenal dengan slider widget tidak begitu sulit jika kita mendesain sebuah tampilan gambar dengan efek slideshow, seperti cara membuat Efek Gambar 3D Dengan CSS Box Shadow pada artikel sebelumnya, saya menggunakan perintah onMouse hover untuk merotasi gambar slide, akan tetapi saat kita klik gambar tersebut, maka windows open akan mengakses URL gambar itu sendiri.

Bersumber dari sana, saya berpikir bagaimana jika saat gambar di KLIK yang terbuka adalah URL halaman posting, itu berarti Anda harus mengubah URL gambar dengan URL halaman posting, tetapi hal yang paling sulit adalah tentang bagaimana caranya menyisipkan URL posting ke dalam ImageFlow? (mohon bantuannya karena untuk membuat tutorial ini, saya 2 hari belum makan, hehe..!!).  Berpikir sejenak dengan setengguk jus alpokat kesukaan, saya terinspirasi pada tampilan widget headline news, yang menampilkan updatetan postingan secara berkala dengan efek MARQUEE, sehingga untuk Cara Membuat Widget Slideshow Efek 3D Gallery kali ini saya menggunakan perintah JQuery untuk menyimpan URL posting ke dalam atribut rel pada gambar, sehingga Saya bisa mengakses URL tersebut dan menyisipkannya ke dalam perintah window.open() seperti ini:

onClick = function() {
    window.open($(this).attr('rel'));
}

Dan berhasil, seperti:



DEMO SHOW


Beberapa kekecewaan saat berbicara tentang kecepatan muat halaman, butuh 10 detik untuk membuka 1 gambar, itu berarti kecepatan loading blog akan dipertaruhkan untuk membuat widget slideshow ini, terlebih efek yang saya gunakan dengan tampilan 3D desain gallery gambar, karena bagaimana jika kita menyisipkan sampai 100 posting, bisa dibayangkan Anda akan menunggu begitu lama. Memang, menggunakan JQuery pada ImageFlow merupakan sebuah pemborosan besar, terlebih jika kita berbicara tentang loading blog, jadi saya menyisipkan elemen <a> kedalam atribut alt gambar dengan mengganti jQuery diatas dengan perintah ini:

//mengambil elemen <a> yang diproduksi dari alt gambar
getElementId += '<img src="' + image + '" alt="&lt;a href=&#39;' + link + '&#39;&gt;' + title + '&lt;/a&gt;">';

Pada tombol DEMO SHOW diatas, saya menampilkan 30 URL posting sebagai contoh, dan saya sudah mencoba menampilkan 100 posting, dan kecepatan muat gambar tidak begitu berat (saatnya kita bilang "sempurna"). Beres sudah kekecewaan Anda tentang loading blog, kini saatnya menerapkan widget berikut pada blog Anda dengan tahapan sebagai berikut:

Baca juga - Widget Profil Penulis Dengan Background Blur Efek

TAHAP I

Edit Template, temukan kode ]]></b:skin>
Copy CSS berikut, selanjutnya letakkan di atasnya

.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/AVvXsEjcqmx3wETny7erSPCv5QOpK_c0QcbpdjcZjg1SyRQtDU9PbG73R8saJ9EvnzlpgaebsOE8sjVsqHlqa7vhTHZJOrjQVLc-YSdZ1uQ9fDkL3JmswurdukRaKIqmVF1NjvIc4MzTLw_pFBw/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/AVvXsEgruVKwqGjWmcr_uHsCfhKUEJjbB1ZeFXgXiJ55w_SoBLXL5_CJ52qeK8-1LNE93QJFnBwUoqeQ1FJfjx2tnhgkyoeYVaYowBapu-6OZCP0AkrbaTzWmD17QNT81TxJXqRLqw1B7FIFXrE/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}

TAHAP II

Perhatikan kode yang saya beri tanda, jika pada Template Anda sudah menggunakan perintah jQuery yang sama, abaikan kode tersebut atau hapus saja. Selanjutnya Ke tata letak, pilih gadget diatas halaman posting, copy kode berikut, letakkan pada halaman.

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

Kesuksesan itu bukan milik seseorang, orang yang diam dan kurang mengerti akan hal sekalipun akan dapat meraih kesuksesan jika mau berbagi dan belajar.
Semoga tutorial kali ini dapat memberikan manfaat buat sahabat semua, dan akhir kata saya ucapkan Terimakasih.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Membuat Widget Slideshow Efek 3D Gallery
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

http://sahabatblogger77.blogspot.com/2014/06/cara-membuat-widget-slideshow-efek-3d-gallery.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77