Daftar Isi
Cara Membuat Gambar Slide (Slideshow) Di Blog AMP - Slideshow pada blog salah satu manfaatnya yaitu untuk mempercantik tampilan blog. Selain itu dengan adanya slider ini, tidak perlu membuat gambar menjadi berjajar.
Mungkin untuk blog non amp penerapan slideshow di blog itu bukanlah hal yang sulit. Lalu bagaimana dengan blog amp? Yups, untuk blog amp, harus menggunakan kode khusus yaitu amp-carousel agar tetap valid amp.
Bagi blog kalian yang menggunakan amp html, dan menerapkan amp-carousel. Silahkan update amp-carousel dari versi 0.1 menjadi 0.2.
Biasanya carousel sering digunakan untuk menampilkan gambar secara slideshow. Bisa dimuat secara langsung dengan waktu jeda yang bisa disesuaikan.
Silahkan ikuti panduan cara membuat gambar slide (Slideshow) pada blog amp dibawah ini.
Cara Membuat Gambar Slide Di Blog AMP
1. Silahkan masuk ke dashboard blogger kalian.
2. Tekan CTRL+F lalu ketikan amp-carousel-0.1-js.
3. Kode lengkapnya seperti dibawah ini
<script async="async" custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
4. Kemudian ganti kode tersebut dengan kode dibawah ini.
<script async="async" custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
Berikut beberapa contoh penggunaan amp-carousel pada blog amp.
Slider Gambar Pada Blog Standar
Kode:
<amp-carousel width="1600" height="1067" layout="responsive" type="slides">
<amp-img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVqyZur0tFKblyZLIO8891LNQrB4qtst30r8Igrir0ZAM67xuDUmC-Dc8NOKZ0GwX6_QEFIh7Jwitcb3kHv0qIwrHq1JcGw2ZIdJ30XBH7MnQz5ivNPQhIw2OKceUHzaZlPzf7UbgsmqM/s1600/contoh+gambar+slide+blog+1.jpg"
width="1600"
height="1067"
></amp-img>
<amp-img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD5AEh1XWbjnlRfjoREwncTDVYejTD9373KbPh2ALwqoFnb3PMDqAl5ADIb3JNidrw8tXH-bp847ZC7Vm6cUa3xMJjjanQe_9_R3Lq47pccuikZzDvBdSJM0Y6Ig3pr6lRpZl3kBqH_F8/s1600/contoh+gambar+slide+blog+2.jpg"
width="1600"
height="1067"
></amp-img>
<amp-img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Dn1i_2Y4R5DHgkqIR5wFs5Zp3z9V6-SVigbf0hYulw_3E5QSa4F8rMCJwBX0D7U88ytRZo8j5A4_nPP01M15MZX9BvHzitGjNXkqSVev0FOz82l8FIblyBY9nGBm0gDRu2j0bKUxd-M/s1600/contoh+gambar+slide+blog+3.jpg"
width="1600"
height="1067"
></amp-img>
<amp-img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdQLyB2fYZ53sDR3r4qKWM_mCKrcTb0j5Rx2oU7VbuyLR3hl8ZNe3MVDkMPQr9I1Dhlu3YBBL3MANLHbvCKowb8BRvx26LzTMNVqQXXFtVStHMu6xoIlLoSSUgwUtnXUMH_IXOrgQL8g/s1600/contoh+gambar+slide+blog+4.jpg"
width="1600"
height="1067"
></amp-img>
</amp-carousel>
Hasilnya:
Gambar Slide Pada Blog Spesifik
Kode:
<amp-carousel
id="carousel-with-preview"
width="1600"
height="1067"
layout="responsive"
type="slides"
>
<amp-img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVqyZur0tFKblyZLIO8891LNQrB4qtst30r8Igrir0ZAM67xuDUmC-Dc8NOKZ0GwX6_QEFIh7Jwitcb3kHv0qIwrHq1JcGw2ZIdJ30XBH7MnQz5ivNPQhIw2OKceUHzaZlPzf7UbgsmqM/s1600/contoh+gambar+slide+blog+1.jpg"
width="1600"
height="1067"
layout="responsive"
alt="contoh gambar slideshow blog 1"
></amp-img>
<amp-img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD5AEh1XWbjnlRfjoREwncTDVYejTD9373KbPh2ALwqoFnb3PMDqAl5ADIb3JNidrw8tXH-bp847ZC7Vm6cUa3xMJjjanQe_9_R3Lq47pccuikZzDvBdSJM0Y6Ig3pr6lRpZl3kBqH_F8/s1600/contoh+gambar+slide+blog+2.jpg"
width="1600"
height="1067"
layout="responsive"
alt="contoh gambar slideshow blog 2"
></amp-img>
<amp-img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Dn1i_2Y4R5DHgkqIR5wFs5Zp3z9V6-SVigbf0hYulw_3E5QSa4F8rMCJwBX0D7U88ytRZo8j5A4_nPP01M15MZX9BvHzitGjNXkqSVev0FOz82l8FIblyBY9nGBm0gDRu2j0bKUxd-M/s1600/contoh+gambar+slide+blog+3.jpg"
width="1600"
height="1067"
layout="responsive"
alt="contoh gambar slideshow blog 3"
></amp-img>
<amp-img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdQLyB2fYZ53sDR3r4qKWM_mCKrcTb0j5Rx2oU7VbuyLR3hl8ZNe3MVDkMPQr9I1Dhlu3YBBL3MANLHbvCKowb8BRvx26LzTMNVqQXXFtVStHMu6xoIlLoSSUgwUtnXUMH_IXOrgQL8g/s1600/contoh+gambar+slide+blog+4.jpg"
width="1600"
height="1067"
layout="responsive"
alt="contoh gambar slideshow blog 4"
></amp-img>
</amp-carousel>
<div class="carousel-preview">
<button on="tap:carousel-with-preview.goToSlide(index=0)">
<amp-img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVqyZur0tFKblyZLIO8891LNQrB4qtst30r8Igrir0ZAM67xuDUmC-Dc8NOKZ0GwX6_QEFIh7Jwitcb3kHv0qIwrHq1JcGw2ZIdJ30XBH7MnQz5ivNPQhIw2OKceUHzaZlPzf7UbgsmqM/s1600/contoh+gambar+slide+blog+1.jpg"
width="60"
height="40"
alt="contoh gambar slideshow blog 1"
></amp-img>
</button>
<button on="tap:carousel-with-preview.goToSlide(index=1)">
<amp-img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD5AEh1XWbjnlRfjoREwncTDVYejTD9373KbPh2ALwqoFnb3PMDqAl5ADIb3JNidrw8tXH-bp847ZC7Vm6cUa3xMJjjanQe_9_R3Lq47pccuikZzDvBdSJM0Y6Ig3pr6lRpZl3kBqH_F8/s1600/contoh+gambar+slide+blog+2.jpg"
width="60"
height="40"
alt="contoh gambar slideshow blog 2"
></amp-img>
</button>
<button on="tap:carousel-with-preview.goToSlide(index=2)">
<amp-img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Dn1i_2Y4R5DHgkqIR5wFs5Zp3z9V6-SVigbf0hYulw_3E5QSa4F8rMCJwBX0D7U88ytRZo8j5A4_nPP01M15MZX9BvHzitGjNXkqSVev0FOz82l8FIblyBY9nGBm0gDRu2j0bKUxd-M/s1600/contoh+gambar+slide+blog+3.jpg"
width="60"
height="40"
alt="contoh gambar slideshow blog 3"
></amp-img>
</button>
<button on="tap:carousel-with-preview.goToSlide(index=3)">
<amp-img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdQLyB2fYZ53sDR3r4qKWM_mCKrcTb0j5Rx2oU7VbuyLR3hl8ZNe3MVDkMPQr9I1Dhlu3YBBL3MANLHbvCKowb8BRvx26LzTMNVqQXXFtVStHMu6xoIlLoSSUgwUtnXUMH_IXOrgQL8g/s1600/contoh+gambar+slide+blog+4.jpg"
width="60"
height="40"
alt="contoh gambar slideshow blog 4"
></amp-img>
</button>
</div>
Hasilnya:
Gambar Slide Pada Blog Dengan AutoPlay
Kode:
<amp-carousel type="slides"
width="1600"
height="1072"
controls
loop
autoplay
delay="3000" data-next-button-aria-label="Go to next slide"
data-previous-button-aria-label="Go to previous slide">
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVqyZur0tFKblyZLIO8891LNQrB4qtst30r8Igrir0ZAM67xuDUmC-Dc8NOKZ0GwX6_QEFIh7Jwitcb3kHv0qIwrHq1JcGw2ZIdJ30XBH7MnQz5ivNPQhIw2OKceUHzaZlPzf7UbgsmqM/s1600/contoh+gambar+slide+blog+1.jpg"
width="1600"
height="1072"></amp-img>
<amp-img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD5AEh1XWbjnlRfjoREwncTDVYejTD9373KbPh2ALwqoFnb3PMDqAl5ADIb3JNidrw8tXH-bp847ZC7Vm6cUa3xMJjjanQe_9_R3Lq47pccuikZzDvBdSJM0Y6Ig3pr6lRpZl3kBqH_F8/s1600/contoh+gambar+slide+blog+2.jpg"
width="1600"
height="1072"></amp-img>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Dn1i_2Y4R5DHgkqIR5wFs5Zp3z9V6-SVigbf0hYulw_3E5QSa4F8rMCJwBX0D7U88ytRZo8j5A4_nPP01M15MZX9BvHzitGjNXkqSVev0FOz82l8FIblyBY9nGBm0gDRu2j0bKUxd-M/s1600/contoh+gambar+slide+blog+3.jpg"
width="1600"
height="1072"></amp-img>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdQLyB2fYZ53sDR3r4qKWM_mCKrcTb0j5Rx2oU7VbuyLR3hl8ZNe3MVDkMPQr9I1Dhlu3YBBL3MANLHbvCKowb8BRvx26LzTMNVqQXXFtVStHMu6xoIlLoSSUgwUtnXUMH_IXOrgQL8g/s1600/contoh+gambar+slide+blog+4.jpg"
width="1600"
height="1072"></amp-img>
</amp-carousel>
Hasilnya:
Gambar Slide Pada Blog Dengan Fallback
kode:
<amp-carousel height="1067" layout="responsive" type="slides" width="1600" autoplay loop delay="2000">
<amp-img alt="contoh gambar slide blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVqyZur0tFKblyZLIO8891LNQrB4qtst30r8Igrir0ZAM67xuDUmC-Dc8NOKZ0GwX6_QEFIh7Jwitcb3kHv0qIwrHq1JcGw2ZIdJ30XBH7MnQz5ivNPQhIw2OKceUHzaZlPzf7UbgsmqM/s1600/contoh+gambar+slide+blog+1.jpg" width="1600" height="1067"><amp-img fallback alt="contoh gambar slide blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVqyZur0tFKblyZLIO8891LNQrB4qtst30r8Igrir0ZAM67xuDUmC-Dc8NOKZ0GwX6_QEFIh7Jwitcb3kHv0qIwrHq1JcGw2ZIdJ30XBH7MnQz5ivNPQhIw2OKceUHzaZlPzf7UbgsmqM/s1600/contoh+gambar+slide+blog+1.jpg" width="1600" height="1067"></amp-img></amp-img>
<amp-img alt="contoh gambar slide blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD5AEh1XWbjnlRfjoREwncTDVYejTD9373KbPh2ALwqoFnb3PMDqAl5ADIb3JNidrw8tXH-bp847ZC7Vm6cUa3xMJjjanQe_9_R3Lq47pccuikZzDvBdSJM0Y6Ig3pr6lRpZl3kBqH_F8/s1600/contoh+gambar+slide+blog+2.jpg" width="1600" height="1067"><amp-img fallback alt="contoh gambar slide blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD5AEh1XWbjnlRfjoREwncTDVYejTD9373KbPh2ALwqoFnb3PMDqAl5ADIb3JNidrw8tXH-bp847ZC7Vm6cUa3xMJjjanQe_9_R3Lq47pccuikZzDvBdSJM0Y6Ig3pr6lRpZl3kBqH_F8/s1600/contoh+gambar+slide+blog+2.jpg" width="1600" height="1067"></amp-img></amp-img>
<amp-img alt="contoh gambar slide blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Dn1i_2Y4R5DHgkqIR5wFs5Zp3z9V6-SVigbf0hYulw_3E5QSa4F8rMCJwBX0D7U88ytRZo8j5A4_nPP01M15MZX9BvHzitGjNXkqSVev0FOz82l8FIblyBY9nGBm0gDRu2j0bKUxd-M/s1600/contoh+gambar+slide+blog+3.jpg" width="1600" height="1067"><amp-img fallback alt="contoh gambar slide blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Dn1i_2Y4R5DHgkqIR5wFs5Zp3z9V6-SVigbf0hYulw_3E5QSa4F8rMCJwBX0D7U88ytRZo8j5A4_nPP01M15MZX9BvHzitGjNXkqSVev0FOz82l8FIblyBY9nGBm0gDRu2j0bKUxd-M/s1600/contoh+gambar+slide+blog+3.jpg" width="1600" height="1067"></amp-img></amp-img>
<amp-img alt="contoh gambar slide blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdQLyB2fYZ53sDR3r4qKWM_mCKrcTb0j5Rx2oU7VbuyLR3hl8ZNe3MVDkMPQr9I1Dhlu3YBBL3MANLHbvCKowb8BRvx26LzTMNVqQXXFtVStHMu6xoIlLoSSUgwUtnXUMH_IXOrgQL8g/s1600/contoh+gambar+slide+blog+4.jpg" width="1600" height="1067"><amp-img fallback alt="contoh gambar slide blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdQLyB2fYZ53sDR3r4qKWM_mCKrcTb0j5Rx2oU7VbuyLR3hl8ZNe3MVDkMPQr9I1Dhlu3YBBL3MANLHbvCKowb8BRvx26LzTMNVqQXXFtVStHMu6xoIlLoSSUgwUtnXUMH_IXOrgQL8g/s1600/contoh+gambar+slide+blog+4.jpg" width="1600" height="1067"></amp-img></amp-img>
</amp-carousel>
Hasilnya:
Cara Membuat Gambar Slide Pada Blog Wordpress
Untuk blog wordpress sebenaranya cukup mudah yaitu cukup memasang plugin bernama AMP for WP. Plugin wordpress ini saya rekomendasikan, karena penggunaannya sangatlah mudah.
Untuk hasil yang maksimal memang sebaiknya menggunakan yang premium. Akan tetapi versi gratisan dari plugin AMP For WP ini, sudah cukup maksimal.
AMP For WP pun sudah mendukung slider gambar didalamnya. Mudah bukan.
Kesimpulan
Salah satu untuk membuat blog anda memiliki tampilan yang menarik yaitu dengan menempatkan slide gambar pada blog kamu. Bisa digunakan di homepage atau artikel tulisanmu.
Sebaiknya gunakan foto yang memiliki resolusi yang tinggi, tapi tidak membuat berat loading blog kamu. Maka jalan yang terbaik yaitu menggunakan cdn.
Itulah panduan mengenai cara membuat slide (slideshow) di blog amp. Selamat mencoba, jangan sungkan untuk memberikan komentarnya dibawah ya.
Kembali Ke Daftar Isi?
