Membuat efek quake slider pada gambar

Malem2 gini enak nya ngapain ya,..??? setelah saya berfikir sejenak  tiba" muncul lah ide untuk ngeshare trick keren mengenenai efek gambar ,.. wkwwkwkk  

Lagi² ngeshare efek gambar gak bosen apa,?? hehehee

kalo aku sih gak ada bosen nya sob abis belum nemu trik baru sih jadi ya tentang efek lagi aku bahas,

DEMO Klik disini!!!

Efek quake slider ini hampir mirip dengan efek nivo yang kemarin saya share itu loh,.. tau gak efek nivo itu kayak apa?? kalau gak tau ya silahkan sobat klik DISINI !!!
Ya udah cukup sekian dulu ceramah nya sob di lanjut besok ajah soalnya mata tinggal 5 watt ini udah ngantuk banget. hehehee Langsung saja sobat pergi ke TKP.

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.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/AVvXsEhqSp1SCs-1Kx-CzwdN39CJN9latxTs_hVKEbySyzPRrsw7i4uiEwjRq_QPh7JniUve3DslNyHHIUWmMud8liwKPfj7cPRseqxaNYfI7FyvGRqHmyos-1Se1KMaRfmrdMoxwnbHcaiXkBA0/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/AVvXsEi6T2iNRfjbukJ-DCqRQ0745Uszr9zIwvi5Wo6olb-FljYc6AvqihdCTk48enloKtBM7MT63PF8gUBc_mFqU6LO43yuZzZ1hDWHt-9rEfbz6o1u4m4NZYuXajzcadp1ZGtw3VxYGvgY1I4/s1600/nav.png)
    }

.quake-next {
    right: 0;
    margin-right: 2px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6T2iNRfjbukJ-DCqRQ0745Uszr9zIwvi5Wo6olb-FljYc6AvqihdCTk48enloKtBM7MT63PF8gUBc_mFqU6LO43yuZzZ1hDWHt-9rEfbz6o1u4m4NZYuXajzcadp1ZGtw3VxYGvgY1I4/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/AVvXsEhQ8obXO9djA9FI19TgJIc63-mkmPC5jyBJEy837sEbZd_mLEEImecG3CprYFOJsC_yxF_zSfeJJbDKGoV6KOFfomPhzl5ToKmQbdkTI9SVVAkIyjSzzVArXPbbtq-sQ2Wu64_ahTkxDdI/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/AVvXsEhxsC7vCU3dkYTjIa1YctRHb5_lEoWV_pHdnMCb-Ec5LZqTLODUjSwFF1CLmf2VAqswJ9_aQ2cP9yX9jBecnBffztZVN63azY_bEz3hxkQTz-Mh0wMVLsmWUdiR7_bX_iNjclQcEvQhPLo/s1600/circle-active.png)
    }

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

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

5. Tekan Ctrl+F cari kode </head> Lalu masukan script di bawah ini tepat di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/vanzdy/script/efek_quake-slider.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 sobat.

Penerapannya:

Masukan kode HTML di bawah ini ke dalam postingan blog sobat atau bisa juga di 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 -->

Semoga bermanfaat :)
jangan lupa corat coret di kolom komentar ya agan².