Membuat Efek Quake Slider Pada Gambar

Malam-malam gini enak-nya ngapain,..??? setelah saya berpikir sejenak tiba-tiba muncul lah ide untuk ngeshare trick keren mengenai efek gambar yang saya dapat dari trick blogging Blog Irvan Efendy. Bagaimana keren kan? DEMO-nya bisa Anda lihat seperti di bawah ini :

Indah nya Desa ku :)

Deskripsi gambar 2 dengan Link

Deskripsi gambar 3

Deskripsi gambar 4

Efek Quake Slider adalah ini hampir dengan Efek Nivo yang kemarin saya share itu lho,.. tau gak efek nivo itu kayak apa? kalau gak tau ya silahkan Anda klik DISINI !!!.

Membuat Efek Quake Slider Pada Gambar sangat sederhana sekali, jika Anda mau memasangnya di blog silahkan Anda ikuti tutorial selanjutnya.

Simak Langkah-Langkah di Bawah Ini:

1. Login ke akun blogger Anda
2. Klik Template  Edit HTML
3. Kemudian tekan CTRL+F cari kode ]]></b:skin atau </style>
4. Lalu tambahkan script CSS berikut ini tepat di atas 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/AVvXsEhnYg5utyhZVI9HfbOCIe3_CNgDuCCSRHzXgrDPL-9HMYGjWOh5vsm__d_2fsHNaW2ZgQWUm_uMCefN_HfqKAA5NMOK2TmSzS-Nlpn6xM_drObr-re8xUOfZvIz9aMbrFSTo8xxQfl-rRA7/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/AVvXsEgiCwG-UXfpGn7MJDEL1-MNQ46hD-GUoh2g7TVCYRIKBjjPMWsbeReXIpJjSgfKh_WRxD2eQNVpZ3qCXrfbeSpCx5-lej5AOKD57wDgYRiUhUl7TXnzPR4KRmtAqvSMElIRO20WWtL-xo8/s1600/nav.png) 
} 
.quake-next { 
right: 0; 
margin-right: 2px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiCwG-UXfpGn7MJDEL1-MNQ46hD-GUoh2g7TVCYRIKBjjPMWsbeReXIpJjSgfKh_WRxD2eQNVpZ3qCXrfbeSpCx5-lej5AOKD57wDgYRiUhUl7TXnzPR4KRmtAqvSMElIRO20WWtL-xo8/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/AVvXsEjtLpUiL1EICKXgx_s1XdylfN6dVExiC76XVe3WInAfv3ZsuaXfH_XpT85_tyEv3xgYbdnTnw8Pp13OkR0Y8vZwTxZhaXAZhCJFLIFEl7qkkGFjJNFOvDrtRPJuEGcLhMSce0dTJPA2hg0/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/AVvXsEh_3xmDtesoYceQgrFccwcTtaVI1NXB9EQ3iUwPPCP69MxihSSSB6L_2dN2Qme4gXLGUrPwk16QgY6trLXEqjJJTm6r6Iff8OLC6lkN7hWTxrLDZY-24I1DKfEX0abW1h_FobjNo_qC9nU/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 masukkan 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 Anda.

Penerapannya :

Masukkan kode HTML di bawah ini kedalam postingan blog Anda 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 :)

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250