membuat image slider dengang efek

Cara Membuat image slider dengang efek Quake

1. Letakkan diatas  ]]></b:skin> atau </style> 

kode di bawah ini

.quake-slider-wrapper { margin:0 auto; padding:5px; }
.quake-slider { width:560px; height:350px; margin:0; position:relative; overflow:hidden; border:1px solid #ddd; background:#EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAjn_zGgleG6AqKMa4Rzpg1sve-Wh9hglBXqQ1PooSX__v_1VRjIWVh7P-2y23Bo9xquvOOc1onGJI4zdhLB6h8Q4HQd7lu2jsYBiVAPu1XiLT19SmuvTitgS9wp-gevtCwnCP9HGnMN6c/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/AVvXsEiWwXa2jjw8hKgtGU98tpGNuTHWO1b1uOraHusp7yx6y9jeWnrWzlEML9L9s51A1ijvhqzMbTXzoFisWz4sSipyHlqCcccShypmF-v5YIPTkTGrlEOxq9nJATBQel076KiL7JKWh-6eKI4/s1600/nav.png); }
.quake-next { right:0; margin-right:2px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWwXa2jjw8hKgtGU98tpGNuTHWO1b1uOraHusp7yx6y9jeWnrWzlEML9L9s51A1ijvhqzMbTXzoFisWz4sSipyHlqCcccShypmF-v5YIPTkTGrlEOxq9nJATBQel076KiL7JKWh-6eKI4/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/AVvXsEg9N4Um8a5WmedgNb9e3USPEg3VpaanrGU6eZ74vjHLtACAfmegJqHzXsOZivKmZdmLngajMlh38VtHHpnhvU5HoNWrfC8KxYj0CH-mLOo6Jlus2inNEaCGDFfhdb1V7C-bNHAIfrRXfGo/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:0 -22px; */
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhPKUDW9GKNd7hKw6RZSq-grq0PZsfgJ3a8pn0Q6nMyI0YNoBIQ9Rzy59EbIEh0ej1QYX6V7fugc0wdkFn-aR-EVGjKwC28XyZMVduL19-gSwwIbvsu6QKEdgdJ9LBXYMkB3OX0R0uE8/s1600/circle-active.png)}
.quake-slider-caption a { color:Yellow; }
.quake-link { position:absolute; z-index:101; }

Kemudian letakkan kode ini ini diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/><script src='https://sites.google.com/site/vanzdy/script/efek_quake-slider.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function () {
 $(&#39;.quake-slider&#39;).quake({
 thumbnails     : false,
 captionOpacity : &#39;0.7&#39;,
 hasNextPrev    : true,
 frameWidth :560, frameHeight : 350, captionsSetup  : [{
 &quot;orientation&quot;  : &quot;bottom&quot;,
 &quot;slides&quot; : [0,3],
 &quot;callback&quot;: captionAnimateCallback
 }]
 });
 function captionAnimateCallback(captionWrapper, captionContainer, orientation) {
 captionWrapper.css({
 bottom: &#39;-990px&#39;
 }).stop(true, true).animate({
 bottom: 0
 }, 500);
 captionContainer.css({
 left: &#39;-990px&#39;
 }).stop(true, true).animate({
 left: 0
 }, 500);
 }
 });
</script>

Terakhir letakkan kode ini di bawah <div class='main-wrapper'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class="quake-slider">
<div class="quake-slider-images">
<a href="http://lhulunk.blogspot.co.id/2016/03/membuat-image-slider-dengang-efek.html" target="_blank"><img alt="Cara Membuat Chop Slider Otomatis di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXvxaqM5xRW3GiJe0aMUIgpAk1bQOiJQDj6Ww311Ttayku0gbipXsVcYLl-QBr_cvrkdB63n9xeC3haN53CHb0VFrE_Yf6Wok0D4G0y0fKc_aDY1_9BH1PzLMyUWmhvigz4230EXJGT1k/s1600/1.jpg" /></a>
<a href="http://www.seocips.com/2014/07/slider-dengan-efek-quake-di-template.html" target="_blank"><img alt="Memasang slider dengan efek Quake" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ys7lMJtq6y0z7FzILYYLbTRlCwmV5ZGDWAP0Zbq50rzKb0NLXBTYcHu5ADmXuD2qfiZwu4d1QSFBK-Zk1-6Ryb_yoeNLqt9tPtzAY74ekj1Rfuqla9BuveozOaMSlNz-S-AK3DhZHAk/s1600/2.jpg" /></a>
<a href="http://www.seocips.com/2014/08/jquery-image-crousel-slider-for-blogger.html" target="_blank"><img alt="Jquery Image Crousel Slider" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP20abXJtzXuBbR6Z3SzSgLiV-JStSLHKoCX8gcBDhvAy_bm9REljVbqbHmh_5lR37vbKwslYz4lmmWrY1CIzHzfJbC6XQj2oA_b455SpQAgVL_dyx31-bO5JzF8v8p1rpO_FMAhFUebs/s1600/3.jpg" /></a>
<a href="http://www.seocips.com/2014/06/cara-membuat-slide-rekomendasi-artikel.html" target="_blank"><img alt="Jquery Image Crousel Slider" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcW-BDIj2RmfVmjDkGgsllarI8bQm6mFJ-X5P-gA6pTUwXoiIZOCDQiTc5xfgduBr6CXuCsZD0iVE_0RU6ZdSfEzfQETv3-OVIAELFQyDjjuHehIurwhFDvT1biQ4_QRZCy0nRduMiCq8/s1600/4.jpg" /></a>
</div>
<div class="quake-slider-captions">
<div class="quake-slider-caption">
tentang Cara Membuat Chop Slider di Blog. Slider ini benar-benar plugin baru yang dikembangkan sepenuhnya dari awal berdasarkan pengalaman versi sebelumnya dan sesuai dengan tren teknologi modern....<a href='#'>Readmore</a></div>
<div class="quake-slider-caption">
Untuk mempercantik blog sobat dapat menghiasinya dengan slider-slider, sebenarnya juga bukan hanya untuk mempercantik tampilan tapi juga untuk memberitahukan...<a href='#'>Readmore</a></div>
<div class="quake-slider-caption">
Gambar dengan efek slider crousel di blog. Untuk sobat yang ingin mempercantik tampilan blog, atau membuat animasi slider di gambar-gambar...<a href='#'>Readmore</a></div>
<div class="quake-slider-caption">
Memasang slide artikel terkait ini cocok utuk blog dengan tema apa saja, intinya adalah untuk membuat pengunjung tertarik ingin membaca artikel terkait menarik lain yang ada di blog sobat, contohnya seperti ini...Readmore</div>
</div>
</div>
</b:if>

Kodewarna merah hanya untuk menampilkan di home page (hapus jika ingin menampilkan disemua halaman)

selamat mencoba