Membuat Fungsi Images Slider Pada Postingan Blog

Dul Kenyot   09.06   Blogger, Sider, Tutorial   6 comments  

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

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

Demo

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qbtStnPGUYU5VljQ_DC71lylbH2qk0op4OZqXG9lUFTGr4bbKw9Pz_r7i0qFtS6yzV0EYghYrJJSYZ9XIgFPZpV2cZDeGI6zzAo0_tsKoT87I2Z50mWAZ1dub0V9o3hwyjvclvlqXUyh/s400/Aflah-my-son.jpg" alt="">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTr4eHCaPBmjoVM9moOCtT_807Lshk_ut-DQfxQGF9kclyY7qBHTvejKg3o3BUiJk4jjHEUyuN7v_iE33ce6KvFrMTJScX4creTIjReW-EwIvaktYJ5qDpJf7IKeDLkiQfrp6CutHwMcsS/s640/1shadow-glow.jpg" alt="">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEufmrvZZUj_DQjJ6Wfo8zsuHZ2Mopw2DLL_dgxWkVrtTgVGUnmcgJn4DKDqDsPL6fAE6Mho585L8pBDWi2lvyzGJPHuHROddnqD4Bt7O81EYsFgF39LtZrKWSRjVdMm04ibJbuUigNifF/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.