Cara membuat Widget Popular Posts Blogger dengan Layout Carousel Slide pada HTML AMP tidak terlalu sulit jika sudah tahu bagaimana penempatan widgetnya.
pengertian dasar dari AMP Carousel adalah menampilkan beberapa konten dalam garis horizontal. dengan ini widget Popular Posts Blogger akan lebih menarik dan mudah di gunakan oleh pengunjung. ada beberapa element dasar pada AMP Carousel yang bisa di coba mana yang lebih menarik dan cocok untuk tema template web/blog.
Elemen Type Pada AMP Carousel
Cari code berikut :
kemudian letakan code berikut di bagian --- widget baru disini ---
pengertian dasar dari AMP Carousel adalah menampilkan beberapa konten dalam garis horizontal. dengan ini widget Popular Posts Blogger akan lebih menarik dan mudah di gunakan oleh pengunjung. ada beberapa element dasar pada AMP Carousel yang bisa di coba mana yang lebih menarik dan cocok untuk tema template web/blog.
Elemen Type Pada AMP Carousel
- type="carousel"
- type="slides"
- Auto Slide
<amp-carousel type="slides" autoplay delay="2000">
Penerapan Layout AMP Carousel Slide pada Widget Blogger
Pastikan Script Component sudah terpasang.Cara Pasang Widget Artikel Populer Dibawah Posting BLog.<script async="async" custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Cari code berikut :
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1'>...</b:widget>
---------- widget baru disini ----------
</b:section>kemudian letakan code berikut di bagian --- widget baru disini ---
1. AMP Widget Popular Post Dengan Gambar Dan Judul Artikel
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<amp-carousel height='150' layout='fixed-height' type='carousel'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:showThumbnails'>
<!-- Show thumbnails and Title -->
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300) : data:post.thumbnail' var='image'>
<amp-img expr:alt='data:post.title' expr:src='data:image' height='150' width='280'/>
</b:with><div><data:post.title/></div>
</a>
</b:if>
</b:if>
</b:loop>
</amp-carousel></div>
</b:includable>
</b:widget>#PopularPosts1.PopularPosts a,#PopularPosts1.PopularPosts amp-img{width:280px;height:150px;}
#PopularPosts1.PopularPosts h2{position:relative;overflow:hidden;margin:0.83em 0px;text-transform:uppercase;}
#PopularPosts1.PopularPosts h2 div{padding:0 10px 0 0;display:inline;float:left;}
#PopularPosts1.PopularPosts a{position:relative;}
#PopularPosts1.PopularPosts a div{width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;background:rgba(0,0,0,.6);color:#fff;padding:8px 10px;position:absolute;bottom:0;left:0;}2. AMP Widget Popular Post Dengan Gambar, Judul Artikel dan Snippet
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<amp-carousel height='150' layout='fixed-height' type='carousel'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:showThumbnails'>
<!-- Show thumbnails Title and Snippets -->
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='section'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300) : data:post.thumbnail' var='image'>
<amp-img expr:alt='data:post.title' expr:src='data:image' height='150' width='280'/>
</b:with><div class='judul'><data:post.title/></div>
</a>
<div class='konten'><data:post.snippet/></div>
</div>
</b:if>
</b:if>
</b:loop>
</amp-carousel></div>
</b:includable>
</b:widget>#PopularPosts1.PopularPosts div.section,#PopularPosts1.PopularPosts a,#PopularPosts1.PopularPosts amp-img{width:280px;height:150px}
#PopularPosts1.PopularPosts h2{position:relative;overflow:hidden;margin:0.83em 0px;text-transform:uppercase}
#PopularPosts1.PopularPosts div.section{position:relative;overflow:hidden;}
#PopularPosts1.PopularPosts h2 div{padding:0 10px 0 0;display:inline;float:left}
#PopularPosts1.PopularPosts a{position:relative}
#PopularPosts1.PopularPosts a div{width:280px;z-index:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;background:rgba(0,0,0,.6);color:#fff;padding:8px 10px;position:absolute;bottom:0;left:0}
#PopularPosts1.PopularPosts div.section .konten{width:280px;height:100%;padding:8px 10px;background:rgba(0,0,0,.6);color:#fff;white-space:normal;position:absolute;top:0;left:0;z-index: 1;opacity:0; transition: all .4s ease-in-out;}
#PopularPosts1.PopularPosts div.section:hover .konten{opacity:1}Jika ingin menempatkan widgetnya di atas Footer. maka harus di buat<b:section>baru.
berikut penerapannya. salin code :isi bagian yang kosong dengan widget yang ada pada cara di atas,lalu letakan di atas tag HTML Footer.<b:section class='carousel-slides' id='carousel-slides' preferred='yes'>
----- masukan widget popular post seperti cara di atas di sini ------
</b:section>
Jika masih kesulitan cara penerapannya, silahkan diskusikan pada kolom komentar.
Seperti yang sudah kita ketahui SVG adalah gambar vector yang berbasis XML. SVG sudah sangat banyak di gunakan untuk keperluan web design karena vector tidak merubah kualitas resolusi dari gambar yang di buat.cara untuk membuatnya kalian bisa gunakan software dari Adobe Illustrator karena aplikasi ini paling banyak dan mudah untuk di gunakan. berikut tutorial singkat cara mengatur gambar untuk menyimpan dalam format SVG untuk keperluan WEB Design. Saya menggunakan Adobe Illustrator CS6 untuk Windows-32bit.
Untuk keperluan 
Bagi para pengguna Template XML Blogger yang berniat untuk set javascript dari jQuery Library menjadi async (Asynchronous). mungkin ini di maksudkan Mengatasi Render-Blocking Javascript alhasil script jquery yang ada malah tidak berjalan pada peramban tertentu semisal firefox padahal kalau di buka pada browser Chrome/Opera berjalan lancar. lalu apa masalahnya ?
Pada beberapa kasus layout halaman dimana posisi footer akan mengikuti tinggi layout bagian atas . jika konten terisi penuh dengan tinggi layar hal seperti itu tidak akan kita sadari. Namun pada beberapa media mobile akan terlihat perbedaanya. bagi pemula yang baru saja belajar tata letak web rasanya hal ini akan terabaikan. untung saja css memiliki tata letak dengan Flexbox,meski agak sulit untuk memahaminya tapi kalau kita tahu masing-masing fungsi element pada flex akan lebih mudah mereapkannya. saat ini flexbox hampir semua browser terbaru mendukung(support). (abaikan jika masih menggunakan browser lama ) 
