Advertisement

Wednesday, May 28, 2014

Membuat efek quake slider pada gambar

ads

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 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/AVvXsEg013QuRxwKS8r5yXWPbOwOQIlTWiBfJ4n0NMyDyjZSyy2FJ5b_djkhBgaUmZr4dmADa_SkliRf888cAcpyVr9cFCMim3yTBktXsWtlyHWKgez6YYhX4nACRquncyihtnZdU8R5hm_4P1Ch/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/AVvXsEgDOMEp4x0G2Q6mBTq-uTnJabIWkj2DzoSHPwNEGkm2gzyZkNm20_gMTGK2nKzsiQS0-tq6xrLT9jZ_R0O-VIq8I5KZ3xy5nU09LMkcyo6orm-77sWyohcfDjY9HepScrS1-QKl5CnTTnE/s1600/nav.png)
}

.quake-next {
right: 0;
margin-right: 2px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDOMEp4x0G2Q6mBTq-uTnJabIWkj2DzoSHPwNEGkm2gzyZkNm20_gMTGK2nKzsiQS0-tq6xrLT9jZ_R0O-VIq8I5KZ3xy5nU09LMkcyo6orm-77sWyohcfDjY9HepScrS1-QKl5CnTTnE/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/AVvXsEg-BSo7yd7kIk-_weyfHkVr_lp82ZaaB6yMh5D7HWQhoS7PUZKLWpft1MHRaDzj_0HHsheTZyRaMQoQH316Ej5JYZKXUup8kL30sOY94jdgJIiKDKTKdGkdSXpw6XigS2wxtj7753wT-Zc/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/AVvXsEh1mMCra9QUmFZ1MCqXxucV_WnJmGyCRjOpdrV_IHXsqBGER-BCHOJJcr8mKBgZfOKJaPoeVwF4EOUDFqddIi6kKdTHKjDHGBXCtG34RHT_A8D8_AH-xa9e3BG0bSMwNqZvayeoELQIl-U/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 agan2.

Membuat efek quake slider pada gambar Rating: 4.5 Diposkan Oleh: Unknown

Advertisement

 

Top