Skip to main content

Membuat Image Slider di Blogger Versi 6

Berikut ini anisuka kembali akan membagikan tentang cara Membuat Image Slider di Blogger, karena saya sudah lupa ini slider yang keberapa yang saya bagikan maka saya tambahkan saja versi ke 6 di judulnya.

Slider gambar berikut ini memiliki tampilan yang keren menurut saya, kamu bisa menampilkan gambar-gambar yang kamu inginkan di slider ini, kamu bisa mengambil gambar dari postingan atau mencarinya diluar sana. Kamu bisa menggunakannya untuk menampilkan postingan yang menarik di blog kamu yang kamu pilih sendiri, atau menghemat ruang untuk menampilkan gambar di postingan yang mempunyai gambar yang banyak menggunakan slider ini.

Sebelumnya juga saya sudah pernah membagikan image slider, seperti slider dengan efek quake, slider otomatis artikel terbaru dan Chop slider otomatis di blog. Ok sobat berikut ini adalah…


DEMONYA BRO

Cara Membuat Slider Gambar di Blogspot

Berikut ini adalah Kodenya :

<style type=”text/css”>
/* https://www.anisuka.com */
#sliderFrame { position:relative; width:100%; margin:0 auto 10px; }
#slider { width:100%; height:306px; background:#fff url(https://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%; position:relative; margin:0 auto; box-shadow:0 1px 5px #999999; }
#slider img { position:absolute; border:none; display:none; }
#slider a.imgLink { z-index:2; display:none; position:absolute; top:0; left:0; border:0; padding:0; margin:0; width:100%; height:100%; }
div.mc-caption-bg,div.mc-caption-bg2 { position:absolute; width:100%; height:auto; padding:0; left:0; bottom:15px; z-index:3; overflow:hidden; font-size:0; }
div.mc-caption-bg { background-color:black; }
div.mc-caption { font:bold 14px/20px Arial; color:#EEE; z-index:4; padding:10px 0; text-align:center; }
div.mc-caption a { color:#FB0; }
div.mc-caption a:hover { color:#DA0; }
div.navBulletsWrapper { background:none; padding-left:20px; position:relative; z-index:5; cursor:pointer; }
div.navBulletsWrapper div { width:11px; height:11px; background:transparent url(https://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0; float:left; overflow:hidden; vertical-align:middle; cursor:pointer; margin-right:11px; position:relative; }
div.navBulletsWrapper div.active { background-position:0 -11px; }
.intro { bottom:0; color:rgba(0,0,0,0.2); font-size:16px; position:absolute; right:0; text-decoration:none; z-index:99999; }
#slider { transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); }
</style>
<script src=”https://project.dimpost.com/image-slider/js-image-slider-2.js” type=”text/javascript”></script><div id=”sliderFrame”>
<div id=”slider”>
<a href=”#“><img src=”https://3.bp.blogspot.com/-1LayoXAEu_Y/UR-VGlIl8eI/AAAAAAAABnI/yI0SkxYfRsc/s1600/image-slider-1.jpg” alt=”#htmlcaption1″ /></a>
<a href=”#“><img src=”https://3.bp.blogspot.com/-eOR0aaChxAw/UR-VGiVnp1I/AAAAAAAABnM/_bIC8_EisxQ/s1600/image-slider-2.jpg” alt=”Go UP!” /></a>
<a href=”#“><img src=”https://4.bp.blogspot.com/-5NisCPe6tEc/UR-VGfF8_8I/AAAAAAAABnE/kUtLaL3SzWE/s1600/image-slider-3.jpg” alt=”Pure Javascript. No jQuery. No flash.” /></a>
<a href=”#“><img src=”https://2.bp.blogspot.com/-gl-HJvghglA/UR-VK7FgIBI/AAAAAAAABnc/EfjVW6e1nz4/s1600/image-slider-4.jpg” alt=”#htmlcaption2″ /></a>
<a href=”#“><img src=”https://1.bp.blogspot.com/-qkKwbfW234Y/UR-VLZRV6hI/AAAAAAAABnk/pO5-b99UmGo/s1600/image-slider-5.jpg” alt=”Stay Connected“/></a>
</div>
<div id=”htmlcaption1″ style=”display: none;”>
Image Slider by <a href=”https://www.anisuka.com/” target=”_blank”>anisuka</a>
</div>
<div id=”htmlcaption2″ style=”display: none;”>
<a href=”https://www.anisuka.com” target=”_blank”>CSS</a> <a href=”https://www.anisuka.com” target=”_blank”>JavaScript</a> Rocks.
</div>
</div>

Silahkan sobat ganti semua kode berwarna biru diatas dengan link tujuan gambar, kode warna hijau adalah link gambar, dan kode/tulisan warna merah adalah keterangan gambar.

Sekian, semoga cara membuat Slider gambar di Blogger ini bermanfaat dan jangan lupa lihat artikel terbaru anisuka yang lainnya.

Buka Komentar
Tutup Komentar