Membuat Fungsi Images Slider Pada Postingan Blog


Sobat blogger, pada postingan saya sebelumnya saya pernah membuat sebuah tutorial yang berhubungan dengan images yaitu Animasi Images Berayun, nah sob kali ini masih ada hubungannya dengan images pada postingan blog, yaitu sebuah tutorial yang menjelaskan bagaimana cara membuah images slider pada postingan blog dengan hanya menggunakan CSS tanpa Javascript, jadi dijamin tidak akan membuat loading blog sobat menjadi lambat atau terganggu sama sekali.
Membuat Images Slider Pada Postingan Blog
Membuat Images Slider Pada Postingan Blog
Fungsi slider images ini menurut hemat saya adalah mengurangi penggunaan ruang pada postingan, karena images atau gambar postingan kita dapat kita letakan disatu tempat dan dapat ditampilkan dengan menggunakan fungsi slide, nah jika sobat ingin membuat tampilan images atau gambar pada blog sobat menjadi "lebih atraktif dan menarik", sobat dapat memasangnya diblog sobat. Membuat Fungsi Images Slider Pada Postingan Blog



Bagaimana sob..tampilannya dari slider images ini dan sebenarnya cara membuat atau memasang images slider seperti ini tidaklah sulit-sulit amat sob, jika sobat mengikuti langkah-langkah dibawah ini dengan benar dan teliti, sudah pasti dan saya jamin akan bisa dipasang diblog kesayangan sobat.
Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !

Cara Membuat Fungsi Slider Images Pada Postingan Blog

Langkah Ke-1: Masuk ke menu Template>>Edit HTML Tambahkan Kode Css berikut sebelum kode  </head> , lalu Simpan Template sobat.

 
<style>
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; } 
#slide { overflow: hidden; }
#slide figure img { width: 20%; float: left; }
#slide figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}
</style>

Langkah Ke-2: Letakan kode HTML dibawah ini pada halaman postingan sobat .

 <div id="slide">
<figure>
<img src="http://1.bp.blogspot.com/-rJZ0XXgWv-Q/Vc9RgMewcCI/AAAAAAAAAis/Ldw8n2aw7Ck/s400/Aflah-my-son.jpg" alt="">
<img src="http://4.bp.blogspot.com/-1qcf-HkJC8w/Vc7SKpEX2AI/AAAAAAAAAiQ/RsgY6vzx5XQ/s640/1shadow-glow.jpg" alt="">
<img src="http://4.bp.blogspot.com/-pS_U98fYpKM/Vc7SKtZGt6I/AAAAAAAAAiU/xw7-e5FqNds/s640/1speech-bubble.jpg" alt="">
</figure>
</div> 

Langkah Ke-4: Ganti Url Images dengan Url Images milik sobat.

Publikasikan postingan sobat dan dan lihat hasilnya. Selesai! Selamat mencoba.
Previous
Next Post »

6 komentar

Click here for komentar
23 Agustus 2015 19.51 ×

gampang sekali ya mas, soalnya ada tutorial dari mas admin, kalo engga ada tutor dari mas admin mah susah deh.hehe
boleh dicoba nih biar lebih keren juga tak membuat loading blog lemot ya

Reply
avatar
28 Agustus 2015 16.40 ×

Langsung nyoba fungsi slidernya ya pak.

Reply
avatar
abdun cow
admin
30 Agustus 2015 09.34 ×

wah ini dia nih yang saya cari-cari. makasih pak atas tutorialnya, langsung saya coba.

Reply
avatar
Antonius SP
admin
31 Agustus 2015 08.54 ×

Silahkan mas Ardi... salam kenal

Reply
avatar
Antonius SP
admin
31 Agustus 2015 08.54 ×

Wah Pak Abdun monggo pak silahkan....

Reply
avatar
Antonius SP
admin
31 Agustus 2015 08.55 ×

Sepertinya ga buat lemot mas... silahkan dicoba .... :)

Reply
avatar
Thanks for your comment
close