Membuat Popular Post Valid AMP Ala Mafsyah
Rasanya postingan membuat popular post di blog tutorial sudah banyak yah,dengan berbagai macam bentuk dan kode,karena saat ini beberapa pengguna blog menggunakan template blog AMP saya tertarik untuk share cara membuat popular post blog AMP ketika saya berkunjung alias blogging sedang mencari template hehe..saya tertarik dengan popular post sebuah blog yaitu blog mafsyah, salah satu blogger indonesia, dengan desain template AMP biru dan simple saya melihat popular postnya keren hehe.. nah bagi anda yang tertarik untuk memodifikasi popular post blog AMP silahkan ikuti langkah-langkahnya dibawah ini.
Langkah Pertama
Cari kode </style> atau simpan kode dibawah ini, tepat diatas kode </style>
Selanjutnya cari kode 'sidebar-wrapper' > Letakan Kode Di Bawah Ini Tepat Di Bawah Kode <b:section class='sidebar' id='sidebar' showaddelement='yes'>
Langkah Terakhir Cari Kode <b:includable id='main'> Letakan Kode Di Bawah Ini Tepat Di Bawahnya
Langkah Pertama
Cari kode </style> atau simpan kode dibawah ini, tepat diatas kode </style>
.PopularPosts .widget-content{padding:0;box-sizing:border-box}.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;background:rgb(0, 159, 255)}.PopularPosts .widget-content ul li { margin: 0; padding: 10px 0 10px 60px; position: relative; overflow: hidden; border-top: 1px solid #2b2b2b; border-bottom: 1px solid #111;}.PopularPosts .widget-content ul li:last-child{border-bottom:none}.PopularPosts .widget-content ul li .item-title{color:#fff;line-height:1.1em;padding:0 10px 0 0}.PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:13px;font-weight:400}.PopularPosts .widget-content ul li .item-title a:hover{color:#fff}.PopularPosts .item-snippet{font-size:14px;font-weight:400;margin-top:10px;line-height:1.1em}.PopularPosts .widget-content ul li amp-img{width:300px;height:180px;padding-right:0;transition:all .5s ease-out}.PopularPosts .widget-content ul li:first-child{border-bottom:none;padding:0}.PopularPosts .widget-content ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}.PopularPosts .widget-content ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:15px 20px 15px 60px;background:rgba(0, 159, 255, 0.68);z-index:1}.PopularPosts .widget-content ul li:first-child .item-title a{color:#fff}.PopularPosts .item-snippet,.PopularPosts .widget-content ul li .item-thumbnail{display:none}.PopularPosts .widget-content ul{padding-left:0;counter-reset:popcount}.PopularPosts .widget-content ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:10px;top:50%;margin-top:-19px;color:#fff;font-size:38px;line-height:1;z-index:2}
.sidebar .PopularPosts .item-title a{color:#ffffff;text-decoration:none}.PopularPosts .widget-content ul li:first-child .item-title:before{color:#fff}.PopularPosts .widget-content{padding:0;box-sizing:border-box}.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;background:rgb(0, 159, 255)}.PopularPosts .widget-content ul li { margin: 0; padding: 10px 0 10px 60px; position: relative; overflow: hidden; border-top: 1px solid #2b2b2b; border-bottom: 1px solid #111;}.PopularPosts .widget-content ul li:last-child{border-bottom:none}.PopularPosts .widget-content ul li .item-title{color:#fff;line-height:1.1em;padding:0 10px 0 0}.PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:13px;font-weight:400}.PopularPosts .widget-content ul li .item-title a:hover{color:#fff}.PopularPosts .item-snippet{font-size:14px;font-weight:400;margin-top:10px;line-height:1.1em}.PopularPosts .widget-content ul li amp-img{width:300px;height:180px;padding-right:0;transition:all .5s ease-out}.PopularPosts .widget-content ul li:first-child{border-bottom:none;padding:0}.PopularPosts .widget-content ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}.PopularPosts .widget-content ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:15px 20px 15px 60px;background:rgba(0, 159, 255, 0.68);z-index:1}.PopularPosts .widget-content ul li:first-child .item-title a{color:#fff}#blog-pager,.PopularPosts .item-snippet,.PopularPosts .widget-content ul li .item-thumbnail,.blog-pager{display:none}.PopularPosts .widget-content ul{padding-left:0;counter-reset:popcount}.PopularPosts .widget-content ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:10px;top:50%;margin-top:-19px;color:#fFF;font-size:38px;line-height:1;z-index:2}.Label li,.Label li a,.label-size a{position:relative;transition:all .3s ease-out}.sidebar .PopularPosts .item-title a{color:#FFF;text-decoration:none}.PopularPosts .widget-content ul li:first-child .item-title:before{color:#fff}
Selanjutnya cari kode 'sidebar-wrapper' > Letakan Kode Di Bawah Ini Tepat Di Bawah Kode <b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'> <b:widget-settings> <b:widget-setting name='numItemsToShow'>10</b:widget-setting> <b:widget-setting name='showThumbnails'>true</b:widget-setting> <b:widget-setting name='showSnippets'>true</b:widget-setting> <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:title != ""'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='!data:showThumbnails'> <b:if cond='!data:showSnippets'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. --> <div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href'> <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' expr:title='data:post.title' height='180' width='300'/> </b:with> </a> </div> <b:else/> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='180' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2i4gJTV916e8tsiVNe83gSDy4hsgInegNppPGu-i4s49ToVyDpwziIDBmyoVc9a8vgh3LjfMqBK5j6nMqSmLP7MfzaGZgszHuYA10t_035sYJoedOR3vY7U1OL_3kCxsdstjvdvlJTnB6/s100/no-thumbnail.png' width='300'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div> <b:if cond='data:showSnippets'> <div class='item-snippet'><data:post.snippet/></div> </b:if> </div> <div class='clear'/> </b:if> </li> </b:loop> </ul> </div></b:includable> </b:widget>
Langkah Terakhir Cari Kode <b:includable id='main'> Letakan Kode Di Bawah Ini Tepat Di Bawahnya
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='!data:showThumbnails'> <b:if cond='!data:showSnippets'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. --> <div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href'> <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' expr:title='data:post.title' height='180' width='300'/> </b:with> </a> </div> <b:else/> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='180' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2i4gJTV916e8tsiVNe83gSDy4hsgInegNppPGu-i4s49ToVyDpwziIDBmyoVc9a8vgh3LjfMqBK5j6nMqSmLP7MfzaGZgszHuYA10t_035sYJoedOR3vY7U1OL_3kCxsdstjvdvlJTnB6/s100/no-thumbnail.png' width='300'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div> <b:if cond='data:showSnippets'> <div class='item-snippet'><data:post.snippet/></div> </b:if> </div> <div class='clear'/> </b:if> </li> </b:loop> </ul> </div>