Cara Membuat Image Slider dengan Efek Quake diBlog

Slider dengan Efek Quake. Ok sobat anisuka.com saat ini akan membagikan lagi tutorial blog seputar “slider” yaitu cara membuat slider dengan efek quake di Blog. Untuk mempercantik blog sobat dapat menghiasinya dengan slider-slider, sebenarnya juga bukan hanya untuk mempercantik tampilan tapi juga untuk memberitahukan pengunjung mengenai artikel lainnya yang ada di blog sobat dengan cara yang wow.

Jika sobat tertarik mengenai slider sobat dapat melihat beberapa artikel sebelumnya dimana telah dibagikan jenis-jenis slider yang berbeda yang dapat digunakan di template blog sobat. Sebelumnya juga sudah pernah dibahas:

• Image Slider V6
• Cara membuat chop slider 3D
• Cara membuat Slider artikel terbaru
• Memasang slider di Sidebar Blog

Memasang slider dengan efek Quake

Letakan kode css berikut ini kedalam template blog. biasanya diatas kode  ]]></b:skin> atau </style>

.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://3.bp.blogspot.com/-7HJUuKIpfLo/U4VbxwRmI_I/AAAAAAAABqU/0FomQ3YEzq4/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://4.bp.blogspot.com/-nlMQszxtWzU/T-ejARVJdrI/AAAAAAAACh4/wHI03WiBjus/s1600/nav.png); }
.quake-next { right:0; margin-right:2px; background:url(https://4.bp.blogspot.com/-nlMQszxtWzU/T-ejARVJdrI/AAAAAAAACh4/wHI03WiBjus/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://4.bp.blogspot.com/-VQyO8ZzV-_E/T-ei73kIM3I/AAAAAAAACho/0nLuvOPjGWg/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://4.bp.blogspot.com/-dCs4giZ13Pk/T-ei5ir1CyI/AAAAAAAAChg/LgDEJLiXwwc/s1600/circle-active.png)}
.quake-slider-caption a { color:Yellow; }
.quake-link { position:absolute; z-index:101; }

Keterangan : kode css berwarna merah diatas silahkan diganti sesuai dengan lebar template blog dan tinggi slider yang sobat inginkan. Langkah selanjutnya letakan script dibawah ini diatas kode </head> 

<script src=’https://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>

Kode berwarnah biru hapus saja jika ditemplate sobat sudah ada kode yang mirip seperti itu, tapi jika dihapus terus slidernya gak work tambahkan saja kodenya lagi, dan kode berwarnah merah sesuaikan dengan lebar template dan tinggi yang sobat inginkan.

Berikut adalah langkah terakhir, letakan kode berikut ini di tempat yang sobat inginkan, misalnya didalam postingan. Jika sobat ingin meletakannya misalnya di template blog di Homepage silahkan cari kode <div class=’main-wrapper’> dan letakan dibawahnya.

<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<div class=”quake-slider”>
<div class=”quake-slider-images”>
<a href=”https://www.anisuka.com/2022/04/cara-membuat-chop-slider-otomatis-di.html” target=”_blank”><img alt=”Cara Membuat Chop Slider Otomatis di Blog” src=”https://4.bp.blogspot.com/-YYB8YALZygU/U8ANSWN4JJI/AAAAAAAAAX8/asFhRddLSZo/s1600/1.jpg” /></a>
<a href=”https://www.anisuka.com/2022/04/slider-dengan-efek-quake-di-template.html” target=”_blank”><img alt=”Memasang slider dengan efek Quake” src=”https://2.bp.blogspot.com/-5uhYw5YbVYc/U8ANScEqM9I/AAAAAAAAAYA/VwC3e9r_FYk/s1600/2.jpg” /></a>
<a href=”https://www.anisuka.com/2022/04/jquery-image-crousel-slider-for-blogger.html” target=”_blank”><img alt=”Jquery Image Crousel Slider” src=”https://2.bp.blogspot.com/-eEuiThVpm5s/U8ANSR3vVKI/AAAAAAAAAYE/fDV6RbwHI_Q/s1600/3.jpg” /></a>
<a href=”https://www.anisuka.com/2022/04/cara-membuat-slide-rekomendasi-artikel.html” target=”_blank”><img alt=”Jquery Image Crousel Slider” src=”https://1.bp.blogspot.com/-pfvKL2lz_NY/U8ANTx2vxOI/AAAAAAAAAYU/52tlGLKimDY/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>

Keterangan : kode berwarna merah adalah untuk menampilkan slider hanya di homepage blog, jika sobat ingin menampilkan slider disemua halaman hapus saja kode berwarna merah tersebut, warna biru adalah alamat gambar, misalnya sobat upload gambarnya di blog kemudian copy Url yang terlihat dan pastekan ke quake slider ( kode warna biru ) di atas. kod pagar ( # ) berwarna hijau silahkan ganti dengan url tujuan gambar sobat. Tulisan deskripsi gambar silahkan ganti dengan deskripsi gambar sobat. Simpan template dan lihat hasilnya.

Sekian tutorial blog anisuka saat ini, jangan lupa selalu cek artikel terbaru anisuka dan semoga tutorial blog tentang cara membuat slider dengan efek quake di Blog ini bermanfaat.

Diposkan oleh

Brando Mewo

You Might Also Like: