Malem2 gini enak nya ngapain ya,..??? setelah saya berfikir sejenak tiba" muncul lah ide untuk ngeshare trick keren mengenenai efek gambar ,.. wkwwkwkk
Lagi2 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, 
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 langkah2 dibawah ini:
1. Login ke akun blogger sobat2. 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/AVvXsEg40jm1iORyXxk-Sew_J0c11ji2oaX8UoiXH7qasPffrBzrrC7aYmXke6Y-gJ9WBvIuHFm2tXkMom6w8-1CDII4ZF1drMydr-WpnTeo7vCW-dnsx2nGayv6Xh7FfT6RuAVI06AR1cTKXnKV/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/AVvXsEiEqVwb1EgPS1KplcfYpK76Q7dkfuR8l89uMSuhjudC0-xVEAmC93hC1CLyxlzNSMkjVU7T4mXaGB2rDAI2vCe88gTHihCi0ezW8sUBW6K2QzpH0c6Fhb0FlQVQzrgyBOqviinIRE-NxV0/s1600/nav.png)
}
.quake-next {
right: 0;
margin-right: 2px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEqVwb1EgPS1KplcfYpK76Q7dkfuR8l89uMSuhjudC0-xVEAmC93hC1CLyxlzNSMkjVU7T4mXaGB2rDAI2vCe88gTHihCi0ezW8sUBW6K2QzpH0c6Fhb0FlQVQzrgyBOqviinIRE-NxV0/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/AVvXsEj7kPHl7-DJkSVrPeL5Xm2b324dyPsfgzIoVj1WUTqiavX3AQ2eVXh5rhH3BPNryQ091NtWVrotq-GAaB1v7wgSIcBuVW4O2vHLvlhrcf9F1v9qgZRzQ57J7kAWQSVRgTon2rr7z0aV2PU/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/AVvXsEg7zsvLW0aI8xGsNnMfCPgT9V_PRWsFXcaoxt1o17Yq5T4FodOs2jeXUyrst3p_6boyEPMZlMycXnZFLvVRkLw8jVwqg3QgvuoyEjERPWmUlu3_DxOO63EF56Hp8Ksk80MtytmvhFA_hXY/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 kodeHTML 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 agan2.
Terima kasih telah membaca artikel tentang Membuat efek quake slider pada gambar di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.
.jpg){kind=logo}
.PNG)
