Jasa Buat Web | Tulis Artikel Dan Bisnis | program paid review dan pembuatan Private Label Article | Harga Terjangkau Dan Aman

Cara Tutorial Membuat Slider Di CSS Desktop Not Javascript Multy Fungsi Mobile SEO Friendly

Profile
Diposting oleh Saif Mild Hingga Saat ini

TRANSLATE THIS PAGE: YES?

TRANSLATE THIS PAGE

Buat yang doyan mampir di blog, maupun website profesional, pasti sudah sering lihat slider berseliweran dengan berbagai model.Memang sih saya itu gaptek membuat slider dengan css, namun akhir-akhir ini. Ngiler juga lihat blog / website lain yang dipasang slider, jadi kelihatan bagus. Setelah Nyoba berkali-kali, gagal berkali-kali juga. Saya berusaha. Namanya juga usaha...dan alkhamdulillah dapat wejangan hihihii......, dan mudah-mudahan kali ini gak salah kasih cara usaha saya untuk sobat semua tanpa terkecuali.

css3-slider-profesional


Sobat jujur saja saya paling ribet kalau membuat artikel tutorial macam ini, namun bukan karena tidak ingin berbagi, selain kayaknya belum pantas karena saya juga masih belajar, tapi saya bingung juga membuat postingannya, selain susah juga pasti harus super hati-hati bin amat. Ampun dah ah ah aaaahhh, ahihihihihiii...

Oke Sobat Slider yang akan kita buat adalah slider yang sangat sederhana murni dengan CSS tanpa ada campur tangan javascript didalamnya. Dan yang pasti tanpa menggunakan gambar, hanya teks saja. Dan Untuk demonya saya sudah mengganti dengan gambar, silahkan dilihat di website saya ini dengan tampilan PC / hilangkan centang di pengaturan operamini sobat, (jika memakai opmin)

Akan tetapi Kali ini, yang akan kita utak-atik adalah bagian RECENT POST Saja dulu. Jadi, 5 postingan terbaru kita akan berganti-ganti layaknya headlines yang ada di portal-portal berita.

Ilustrasinya adalah, anggap saja kita akan meletakkan 5 buah kotak berukuran sama (sebagai contoh saya pakai ukuran 600px) diatas papan.Kenapa 5 kotak? karena link recent post di N.nu itu ada beberapa bagian/link (default). Nah, papan yang kita miliki harus memiliki panjang yang cukup untuk dapat membuat kelima kotak tersebut dapat diletakkan secara horizontal atau berjejer.Pada contoh ini saya pakai ukuran papan 3000px dengan asumsi margin dan padding nilainya adalah 0 dan tanpa border.

kotaknya ada 5
1 kotak berukuran 600px
jadi, panjang papan yang dibutuhkan adalah : 5 x 600px = 3000px

Oke, silahkan disimak caranya sebagai berikut :

Pertamak, mari kita berdoa agar slider yang kita buat bisa berjalan baik di berbagai macam browser, dan slider ini sudah saya test di refox, Chrome, Opera, Safari, Mozilla versi terbaru, IE 10 dan IE 11.

Kedua, ayo kita cari bagian recent post di css yang kita punya, untuk test, saya pakai CSS via email type style template edition. Karena ada beberapa CSS template N.nu yang tidak memiliki bagian recent post.

Ketiga, ini kode bagian recent postnya :

#sidebar li + li h3 (Ini Adalah Tulisan Recent Postnya)
#sidebar ul li nth-child(2) ul
#sidebar ul li nth-child(2) ul li
#sidebar ul li nth-child(2) ul li a

Oke, sekarang mari kita isi tag didalamnya seperti ini :

Bagian H3 :

#sidebar li + li h3{
width:300px;
background:#000;
margin:0px;
position:absolute;
top:0px;
left:10px;
color:#fff;
}

Bagian ul :

#sidebar ul li:nth-child(2) ul{
position:absolute;
width:600px;
height:40px;
top:40px;
left:0px;
background:#eee;
overflow:hidden;
padding:0px;
}

position : absolute, berfungsi untuk meletakkan recent post dimanapun kita suka, di header , footer atau di tempat lainnya.

width : berfungsi untuk mendefenisikan ukuran lebar slider yang akan kita buat, dan lebar ini dapat kamu ganti sesuai selera.

height : berfungsi untuk mengatur tinggi dari slider yang kita buat, dan ini juga bisa diganti sesuai selera.

top dan left : berfungsi untuk mengatur jarak atas dan kiri dari id yang memiliki position:relative.
overflow : hidden, berfungsi untuk menyembunyikan link postingan apabila postingan kita memiliki judul dengan karakter huruf yang sangat banyak.

Bagian li :

#sidebar ul li:nth-child(2) ul li{
position:relative;
background:#222;
width:3000px;
margin:0px;
padding:0px;
}

position : relative, berfungsi untuk membuat bagian link postingan kembali ke posisi semula, nempel di ul nya (saya bingung mau bagaimana cara perjelasnya, pokoknya seperti ini ya sobat).

width : berfungsi untuk meletakkan link yang akan kita buat, dan berjejer diatas garis sepanjang 3000px.(dengan asumsi margin 0 dan padding 0 di bagian #sidebar ul dan turunannya tanpa border, baca lagi ilustrasi yang saya buat sebelum bagian ini ya sob...musmuet sirahku... Pusing pala berby... Hehehee)

Kode diatas tidak akan membuat link postingan kita berganti/ atau berjalan tanpa ada animation, untuk itu kita bisa tambahkan animation kedalamnya seperti ini :

14 Feb 2016

Comments powered by Disqus

BUAT WEB SEPERTI INI GRATIS: BUAT