Gampang Caranya 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.
Salin kode berikut ini kedalam postingan,.

Tepat pada hari Raya Idhul Fitri 1438H (25/06) bagi saya merupakan hari yang Special Moment. Ya Special Moment karena pada hari itu juga merupakan hari pertama kalinya saya merayakan Idul Fitri dengan istri dan anak bersama keluarga saya di kampung halaman.

<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/AVvXsEhijp5zwQGdhQNhOZ2SvNWvKPBS83yKAkGljTc5ew2GTm9pFxpQeiRTAnYSWpjeaG5py9Ozl_5GhsSNUvC7lo6Kgauxt3wtsM9m_E7uneskiqJpKFuswHpnTkDLzQTDraXJec7WxTtc7RU/s1600/baturraden4.jpg" width="450"></amp-img>
    

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

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

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

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

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

<amp-img alt="title" height="300" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_f8WwnfamqU3BZJvsX2QrWu69ZZD7ZvGeD64UnXPtmrKIAlAyKNq5h3qICznBRztrVSy1gYtLnZ1g4_AaxGZ_48UCOasudnXX5xoRE5TAuK5UZ0qYr4wwd0np8-ocy0m45M9swXjEAMA/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/AVvXsEhijp5zwQGdhQNhOZ2SvNWvKPBS83yKAkGljTc5ew2GTm9pFxpQeiRTAnYSWpjeaG5py9Ozl_5GhsSNUvC7lo6Kgauxt3wtsM9m_E7uneskiqJpKFuswHpnTkDLzQTDraXJec7WxTtc7RU/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/AVvXsEhTIuZBMzz9nN9HBv6aiN7nUcaItJTPYtZJO91TTFXoAD-boKwInMHhyphenhyphen1pJUwlf4aluXJSHGtuqpPE8kZylnu4HPDQOu0hWYb9DCq2GX7rDpvkAwESlSm9Pk6dd_Y4CQPcJJ-INrCWDXgs/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/AVvXsEhtTFlkgF5w88-uUBIEmyrhLD9FSKnXzj5Ie_h9Xzu5GhrRl_o0S1G4ePVt8uLQEh2kvb5IRujF66brDEVttfz7QnPsmgmddrkt3_EIxbTCfDIaZYXqzL8Fj7vtXGFVtv7-fZnBSyYrBl0/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/AVvXsEhHNmF54pnqrGbXtxuL2U_hNiJB-uggWSKr3-0O-YG5EAjsdo5j1PVHTdrpcCah8qf75NrjzPdA8swP2KSWRQmBnSAGOobf7dK_rkIg1QuspVl9DobUg7IFBrJKIVsBoHuB2pCUWm6AhvE/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/AVvXsEiTDF-gDFhN-uiCSEuw0uQ61JVLR3cgr5JuQU4Ut7_OTxNNifhJ22CFbN3OBvw0DjlSqsKuK1SFa2S7_9YgxgcfxWTotts_Qa7OoRvuj4ribSZWJDoAvVMiWjf7IQktrT7J33lcv2oNUpg/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/AVvXsEgNffTNFa4HONO8US3O1SwADyE9OqBoegAVpPGl0PFoWoiq8Tdkt1OtlLScHbeyaUuBS8pfvIqTEb2xxzXjqcB0nA8QfyzALRXGnF7OvS1AO0OnDbFO4Xy_tzLGJiIQHVRL9BWELXUiK6Y/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/AVvXsEi_f8WwnfamqU3BZJvsX2QrWu69ZZD7ZvGeD64UnXPtmrKIAlAyKNq5h3qICznBRztrVSy1gYtLnZ1g4_AaxGZ_48UCOasudnXX5xoRE5TAuK5UZ0qYr4wwd0np8-ocy0m45M9swXjEAMA/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.

DEMO

Tags: AMP, CSS