Cara Menyisipkan Gambar Slide Valid AMP di Blogger

Cara Menyisipkan Gambar Slide Valid AMP di Blogger
Di Posting Oleh : Admin
Kategori : Blogger Images Valid amp Blog Tutorial, Teknologi dan Kesehatan: Mangaip Blog | Berita Terkini dan Terbaru: Terbaru.co.id | Watch Or Download Latest Movie: Filmer Film

Salah satunya yakni amp-carousel. Komponen amp-carousel memungkinkan buat menampilkan beberapa komponen serupa secara horizontal

Hal ini berbeda dengan template HTML biasa yang untuk membuat gambar slide mungkin diperlukan beberapa kode tambahan termasuk kode JavaScript yang mengontrol fungsi gambar slide nantinya. Namun akan jauh lebih mudah jika menggunakan Template AMP HTML.

Setup Gambar Slide pada Postingan Blogger

Untuk menyisipkan gambar slide pada postingan blogger ada beberapa hal yang perlu kalian lakukan. Yang harus pertama dilakukan yaitu memasang kode amp-carousel. Silahkan tambahkan dahulu kode amp-carousel berikut ini diatas kode .

			
				<script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'></script>
			
		

Jika sudah, Simpan Template dan silahkan buat Postingan baru pada mode HTML buka Compose dan coba gunakan beberapa Kode Model Efek Gambar slide berikut ini.

Basic Usage

Gunakan type="carousel" untuk menampilkan gambar secara bersambung.

Kode

			
				<amp-carousel height="300" layout="fixed-height" type="carousel"> <amp-img src="URL_GAMBAR_1" width="400" height="300" alt="teks alt gambar"></amp-img> <amp-img src="URL_GAMBAR_2" width="400" height="300" alt="teks alt gambar"></amp-img> <amp-img src="URL_GAMBAR_3" width="400" height="300" alt="teks alt gambar"></amp-img> </amp-carousel>
			
		

Slides

Gunakan type="slides" untuk menampilkan gambar secara penuh dengan slide.

Kode

			
				<amp-carousel height="300" layout="responsive" type="slides" width="400"> <amp-img height="300" layout="responsive" src="URL_GAMBAR" width="400"></amp-img> <amp-img height="300" layout="responsive" src="URL_GAMBAR" width="400"></amp-img> <amp-img height="300" layout="responsive" src="URL_GAMBAR" width="400"></amp-img> </amp-carousel>
			
		

Autoplay

Atribut autoplay (hanya untuk type=slides) akan menggerakkan slide dan memindahkan gambar satu ke gambar selanjut-nya tanpa interaksi user. Secara default akan memajukan slide dalam 5000 interval milidetik (5 detik), dan dapat pula diubah dengan atribut delay=6000 untuk 6 detik.

Kode

			
				<amp-carousel width="400" height="300" layout="responsive" type="slides" autoplay delay="2000"> <amp-img src="URL_GAMBAR" width="400" height="300" layout="responsive" alt="gambar sampel"></amp-img> <amp-img src="URL_GAMBAR" width="400" height="300" layout="responsive" alt="gambar sampel"></amp-img> <amp-img src="URL_GAMBAR" width="400" height="300" layout="responsive" alt="gambar sampel"></amp-img> </amp-carousel>
			
		

Custom boxes

Selain gambar kalian juga bisa menambahkan slide dalam bentuk kotak yang berisi teks, sehingga kalian bisa membuat teks dalam bentuk slide yang bisa berganti-ganti.

Ini adalah kotak berwarna biru.

Ini adalah kotak berwarna merah.

Ini adalah kotak berwarna hijau.

Kode

			
				<amp-carousel height="300" layout="fixed-height" type="slides"> <div><div class="blue-box">Ini adalah kotak berwarna biru.</div></div> <div><div class="red-box">Ini adalah kotak berwarna merah.</div></div> <div><div class="green-box">Ini adalah kotak berwarna hijau.</div></div> </amp-carousel>
			
		

Khusus bagian custom boxes kalian perlu menambahkan kode CSS khusus kedalam tag style. Tapi hanya jika diperlukan, untuk membedakan kotak yang satu dengan ya lain. silahkan taruh kode css dibawah ini didalam kede <style amp-custom='amp-custom'>

			
				<!-- Css Custom boxes --> .blue-box,.green-box,.red-box{width:100%;height:280px;color:white;font-size:1.5rem;padding:2rem 1rem;box-sizing:border-box;text-align:center}.blue-box{background:#00BCD4}.red-box{background:#F44336}.green-box{background:#8BC34A}
			
		

Dengan menggunakan cara di atas kalian dapat membuat inovasi baru pada tampilan blog meskipun dengan menggunakan Template AMP HTML, tetap Dapat digunakan untuk menyisipkan gambar yang lebih banyak tanpa harus menggunakan banyak tempat. Mungkin hanya itu saja untuk artikel kali ini tentang Menyisipkan Gambar Slide di Postingan Valid AMP Blogger.

Lokasi:

Berbagi :