Archive Pages Design$type=blogging

Membuat Fungsi Images Slider Pada Postingan Blog

S obat blogger , pada postingan saya sebelumnya saya pernah membuat sebuah tutorial yang berhubungan dengan images yaitu Animasi Images Be...


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.

COMMENTS

BLOGGER: 10
Loading...
Nama

Animasi Blogger Button Css Javascript jQuery Sider Sosial Media Syntax Highlighter Template Tips Tutorial Windows 10
false
ltr
item
Simple Tutorial: Membuat Fungsi Images Slider Pada Postingan Blog
Membuat Fungsi Images Slider Pada Postingan Blog
http://2.bp.blogspot.com/-ZMd6wj77nWA/VdiddNcfvtI/AAAAAAAAAjE/nH82rPdhb5U/s320/film-slide.jpg
http://2.bp.blogspot.com/-ZMd6wj77nWA/VdiddNcfvtI/AAAAAAAAAjE/nH82rPdhb5U/s72-c/film-slide.jpg
Simple Tutorial
http://mirandahardy.blogspot.mx/2015/08/membuat-fungsi-images-slider-pada.html
http://mirandahardy.blogspot.mx/
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/2015/08/membuat-fungsi-images-slider-pada.html
true
4419251694985783704
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago