Cara sederhana membuat Slide Gambar dengan CSS dan HTML

Slide Gambar - Hallo sobat, apa kabar semoga puasa kalian lancar. Pada kesempatan kali ini Admin akan share ke kalian Tutorial Cara sederhana membuat Slide Gambar dengan CSS dan HTML.

Mungkin tutorial ini sudah banyak sekali di google, tapi yaa.. gak apalah, itung² buat tambahan Artikel aja biar lengkap. Cara ini adalah cara yang paling sederhana untuk membuat slide gambar, karena kodenya pun sederhana dan tidak ada tambahan animasi atau durasi pada slidernya.

Cara membuat Slide Gambar dengan CSS dan HTML

Untuk tutorialnya silahkan simak dibawah:
1. Buka tema > Edit HTML > cari kode < /b:skin> atau < /style> Taruh kode ini diatasnya. .textslide {color:#fff;background-color:#075755;margin:0;padding:10px;text-align:center;font-size:20px;font:weight:bold;} .slide {position:relative;overflow:hidden;margin:0;padding:5px;border:0.5px solid #075755;} .slide ul{max-width:100%;overflow-x:auto;} .slide li{float:center;} .slide ul, .slide li {list-style:none;display:inline-block;white-space:nowrap;margin:0;padding:0;} .slide img {width:100%;height:200px;}

2. Buka menu Tata Letak > Tambahkan Widget > pilih HTML/Javascript > Letakkan kode ini didalamnya. <div class="textslide"> Slide Gambar</div> <div class="slide"> <ul> <li><img src="URL GAMBAR" /></li> <li><img src="URL GAMBAR" /></li> <li><img src="URL GAMBAR" /></li> <li><img src="URL GAMBAR" /></li> </ul> </div>

Demo:

Slide Gambar

• 
• 
• 
• 

Silahkan edit lagi kode css nya agar sesuai dengan template yang kamu pakai

Nah,, berikut Cara membuat Slide Gambar yang sederhana dengan CSS dan HTML, semoga bermanfaat dan Terimakasih.

Ali Hyuuga

Hanya seorang blogger pemula yang selalu ingin tau

Share :

Subscribe Or Neweslater