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:

image gallery 3D


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('http://3.bp.blogspot.com/-E1kXB8wbDO4/U67ZNdCJWaI/AAAAAAAAAr8/Z9n1gtyV168/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('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}


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 Indriyani
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 >>
= TERIMA KASIH =

22 komentar

  1. waduch,,_
    sampai ga makan 2 hari, karena emang puasanya ya mbak (c) :d

    BalasHapus
  2. slide show memang keren apabila dipasang di blog, bisa memberikan daya tarik tersendiri bagi admin dan pengunjung blog, apalagi jika di kasih efek ataupun modfikasi, pasti lebih keren ya ;)

    BalasHapus
    Balasan
    1. setuju mbak, karena tampilan headline news bisa kita gantikan dengan slideshow seperti ini, sehingga saya membuat tampilan HOME dengan efek seperti ini untuk menampilkan halaman postingan

      Hapus
    2. betul mbak eka, gunakan slide show ala mbak devy yan gmenarik dan inspiratif

      Hapus
  3. lihat demonya, benar-benar manis banget tampilannya, jus alpokatnya jelas kalah, hehehe...

    BalasHapus
    Balasan
    1. hanya bisa disaksikan bos, kalau jus alpokat kan bisa dinikmati dan dirasakan tegukannya,
      hehe

      Hapus
  4. bagus juga kodenya ya cuma tiap posting bagusnya harus ada gambarnya juga ya biar slideshownya juga tampilannya bagus

    BalasHapus
    Balasan
    1. benar sekali mas, karena URL yang saya sisipkan pada atribut gambar, akan tetapi jika postingan tanpa gambar bisa kita manipulasi dengan menggunakan script seperti ini sebagai pengganti gambar
      [pre]noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',[/pre]

      lalu tempatkan diatas kode newTabLink: false,

      Hapus
  5. jadi loadingnya lebih cepet ya mba klo memakai Widget slideshow efek 3D gallery ... :) ntar kapan2 aku ikutan nyoba ah tips nya... makasih ya mba :)

    BalasHapus
    Balasan
    1. hehe..maksudnya bukan lebih cepat mas, biasanya jika kita menambahkan beberapa fitur widget pada blog, maka kecepatan muat halaman akan berkurang atau melambat, untuk menghindari hal itu, saya menggunakan script untuk menyimpan url postingan dari atribut gambar.
      [blockquote]Semoga tidak bingung dan membingungkan saya, hehe..!![/blockquote]

      Hapus
  6. Sangat menarik untuk mempercantik tampilan blog
    terima kasih sharnya mbak n mohon ijin untuk disimpan... :)

    BalasHapus
  7. wah ni slide show yang terbaru ya mbak, keren lho tampilannya, tapi maaf ni ya mbak, kok scroll arahnya hanya bisa sekali klik, apa ada yang salah pada kode di demo shownya mbak, maaf ya hanya sekedar memberi tahu :)

    BalasHapus
    Balasan
    1. saya sudah periksa kodenya,gak masalah kok mas, tombol next dan prev bekerja dengan baik, maksudnya scrol sekali klik gimana mas?

      Hapus
    2. ooo, ternyta dia tidak bekerja pada browser saya mbak, yaitu opera, setelah saya show menggunakan mozilla bar benar-benar bekerja. Maaf ya

      Hapus
    3. saya mengambil allternatif reguler, survey mereka lebih banyak menggunakan peramban mozilla dan chrome, jadi saya tidak begitu sadar kalu efeknya masih ada yang belum bekerja pada peramban lainnya, salah satu contohnya seperti yang mas bilang "Opera"

      Hapus
    4. iya mbak, memang opera jarang digunakan sebagai browser :D

      Hapus
  8. tapi bikin lemot gak ya??

    BalasHapus
    Balasan
    1. saat membuat tampilan awal, memang sangat terasa kalau loading blog melambat, sehingga saya mengganti script onclik dengan script penyimpan URL dari alt gambar, seperti yang saya jelaskan diatas,
      atau Anda bisa lihat tampilan pada DEMO SHOW berat apa gak?

      [blockquote]padahal sudah saya jelaskan dengan terperinci tentang speed load, tetapi kayaknya mas beranda kurang memahami,[/blockquote]

      Hapus
  9. bagus mbk membuat blog menjadi lebih menarik

    BalasHapus
  10. bagus banget tipsnya !
    kalo di tampilkannya hanya salah sadu label bisa ga ya??jadi bukan posting terbaru tetapi label yang di pilih?? mohon pencerahannya !

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK