Membuat Gallery Photo di Postingan Blog AMP

Hi... sobat blogger MidaMax.Net, khususnya sobat yang sedang mencari sebuah cara Membuat Gallery Photo di Postingan Blog AMP. Sobat kini telah beruntung, karena sobat telah menemukan solusi untuk dapat membuat gallery photo di blog sobat yang sudah support dengan Accelerated Mobile Pages atau yang biasa kita sebut dengan AMP.

Sobat mungkin ingin mempercantik tampilan postingan sobat di blog kesayangan dengan menampilkan gallery photo. Apalagi photo yang ingin sobat tampilkan merupakan photo yang saat moment-moment indah bersama keluarga, sahabat atau pun pacar. Hayo.... siapa diantara sobat-sobat sekalian yang belum memiliki pacar?? 😀😂

Tenang saja meskipun di antara sobat-sobat sekalian ada yang belum memiliki pacar, yang penting sobat masih memiliki keluarga, sahabat dan teman yang menyayangi sobat dengan tulus.

Ok kita kembali ke topik yaitu cara Membuat Gallery Photo di Postingan Blog AMP

View Demo
Sobat dapat terapkan kode berikut ini kedalam postingan,

<amp-carousel height="300" id="carousel-with-preview" layout="responsive" type="slides" width="450">
    

<amp-img alt="title" height="300" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTYeuQzlwYrcSmj-afNrdvc2h1SqPae1NhBjpV7-Sr8jMDA85d4Y3XtttNAnrbUbCnxeHSDbeBUTb374aoeOv2GcBCz3Kr3LWEC_Zwz2zTc2teXIgBXpMGZAF1QLVZHFCZ8d-50Mv-MGY/s1600/baturraden4.jpg" width="450"></amp-img>
    

<amp-img alt="title" height="300" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj64gwhVerNq5XIzuRpT2Z3xDXaaRMkC9TwK0zkje-Hqh4f_BFmtmVAdCzboqWReqtYFdjqKaz7M0A011S0ieQF3fnHK-kxp6-0deoYyU7b-1XLQW4O8-Z_gtG6fxciX_zM4TrP-AYaRGg/s1600/baturraden2.jpg" width="450"></amp-img>
    

<amp-img alt="title" height="300" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8qyPfMBDvlOgThA4q1iLPIlbztuiy3QYu3nGHTrpeVIUHATC6u25b_Eoga2b5BucDa5uJWpKdH5RwNh4iYhtcMW5E7DaIEKNOM3nM3HpQ_NR4HLF-xgGxEUlFaoTaYUeuUdLHqoF4_go/s1600/baturraden3.jpg" width="450"></amp-img>
    

<amp-img alt="title" height="300" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLrF_mLSXMwAenUA10FUukJHJMGtqU2gMqHwod3qJjgWOdeTDDfjypNrsbDexpQHyGhRvXGV_Z8iI4A6AgNQ5hnBIniNV9cUiXWEOuGY5KikGa7tHzMz_WQoZ_x1HlcnzRj9jdsmwJhU/s1600/baturraden5.jpg" width="450"></amp-img>
    

<amp-img alt="title" height="300" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtVVCOCCsNs8yG0etueUAqYrebE5PVOGPqrnEbp0Lw6h5QXm7sKBUYYAzAFBYtKmca6SCmyk66GNe_Pu8nsmucyvtbjftIXPpwQhs0flZBPyx7fDIr5qQ7XpiCBspYddugFPTdY8gKato/s1600/baturraden6.jpg" width="450"></amp-img>
    

<amp-img alt="title" height="300" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8poqjNnku7d_6ZS4BtLGmu7NOXPDskcVVqYZaKBjkptBN9mJ2Ef860vUOU_HXkrZLCG6nM51KXuOcnb6IJ0DA2A_6OLg1qRFiBaa_Ju4oGg8hdlh4AYQx5q4iQgaLuo10tKd1wBosDkM/s1600/baturraden7.jpg" width="450"></amp-img>
  

<amp-img alt="title" height="300" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ9qzyxDNTGFParcg9g_noWzhJ3XIz4jKNa9ZXo21YLlHbVWZ4VLieELbdretRfuD9ubfOcQJRtT9gfLJS6pCoMJ0EiPyGUeqyV_ZsuETcF_KrNJcDb2FgkmlEXgmo3Krk-5buusZfnkY/s1600/baturraden1.jpg" width="450"></amp-img>
  </amp-carousel>
<br />
<center>
  <div class="carousel-preview">
<button on="tap:carousel-with-preview.goToSlide(index=0)">
      

<amp-img alt="title" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTYeuQzlwYrcSmj-afNrdvc2h1SqPae1NhBjpV7-Sr8jMDA85d4Y3XtttNAnrbUbCnxeHSDbeBUTb374aoeOv2GcBCz3Kr3LWEC_Zwz2zTc2teXIgBXpMGZAF1QLVZHFCZ8d-50Mv-MGY/s1600/baturraden4.jpg" width="60"></amp-img>
    </button>
    <button on="tap:carousel-with-preview.goToSlide(index=1)">
      

<amp-img alt="title" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj64gwhVerNq5XIzuRpT2Z3xDXaaRMkC9TwK0zkje-Hqh4f_BFmtmVAdCzboqWReqtYFdjqKaz7M0A011S0ieQF3fnHK-kxp6-0deoYyU7b-1XLQW4O8-Z_gtG6fxciX_zM4TrP-AYaRGg/s1600/baturraden2.jpg" width="60"></amp-img>
    </button>
    <button on="tap:carousel-with-preview.goToSlide(index=2)">
      

<amp-img alt="title" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8qyPfMBDvlOgThA4q1iLPIlbztuiy3QYu3nGHTrpeVIUHATC6u25b_Eoga2b5BucDa5uJWpKdH5RwNh4iYhtcMW5E7DaIEKNOM3nM3HpQ_NR4HLF-xgGxEUlFaoTaYUeuUdLHqoF4_go/s1600/baturraden3.jpg" width="60"></amp-img>
    </button>
<button on="tap:carousel-with-preview.goToSlide(index=3)">
      

<amp-img alt="title" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLrF_mLSXMwAenUA10FUukJHJMGtqU2gMqHwod3qJjgWOdeTDDfjypNrsbDexpQHyGhRvXGV_Z8iI4A6AgNQ5hnBIniNV9cUiXWEOuGY5KikGa7tHzMz_WQoZ_x1HlcnzRj9jdsmwJhU/s1600/baturraden5.jpg" width="60"></amp-img>
    </button>
<button on="tap:carousel-with-preview.goToSlide(index=4)">
      

<amp-img alt="title" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtVVCOCCsNs8yG0etueUAqYrebE5PVOGPqrnEbp0Lw6h5QXm7sKBUYYAzAFBYtKmca6SCmyk66GNe_Pu8nsmucyvtbjftIXPpwQhs0flZBPyx7fDIr5qQ7XpiCBspYddugFPTdY8gKato/s1600/baturraden6.jpg" width="60"></amp-img>
    </button>
<button on="tap:carousel-with-preview.goToSlide(index=5)">
      

<amp-img alt="title" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8poqjNnku7d_6ZS4BtLGmu7NOXPDskcVVqYZaKBjkptBN9mJ2Ef860vUOU_HXkrZLCG6nM51KXuOcnb6IJ0DA2A_6OLg1qRFiBaa_Ju4oGg8hdlh4AYQx5q4iQgaLuo10tKd1wBosDkM/s1600/baturraden7.jpg" width="60"></amp-img>
    </button>
<button on="tap:carousel-with-preview.goToSlide(index=6)">
      

<amp-img alt="title" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ9qzyxDNTGFParcg9g_noWzhJ3XIz4jKNa9ZXo21YLlHbVWZ4VLieELbdretRfuD9ubfOcQJRtT9gfLJS6pCoMJ0EiPyGUeqyV_ZsuETcF_KrNJcDb2FgkmlEXgmo3Krk-5buusZfnkY/s1600/baturraden1.jpg" width="60"></amp-img>
    </button>
  </div>
</center>

Jangan lupa untuk menerapkan kode tersebut, postingan harus dalam mode HTML bukan Compose ya dan untuk url gambar yang saya beri tanda block bisa sobat ganti dengan url gambar sobat.

Lalu jika sudah selesai, silahkan klik di Publikasikan, lalu lihat hasilnya. Bim salabim abrakadabra !! Akhirya gallery photo sobat tampil di postingan yang sudah sobat buat.

Itulah tutorial singkat dan mudah cara Membuat Gallery Photo di Postingan Blog AMP yang dapat saya ulas pada kesempatan kali ini, semoga bermanfaat...