Berikut ini seocips 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...

Cara Membuat Image Slider di Blogger Versi 6


DEMONYA BRO

Cara Membuat Slider Gambar di Blogspot

Berikut ini adalah Kodenya :
<style type="text/css">
/* http://www.seocips.com */
#sliderFrame { position:relative; width:100%; margin:0 auto 10px; }
#slider { width:100%; height:306px; background:#fff url(http://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(http://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="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script><div id="sliderFrame">
<div id="slider">
<a href="#"><img src="http://3.bp.blogspot.com/-1LayoXAEu_Y/UR-VGlIl8eI/AAAAAAAABnI/yI0SkxYfRsc/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="http://3.bp.blogspot.com/-eOR0aaChxAw/UR-VGiVnp1I/AAAAAAAABnM/_bIC8_EisxQ/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
<a href="#"><img src="http://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="http://2.bp.blogspot.com/-gl-HJvghglA/UR-VK7FgIBI/AAAAAAAABnc/EfjVW6e1nz4/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="http://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="http://www.seocips.com/" target="_blank">seocips</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.seocips.com" target="_blank">CSS</a> <a href="http://www.seocips.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 seocips yang lainnya.
13 Komentar untuk "Membuat Image Slider di Blogger Versi 6"

maaf saya mau tanya, admin brando mewo menggunakan block quote untuk membagikan kode ya? bukan pake tag pre? kenapa?

Karna terbiasa dari dulu gan. Lebih gampang juga.

kalo cara untuk zoom dalam gambar bagaimana gan?

Mas Brando, kalau ubah ukuran weight 300px height 445px tanpa ada bullet gmn ya mas? dan search artikelnya dari label? buat upcoming movie hehehe.. makasih mas sebelumnya

gan itu biar tampil di home bukan??? trus naruhnya kode html nya dibagian mana ya??? makasih infonya...saya ingin gunakan ini di blog saya mungkin bisa dibantu lihat sekilas? campuradukloh.com. makasih gan atas responnya..sukses selalu

gan cra gedein gambarnya gmna ?

Untuk slider ini gambar yang agan pasang harus sesuai dengan lebar dan tinggi slider, jadi kalau diatas ukuran slider width:700px dan height:306px begitu juga dengan gambar yang ingin di pasang.

klo di gedein ukuran slider witdh ama height lg bisa nggk gan ??

Bisa gan, kalau itu lebarnya ada di bagian #sliderFrame dan #slider, ubah width:700px di kedua element tersebut dengan lebar dan tinggi yang sobat inginkan atau sesuai dengan template sobat.

Halo mas brando baru aja saya ketemu link ini dan langsung saya praktekkan. hasilnya KEREN mas :)
Ada yang mau saya tanyakan mas, klo slideshownya itu biar bisa jadi responsive gimana caranya ya mas?
tolong infonya! thx b4 :)

wah kalau responsivenya saya belum coba gan.. ok nanti saya coba dan muda2han berhasil..

cek lebar template ( kalau di tempat anda meletakannya di template anda width:1100px; ) kemudian sesuaikan dengan lebar slider ( misalnya ukuran slider diatas width:700px diganti width:1080px; ) , dan lebar gambarnya juga harus sama dengan lebar slider, karna slider di atas belum responsive. Coba search slider yang responsive gan biar gak ribet masangnya.