Cara Menciptakan Image Slider Seo Friendly Dan Mobile Responsive

Senin, 28 Mei 2018

Hai teman exp, kali ini admin akan memperlihatkan cara menciptakan Image Slider. Image Slider ini sanggup anda terapkan pada halaman web, blogger, ataupun wordpress. Image Slider ini memakai 3 komponen yaitu; javascript, css, dan html sebgai penerapannya.

Cara Membuat Image Slider Mobile Friendly dan SEO Responsive

Cara memasang Image Slider ini anda tak perlu menambahkan CSS dan Javascript lagi. Sobat hanya perlu menerapkannya di halaman, postingan blog, ataupun postingan wordpress.

Fitur Image Slider;

Seo Friendly
Mobile Responsive
Menggunakan Javascript, CSS, dan Html
Dengan Caption
Slide otomatis
Fast Slide
Pause Resume Slide

Cara Memasang Image Slider

Pertama, cari instruksi epilog </head>. Jika sudah ketemu letakan 2 baris instruksi di bawah ini sempurna di atas instruksi </head>.

<link href='https://cdn.rawgit.com/Eppoint/sliderimage.js/a264b5f2/my-slider.css' rel='stylesheet'/>
<script src='https://cdn.rawgit.com/Eppoint/sliderimage.js/a264b5f2/ism-2.2.min.js' type='text/javascript'/>

Nah sudah terpasang instruksi Javascript dan CSS nya. Dengan cara ini instruksi akan berfungsi bila ada koneksi internet. Karena instruksi Javascript dan CSS ini saya hosting di Github. Jika teman membuka halaman web dengan dua instruksi di atas tadi tanpa internet, maka Image Slider tidak akan tampil

Kedua, letakan instruksi berikut ini di kawasan yang sudah anda sesuaikan. Anda sanggup meletakan instruksi ini di halaman html sobat, postingan blog, atau postingan wordpress sobat.

<div class="ism-slider" data-interval="3000" data-play_type="loop" data-radio_type="thumbnail" id="my-slider">
<ol>
<li>
      <img alt=" kali ini admin akan memperlihatkan cara menciptakan Image Slider Cara Membuat Image Slider Seo Friendly dan Mobile Responsive"background-color: yellow;">free office software, office download, openoffice, microsoft office free, office software" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAW6nKzoMC4MI-XPhmo-5xpZHJg7RvE5edkhEQ06sl3UuIKpZ9FSLwPVxUWteMRCjpTHREFTfjwgHq0vkBRROHh4x5IJ6-s1dpvMYJoVqcqZuDW5rno31lrHCxw1EiKegn_z16UFyW97Di/s1600/writer-big.png" title="Cara Membuat Image Slider Seo Friendly dan Mobile Responsive"background-color: yellow;">ree office software, office download, openoffice, microsoft office free, office software" />
      <div class="ism-caption ism-caption-1" data-delay="200">
OpenOffice Writter</div>
</li>
<li>
      <img alt=" kali ini admin akan memperlihatkan cara menciptakan Image Slider Cara Membuat Image Slider Seo Friendly dan Mobile Responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjns4qtIAjsZLb1Nig-Wt_ItK0psyBFRQg9eE1XUab_CY-WG9fJKwfg4_qzgDo2cPxZEmzaUePXS5iXlSIACJ6-IesR87C6O2QHO03qopo9J1SUhvyEoZYO3K6Q2kFF8CAQsp0nM0Wt3mHY/s1600/calc-big_0_0.png" title="Cara Membuat Image Slider Seo Friendly dan Mobile Responsive" />
      <div class="ism-caption ism-caption-1" data-delay="200">
OpenOffice Calc</div>
</li>
<li>
      <img alt=" kali ini admin akan memperlihatkan cara menciptakan Image Slider Cara Membuat Image Slider Seo Friendly dan Mobile Responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI8mfKLf4IN3nGUvik6sfPnL2BU7D9-O5OgPwq9atHB1potgSpf0tDbcPX4ZNawNtYKREgQV6wCE-oRRSRkWTmhcM3ZnGeie2kLHDavBa75EtmqmSj1ooZZIpO3VVP2HPeoUuIahPvd8xD/s1600/impress-big.png" title="Cara Membuat Image Slider Seo Friendly dan Mobile Responsive" />
      <div class="ism-caption ism-caption-1" data-delay="200">
OpenOffice Impress</div>
</li>
</ol>
</div>

Penjelasan kode:
Kode kuning= title text dan alt text
Kode merah= lokasi gambar
instruksi biru= caption gambar

Nah kalau langkah langkah di atas sudah dilakukan dengan benar, silahkan cek hasilnya. Sobat sanggup memasang Image Slider di Blog ataupun di Wordpress.

Jika ingin melihat demo silahkan lihat

Sumber https://www.exppoin.com/