Cara Mudah Buat Popular Post Amp Slide

Perkembangan akan kebutuhan isu belakangan ini sangat pesat sekali, kebutuhan isu selalu updated hal ini menuntut Industri kreatif terus berinovasi menyajikan Informasi yang sesuai dengan kebutuhan sekarang ini. Dari forum-forum yang saya ikuti sekarang ini banyak developer Website atau para mastah Blogger bersaing dan terus mengembangkan teknologi informasinya dalam Website atau blog yang mereka sajikan termasuk blog saya ini demi menyajikan isu yang atau konten yang berkualitas dituntut pula dapat menyajikan tampilan yang SEO dan Mobile Friendly ibarat pembahasan sebelumnya yang sudah saya ulas mengenai SEO.

Pernah atau sering kali kita melihat tampilan Website sekarang ini selain Mobile Friendly dan SEO yang mengagumkan tentunya diimbangi dengan konten yang berkualitas trafik dari website atau blog tersebut sangat luar biasa ibarat Website yang sering saya ikuti dan pembahasan ini saya adopsi dari webnya Kompiajaib bagaimana membuat dan menyajikan tampilan website yang SEO dan ramah bagi pengguna Mobile.

Tentu bukan hal yang asing lagi bagi para Master yang memang sehari-hari berkutat di dunia ini, apalagi dalam beberapa tahun belakangan ini Google selaku raksasa internet telah menyarankan bagi Developer Website atau pengguna Blogger biar menggunakan teknologi amp untuk di aplikasikan di dalam tampilan Website atau Bloggernya. Google memang yang pertama kali menyerukan penggunaan amp ini untuk Website. Sepanjang pengamatan saya ada Pro dan Kontra di kalangan Developer website atau para Blogger, banyak juga yang berpendapat bahwa metode amp ini masih banyak kekurangannya dalam penerapan script kodenya, ada juga yang berpendapat ini mengagumkan dan wajib untuk di gunakan di webste atau blognya. Namun kalau menurut saya bukan dari sisi Script yang masih belum tepat tapi memang rata-rata kita ini masih sedikit sekali yang mampu menerapkan amp ini di  webstite atau blog, justru menurut saya dan yang sudah saya lakukan amp ini sangat mengagumkan dan ringan untuk kecepatan website atau blog kita beda halnya dengan HTML5.

Dari pandangan dan fenomena diatas saya mencoba memberanikan ini untuk menyebarkan ke sahabat artikel Cara Mudah Buat Popular Post Amp Slide dengan memodifikasi Widget popular post dengan metode amp slide dengan autoplay. Mungkin banyak dari sahabat sobat semua yang masih resah dan bertanya bedanya slide dan carousel, toh juga sama menggunakan amp-carousel ?. Kaprikornus begini penjelasannya sobat, kalau carousel hanya menggunakan image tanpa caption alasannya yaitu didalamanya ada script white-space: nowrap!important; supaya item jejer ke samping jadi text yang melebihi area tidak akan mampu berbaris alasannya yaitu text secara otomatis dalam satu baris lain halnya jikalau di siasati dengan text-overflow: ellipsis; dan menjadikan carousel tidak mampu autoplay.

Nah kalau pada slide sahabat hanya mampu menggunakan  autoplay dan caption tapi kekurangannya item yang mau ditampilkan tidak mampu sejajar ibarat halnya carousel hanya mampu menampilkan satu persatu.

Lalu bagaimana jikalau kita ingin menerapkannya di Blogger? ini kabar baik ternyata di templated blogger mampu diterapkan metode ini dan mampu menampilkan lebih dari satu widget popular post namun syaratnya harus dan wajib menggunakan id widget yang berbeda ibarat contohnya secara default harus ibarat id="PopularPost1" ini yang ada di blogg sahabat untuk id widget PopularPost ke dua dan seterusnya gunakan ibarat ini id="PopularPost2" dan seterusnya jikalau ingin menambahkan lebih banyak. Jangan lupa setingannya harus berbeda pula misal widget popularpost pertama di beri nama "Setiap Waktu" untuk widget popularpost yang ke dua diberi nama "7 hari Popular" sahabat mampu bebas menawarkan namanya pada widget popularpostnya. 

Lalu bagaimana nih cara penerapannya berikut dibawah ini Cara Mudah Buat Popular Post Amp Slide dengan Autoplay silahkan sahabat ikuti langkahnya, dan sebelum memulai ada baiknya sahabat backup terlebih dahulu templatednya untuk berjaga jikalau penerapan ini terjadi error.

Langkah Pertama

Sobat masuk ke Widget Popular Post lalu ganti dengan instruksi HTML berikut 

<b:widget id='PopularPosts1' locked='false' title='Hot on this week:' type='PopularPosts' version='1' visible='true'>   <b:includable id='main'>   <b:if cond='data:title != &quot;&quot;'><h2><div><data:title/></div></h2></b:if>   <div class='widget-content popular-posts'> <amp-carousel autoplay='autoplay' delay='2000' height='180' layout='fixed-height' type='slides'>   <b:loop values='data:posts' var='post'>   <b:if cond='!data:showThumbnails'>   <b:if cond='!data:showSnippets'>   <!-- (1) No snippet/thumbnail -->   <a expr:href='data:post.href'><data:post.title/></a>   <b:else/>   <!-- (2) Show only snippets -->   <div><a expr:href='data:post.href'><data:post.title/></a></div>   <div><data:post.snippet/></div>   </b:if>   <b:else/>   <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->   <div class='slide'>   <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='180' width='300'/>     </b:with>       </a>     </b:if>       <div class='caption'><data:post.title/></div>     </div>     </b:if>   </b:loop> </amp-carousel>   </div> </b:includable>   </b:widget>

Sobat perhatikan betul kodenya, kemudian simpan lalu lanjut berikutnya


Langkah ke dua
Untuk modifikasi tampilannya gunakan CSS Style dibawah ini :

#PopularPosts1.PopularPosts{background:#fff;padding:0} #PopularPosts1.PopularPosts amp-img{width:300px;height:180px;} #PopularPosts1.PopularPosts h2{position:relative;overflow:hidden;margin:0 10px 10px 0;padding:10px 0 0} #PopularPosts1.PopularPosts h2 div{padding:0 10px;display:inline;float:left;} #PopularPosts1.PopularPosts h2:after{content:'';float:left;position:absolute;top:12px;height:15px;margin:0;width:100%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU3gRnayOOcMMWWEtAw1WZVqnTBsqOD5CUc34qKmrYcTJSJEjYpH0vcmO0caorhaQr4HRIsKRWdiSHnZYulF868HaoJhloG9vAL3zzRGiI1VgZHDMSixsACKDG3SymEQmrNh94wD1881FG/s1600/repeat-bg.png);opacity:.9;} #PopularPosts1.PopularPosts .slide .caption{position:absolute;bottom:-19px;left:0;right:0;padding:6px 8px 10px;background:rgba(0,0,0,.6);color:#ddd;font-size:smaller;max-height:30%;line-height:1.1em}

Setelah simpulan wajib diperhatikan sahabat wajib memastikan sudah menyimpan instruksi JS amp-carousel ibarat tampilan instruksi dibawah ini diatas instruksi </head>.

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

Bagaimana sahabat penasaran untuk segera menerapkannya, silahkan sahabat coba semoga bermanfaat, dan yang tidak kalah penting selain penerapan SEO di website atau blog hal yang paling utama yaitu penyajian artikelnya atau konten yang berkualitas, alasannya yaitu percuma saja kalau SEOnya baiklah dan keren kalau tidak diimbangi dengan penyajian konten yang berkualitas pasti tidak akan mempunyai pengunjung yang setia alasannya yaitu dianggap hanya menyajikan konten yang biasa saja, apalagi jikalau kontenya hanya dari hasil copy paste, sudah otomatis akan dianggap tidak baik oleh search engine terutama Google.

Terima kasih sahabat sudah berkunjung jikalau ada yang ingin di tanyakan dapat melalui komentar ini atau dengan senang hati saya mendapatkan jikalau ada yang ingin menyebarkan pengalaman seputar artikel ini.