Membuat Slide dengan Quake Slide

Membuat gambar Slide dengan Quake Slide :

1. Silahkan Login ke blogger
2. Klik Template
3. Klik Edit HTML
4. Masukan kode css di bawah ini di atas kode ]]></b:skin>
    (Carilah dengan menggunakan Ctrl+F)

.quake-slider-wrapper {
    margin: 0 auto;
    padding: 5px;
    }

.quake-slider {
    width: 800px;
    height: 350px;
    margin: 0;
    position: relative;
    overflow: hidden;
    -moz-box-shadow: 0 0 8px #90989e;
    -webkit-box-shadow: 0 0 8px #90989e;
    box-shadow: 0 0 8px #90989e;
    background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDPS9Jj3uGtav4qM7NKhSzkzPrNX2yyaHmYKVVuZdlazv_hNfBs67KQ7hjHlImTQo4qQsVEXwBBMBhszAI9aS6_0CcKiUBHM979ip1YwV7xf6FWeyJknViCbU2q-8_OgkSJ8BTkblAq3M/s1600/loading.gif) no-repeat center
    }

.quake-nav a {
    position: absolute;
    top: 45%;
    text-decoration: none;
    width: 37px;
    height: 38px;
    background-repeat: no-repeat;
    z-index: 10000;
    cursor: pointer;
    text-indent: -9999px;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -khtml-user-select: none
    }

.quake-prev {
    left: 0;
    margin-left: 2px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicj1TgHt5jgozex8fQ6Uvsn436Lezvi_ZgFrXpP9IyKA3nPGJJXWLRBpRhIFgre9uN_1NkSl1jsoJtLRg8DuCdax-GtX8NmAEyg8YCf3Ev46O8S2BIYeJqPnf5uSkJm14nYsvpJXM6kME/s1600/nav.png)
    }

.quake-next {
    right: 0;
    margin-right: 2px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicj1TgHt5jgozex8fQ6Uvsn436Lezvi_ZgFrXpP9IyKA3nPGJJXWLRBpRhIFgre9uN_1NkSl1jsoJtLRg8DuCdax-GtX8NmAEyg8YCf3Ev46O8S2BIYeJqPnf5uSkJm14nYsvpJXM6kME/s1600/nav.png) right
    }
.quake-slider-caption-container-right {
 background-color: #1889F1;
 position: absolute;
 z-index: 101;
 padding: 5px;
 width: 200px;
 right: 0;
 top: 0;
 bottom: 0;
}

.quake-slider-caption-right {
 color: white;
 font: bold 13px/20px Arial,sans-serif;
 width: 200px;
 position: absolute;
 z-index: 102;
 right: 0;
 top: 0;
 bottom: 0;
 padding: 5px;
 margin: 0;
}
.quake-slider-caption-container-bottom {
 background-color: black;
 position: absolute;
 z-index: 101;
 padding: 15px;
 bottom: 0;
 left: 0;
 right: 0;
}

.quake-slider-caption-bottom {
 color: white;
 font: bold 13px/20px Arial,sans-serif;
 position: absolute;
 z-index: 102;
 bottom: 5px;
 padding: 0 10px;
}
.quake-nav-wrapper {
    position: relative;
    z-index: 1000;
    }

.quake-nav-container {
    margin: 10px auto 0;
    }

.quake-nav-control {
    width: 22px;
    height: 22px;
    cursor: pointer;
    display: inline-block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpd4dGb4dVkaaDttrrDBUOI4fqqwfAbeoXE_Cmq1GQaLi2wx8qyoC4JpauQGiKW9anY-gJe50igMuW2lqvvjSeTOQbWr5R0Ts_g1S3FJy_QwTJBt4Y-0-tA2fa1h3s67kyTAgE_fCFV6A/s1600/circle.png) no-repeat;
    text-indent: -99999px;
    border: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -khtml-user-select: none;
    outline: none
    }

.quake-nav-control.active {
    /*background-position: 0px -22px;*/
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin0vXXr7wPtoE-uer3WCHnFyOJbIeuzCn4hRfn04vKogn4PSevbRZvveGoIhNZUIsw80RUFjCuv0o6BeB5KBDnKNgU7MfOeuSvIMmwRkwyJjV7Vorr05xcV9CBWZ4Wjldv7qmBsw0wV4U/s1600/circle-active.png)
    }

.quake-slider-caption a {
    color: Yellow
    }

.quake-link {
    position: absolute;
    z-index: 101
    }

5. Masukan script di bawah ini di atas kode </head>

    (Carilah dengan menggunakan Ctrl+F)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://system-svn.googlecode.com/svn/trunk/quake.slider-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
 $('.quake-slider').quake({
 thumbnails     : false,
 captionOpacity : '0.7',
 hasNextPrev    : true,
 frameWidth     : 800,
 frameHeight    : 350,
 captionsSetup  : [{
 "orientation"  : "bottom",
 "slides"       : [0,3],
 "callback": captionAnimateCallback
 }]
 });
 function captionAnimateCallback(captionWrapper, captionContainer, orientation) {
 captionWrapper.css({
 bottom: '-990px'
 }).stop(true, true).animate({
 bottom: 0
 }, 500);
 captionContainer.css({
 left: '-990px'
 }).stop(true, true).animate({
 left: 0
 }, 500);
 }
 });
</script>

6. Simpan Template
7. Masukan kode html di bawah ini dalam Gadget HTML/Javascript

<div class="quake-slider">
<div class="quake-slider-images">
<a target="_blank" href="#"><img src="url1.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="url2.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="url3.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="url4.jpg" alt="judul gambar" /></a>
</div><!-- Kode penutup quake-slider-images -->
<div class="quake-slider-captions">
<div class="quake-slider-caption">Deskripsi gambar 1</div>
<div class="quake-slider-caption">Deskripsi gambar 2 dengan <a href='#'>Link</a></div>
<div class="quake-slider-caption">Deskripsi gambar 3</div>
<div class="quake-slider-caption">Deskripsi gambar 4</div>
</div><!-- Kode penutup quake-slider-captions -->
</div><!-- Kode penutup quake-slider -->

1. Perhatikan kode width: 800px; Dan height: 350px; pada kode css jika kode tersebut anda ganti maka kode width: 800px; Dan height: 350px; pada kode js juga anda harus ganti jadi harus sesuai.

2. Perhatikan kode "slides" : [0,3], pada kode js, 0,3 artinya gambar nomor 1 dan nomor 4 caption nya atau deskripsi gambarnya akan berada di bawah sedangkan gambar nomor 2 dan 3 akan berada di kanan. gambar di hitung mulai dari 0 jadi gambar nomor 1 adalah 0 dan nomor 2 adalah 1 dan seterusnya, jadi jika anda ingin caption gambar nomor 1,2 dan 3 berada di bawah maka kodenya nya menjadi "slides" : [0,1,2], jadi gambar nomor 4 caption nya akan berada di kanan, bisa juga jika anda ingin acak misalnya slider gambar 1 captionnya di kanan terus gambar 2 captionnya di bawah bisa anda tinggal rubah nomornya saja pada pengaturan "slides".

3. Ukuran gambar, jika anda menggunakan slider ini ukuran gambar harus sama semua, saya ambil contoh dari blog demo, di blog demo tersebut ukuran gambar slidernya 800 x 350 dan semua ukuran gambarnya sama, dan kode width: 800px; Dan height: 350px; pada kode css juga harus sama seperti ukuran gambar pada kode js juga. kenapa seperti itu..? agar slider ini terlihat rapi dan juga keren tentunya, anda pasti gak mau donk kalau slidernya kelihatan berantakan