Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Dinamis Slider Navigation With CSS3

Dinamis Slider Navigation With CSS3
Dinamis Slider Navigation With CSS3 – masih pada tema yang sama seperti pada pembahasan tutorial sebelumnya yakni masih seputar slider. Walaupun slider tergolong widget yang kurang disenangi oleh sebagian blogger kerena mungkin terkadang menurut para blogger juga memberatkan loading blog, namun itu hanya menurut sebagian blogger saja dan masih banyak juga blogger yang masih suka menggunakan slider untuk melengkapi desain dari tampilan blognya. Sedikit trik akan sedikit saya bahas disini, dalam menggunakan slider tentunya juga harus memperhatikan size file gambar yang nantinya akan di tampilkan kedalam slider. Jika size file gambar tersebut terlalu besar tentu untuk load gambar pada saat slider berjalan terkadang gambar yang ada tidak muncul dikarenakan waktu load yang terlalu lama untuk mengambil gambar tersebut dari URL-nya. Itulah sebabnya saya jarang menggunakan URL gambar langsung dari blogspot.com jika gambar tersebut akan saya terapkan kedalam slider karena pada slider sendiri sudah tampak jelas pasti gambar yang digunakan juga berukuran cukup besar. Oke sampai disini tentu sudah paham yang saya maksud, oleh sebab kita lanjut lagi ke pembahasan. Untuk menambah fitur slider ke dalam blog berikut adalah tutorial cara membuat Dinamis Slider Navigation With CSS3 di blog.
1. Login ke akun blogger.
2. Copy kode dibawah ini.
<style>
.main_slider {
float: left;
position: relative;
}
.window_slider {
height:286px;
width: 900px;
overflow: hidden;
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100;
text-align: center;
line-height: 40px;
background: url(https://lh5.googleusercontent.com/-S12JIcJv7Qg/UdZCJRvpTqI/AAAAAAAAFmg/cmhuYjiiUwQ/h94/paging_bg2.png) no-repeat;
display: none;
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
</style>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".window_slider").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".paging a").removeClass('active');
$active.addClass('active');
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first');
}
rotate();
}, 7000);
};
rotateSwitch();
$(".image_reel a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});
$(".paging a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});
});
</script>

<div class="main_slider">
<div class="window_slider">
<div class="image_reel">
<a href="http://mas-andes.blogspot.com"><img src="https://lh5.googleusercontent.com/-8t3Fjp6AD1E/UdZAc6RG_LI/AAAAAAAAFl8/BywoH69ewuo/w790-h286-no/Faceblog-Evolutions-%25281%2529.jpg" width="900" alt="Faceblog Evolutions"/></a>
<a href="http://mas-andes.blogspot.com"><img src="https://lh3.googleusercontent.com/-A8FOwZHjf8A/UdZAdvmDWuI/AAAAAAAAFmE/L0QQuN_hgTc/w790-h286-no/Faceblog-Evolutions-%25282%2529.jpg" width="900" alt="Faceblog Evolutions"/></a>
<a href="http://mas-andes.blogspot.com"><img src="https://lh4.googleusercontent.com/-UaRyBQ_1Hio/UdZAeRH3zJI/AAAAAAAAFmQ/4Bc-_me4Bl8/w790-h286-no/Faceblog-Evolutions-%25283%2529.jpg" width="900" alt="Faceblog Evolutions"/></a>
<a href="http://mas-andes.blogspot.com"><img src="https://lh4.googleusercontent.com/-Ch54s8ona1c/UdZAeMH2IMI/AAAAAAAAFmU/OgN6V66QB8s/w790-h286-no/Faceblog-Evolutions-%25284%2529.jpg" width="900" alt="Faceblog Evolutions"/></a>
</div>
</div>
<div style="display: block;" class="paging">
<a href="http://mas-andes.blogspot.com" rel="1">1</a>
<a href="http://mas-andes.blogspot.com" rel="2">2</a>
<a href="http://mas-andes.blogspot.com" rel="3">3</a>
<a href="http://mas-andes.blogspot.com" rel="4">4</a>
</div>
</div>
Keterangan:
Ganti "http://mas-andes.blogspot.com" dengan URL halaman yang di inginkan.
Untuk width dan height maupun URL gambar silahkan anda sesuikan selera.

3. Selanjutnya klik Tata Letak >> HTML/Javascript lalu paste kode tersebut kemudian Simpan dan lihat hasilnya.

Berlangganan artikel via email

108 Response to "Dinamis Slider Navigation With CSS3"

avatar
Anonymous

pokoknya mantap dah tutorial di blog ini. dinamis slidernya bikin saya jadi ngiler.

Balas

Asoy...nih mas tanpa uprek2 template..langsung bisa mejeng di blog..slidernya ya...hehe :)

Balas

Kadang kalo nemuin space gambarnya kelebaran sama slidernya..cara ngepasin nya gimana ya mas...

Apa harus bilang pas...gituh...hehe :)

Balas

Demikian kiranya saya juga ya mas Andes..kalo banyak salah kata di sini..mohon di bukain pintu mav yg selebar-lebarnya ya... :)

Balas

ya tinggal widht-nya di atur aja mas budi :)

Balas

keren jg slidernya mas....malah bersaing dgn slider bikinan master2 template.

Balas

keren banget lihat demo-nya, berat nggak ya?

Balas

Makin komplit nih mas..tutor CSsnya

Balas

Tutornya mantep banget mas :D

Balas
avatar
Anonymous

Jarene google code arep ditutup mulai tnggal 14 january 2014 e mas, hadooh ini berita yang sangat menyedihkan khususnya buat para blogger yg hosting filenya disitu

Balas

Terima kasih Mas Andes, kalau mau nambahin slider diatas post, bisa nggak Mas..?

Balas

Iya Mas Nyzam, tepatnya toserba CSS..:)

Balas

Ditimbang dulu beratnya..

Balas

Dicatat lho dik Maya yang penting2..

Balas

kereeen,,tukar template ah

Balas

bisa juga mas, tinggal drag saja element widgetnya tepat diatas post.. jangan lupa untuk lebarnya disesuaikan :)

Balas

gimana cara menyesuaikan lebar nya

Balas

asiiikk bnget animasinya...
:)

Balas

fotonya cantik cantik dapet dari mana mas.hh

Balas

pake timbangan saya gak bayar

Balas

kirain bilang wow gitu hehe

Balas

top markotop alias keren bin dahsyat hehe
apalagi kalau makan isi kulkas hehe

Balas

cara masangnya simple banget ya sob., makasih ya.. *smile

Balas

Pokoknya mas Andes adalah masternya slider kayaknya... keren banget nih :)

Balas

Dibuka aja mas nggak dikunci kok...

Balas

memang hebat yah mas tiada duanya :)

Balas

digunting dikit mas biar pas hehe...

Balas
avatar
Anonymous

waduh keren banget perpaduan CSS3 nyaa gan

Balas

Nah ini yang ane cari, makasih sob

Balas

trmksih sob infonya demonya bgus tuh sob bisa di cba ni nanti

Balas
avatar
Anonymous

tutorial disini bagus bagus banget

Balas

belajar CSS seperti ini ternyata susah buat orang yg memang tidak mempunyai basic sama sekali. Saya lg belajar buat template dengan mengkombinasikan beberapa tutor yg ada disini. Smga aja nanti jadi..hehe.

Lanjutkan mas andes..

Balas
avatar
Anonymous

yupz betul, tutor2 disini bagus2 semua :)

Balas
avatar
Anonymous

ini juga masuk ke kategori master lho, hehe :)

Balas

siapa bilang gak dikunci,, ini koq gak bisa dibuka2 pintunya.. apa lagi mau dibuka lebar2.. ^_^

Balas

mas andes kan master'nya,, siapa dlu teman'nya.. ^_^

Balas
avatar
Anonymous

makin mantap aja mas andes ini,, blog'nya pun juga makin keren.. :D

Balas

bagusnya digergaji saja mas budi,trus pinggirnya diamplas dech

Balas

gemboknya kegedean euy,,,

Balas

saya paling seneng kalau tidak oprek-oprek,edit-edit template,mau nyoba ach siapa tau nambah keren hehe

Balas

berarti hanya satu-satunya donk

Balas

hutang kalee dicatat

Balas

AMin..semoga cepet jadi mas

Balas

Satu satu sayang ibu..dua dua sayang ayah
satu dua tiga...harus sayang saya... :)

Balas

Wegah ah...sy pilih yang di cor aja.... Hehe :)

Balas

Hari gini masih pke gembok...remote dong kang :)

Balas

Sy juga master loh
master tukul..cuman... Hehe :)

Balas
avatar
Anonymous

aduuuh mas :D makin mantep aja toh slidernya >.<

Balas

Haha...kang Ruli...ntar nunggu Kang dede belanja dulu..buat menuhin kulkasnya kang :)

Balas

kata Kayaknya di delete dong mas

emang master kok :)

Balas

Bang Andy juga keren.. :)

Balas

Jgn lupa kirimin kolaknya... :)

Balas

Inovasi CSS3 memang excelent, bikin tambah mudah en keren ya. Thanks sdh berbagi mas.

Balas
avatar
Anonymous

Tenang saja, kalau mau pake slider nggak akan berat kok. Nggak percaya, langsung timbang aja pake kilo...

Balas
avatar
Anonymous

Dibungkus aja mbak maya, bawa pulang. ntar kalau tak habis masukin kedalam kulkas aja :)

Balas

Tapi baterenya pas habis mas jadi remotenya gak kepake deh hehe...

Balas

Iya yah perlu didelete tuk si kayaknya yah mas hehe... makasih udah mengingatkan... hehe...

Balas
avatar
Anonymous

baru tahu yah sob hehe...

Balas

yang diatas saya malah lebih keren mas...

Balas

sama pisang keju tabur coklatnya kalau masih sisa hehe...

Balas

Di cor biar tahan gempa yah mas...

Balas

terus yang laen gimana mas...

Balas

aduh.. saya mau yg ada tumbnyah.

Balas
avatar
Anonymous

bikin berat blog kagak sob ?

Balas

Wah simple banget...dengan hasil yang lumayan keren..thanks for your share..

Balas

mas saya mau nanya..gimana cara review alexa blog orang lain sekarang..di tunggu balasannya

Balas

baru tau yah agan-agan semua hehe...

Balas

entar isi kulkasnya paling cabe, salam, laos, merica hehe...

Balas
avatar
Anonymous

Kalo berat suruh diet aja mas hehe...

Balas
avatar
Anonymous

wow bisa langsung dicoba ya mass ..tutorial yg good. (y)

Balas
avatar
Anonymous

keren tuh gan slidernya hehe

Balas

kalo ada widget reviewnya tinggal klik aja tuh widget buat review, kalo gak ada ya bisa pake link ini:
http://www.alexa.com/reviews/mas-andes.blogspot.com
Ganti mas-andes.blogspot.com dengan url blog yang mau di review mas

Balas

kalo sudah keren kirim kabar ya :-)

Balas

wah mantap sekali mas, terus terang sangat dengan tutorial ini, dan untuk pembelajaran dalam ngeblog, Dinamis slider navigation ini memang banyak digunakan untuk variasi blog dan bisda menambah penampian buat template.
terima kasih sudah berbagi

Balas

benar mas Bob, saya sendiri sangat suka

Balas

perlu di coba kang dede, biar tambah asyik blognya

Balas

saya juga ikut setuju sama dg mas Har

Balas

navigasinya mantap dan keren

Balas
avatar
Anonymous

Mantap dah pokoknya,,,

Balas

keren abissss,, # sawer

Balas
avatar
Anonymous

mau bersilahturahmi aja sob sambil ngucapin met pagi :)

Balas

efect slidernya keren sob , kapan2 bisa dicoba nih :D

Balas

koq banyak photo vokalisnya paramore ? ngefans banget ya gan ? :D

Balas

wah kere ni slider css3 lagi. maaf mas baru bisa berkunjung lagi

Balas

masih tetep -___- .

Balas

Kunjungan malam habis solat taraweh Mas Andes..., Happy Blogging..!!

Balas

Kapan2 kita berjumpa lagi ...heheheh...:)

Balas

Saya komennya pas malam sob, jadi ya saya ucapin selamat malam...

Balas

kok jewer mas boku?

Balas
avatar
Anonymous

Tumben nih adminnya nggak nongol... kemana yah hehe...

Balas

nyiapin martabak buat berbuka puasa mas :)

Balas

Hmmm selalu saja sy ucapin makasih atas sharenya...

Balas
avatar
Anonymous

emang bener2 dinamis nih, sesuai sama judul postingannya. ^_^

Balas

Mas andes? kok gambar slidenya kalo dibiarin terus ( Di minimize browsrernya) tiba2 gerak sendiri cepet banget, kenapa ya? tolong dibalas ya ...

Balas

saya coba masih normal aja mas, emang yang gerak cepet gambarnya aja apa sama angka paggingnya mas?

Balas

error demonya Kang :)

Balas

mas andes mau tanya. kalau mau ganti animasi nya mejadi fade gimana mas? itu animasih nya kan slide kiri kanan. pengen jadi yang sederhana - fade in fade out

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Dinamis Slider Navigation With CSS3" ini bermanfaat, share ke jejaring sosial.
Konversi Kode