Blogger Popular Posts With Amp Carousel
Popular posts ialah salah satu cara untuk menambah page view blog. Untuk itu perlu tampilan yang menarik pada popular posts supaya menarik perhatian pembaca.Salah satu cara menciptakan popular posts pada blog AMP menjadi tampilan yang menarik ialah dengan memanfaatkan amp-carousel. Dengan sedikit modifikasi pada arahan widget popular post, maka jadilah carousel popular post yang dapat disimpan di bab atas atau bawah blog ataupun di sidebar.
Untuk demonya dapat dilihat di bab bawah blog ini (jika aku belum merubahnya hehehe...)
Nah jikalau ingin mencobanya pada blog AMP Anda, silahkan ikuti langkahnya di bawah ini.
Langkah Pertama
Silahkan gunakan CSS di bawah ini untuk tampilan carousel popular posts. .PopularPosts{background:#fff;padding:10px 30px 30px}
.PopularPosts amp-img{width:280px;height:180px;}
.PopularPosts h2{position:relative;overflow:hidden;margin:0 0 10px}
.PopularPosts h2 div{padding:0 10px 0 0;display:inline;float:left;}
.PopularPosts h2:after{content:'';display:inline-block;float:left;position:absolute;top:0;height:15px;margin:8px 0 0 0;width:100%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis2e_yRG-HGn9a8RQrPfDnaYRcWmciwA8pEDyTHlZP4HTWKUdfcrbAIgb-OFZAERoBuA4mSTNrQ3It-xw22apLTokQbCl1RnCFw-hUGkZXRdbyIFrjvC3BQpmcwetxblaKfn5lAEwI-UUU/s1600/repeat-bg.png);opacity:.9;}
Langkah Kedua
Silahkah copy arahan HTML widget popular post di bawah ini untuk di atas (di bawah header) dan bawah blog (di atas footer). Jika sudah ada widget popular post di sidebar, silahkan hapus widgetnya. <b:section class='carousel' id='carousel' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><div><data:title/></div></h2></b:if>
<div class='widget-content popular-posts'>
<amp-carousel height='180' layout='fixed-height' type='carousel'>
<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. -->
<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, 280) : data:post.thumbnail' var='image'>
<amp-img expr:alt='data:post.title' expr:src='data:image' height='180' width='280'/>
</b:with>
</a>
</b:if>
</b:if>
</b:loop>
</amp-carousel>
</div>
</b:includable>
</b:widget>
</b:section>
Jika ingin menampilkan di bawah Blog Posts, silahkan copy arahan di bawah ini
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><div><data:title/></div></h2></b:if>
<div class='widget-content popular-posts'>
<amp-carousel height='180' layout='fixed-height' type='carousel'>
<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. -->
<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, 280) : data:post.thumbnail' var='image'>
<amp-img expr:alt='data:post.title' expr:src='data:image' height='180' width='280'/>
</b:with>
</a>
</b:if>
</b:if>
</b:loop>
</amp-carousel>
</div>
</b:includable>
</b:widget>
Kemudian simpan di bawah arahan berikut
<b:includable id='threaded_comments' var='post'>...</b:includable>
</b:widget>
Sehingga penampakannya menyerupai berikut
<b:includable id='threaded_comments' var='post'>...</b:includable>
</b:widget>
KODE HTML POPULAR POST DI SINI
</b:section>
Jika ingin menampilkan di sidebar, silahkan ganti widget popular post yang usang dengan arahan di bawah ini.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><div><data:title/></div></h2></b:if>
<div class='widget-content popular-posts'>
<amp-carousel height='180' layout='fixed-height' type='carousel'>
<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. -->
<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, 280) : data:post.thumbnail' var='image'>
<amp-img expr:alt='data:post.title' expr:src='data:image' height='180' width='280'/>
</b:with>
</a>
</b:if>
</b:if>
</b:loop>
</amp-carousel>
</div>
</b:includable>
</b:widget>
Dan pastikan Anda sudah menyimpan arahan amp-carousel menyerupai di bawah ini di atas
</head> <script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/>
Sumber https://www.kompiajaib.com/
0 Response to "Blogger Popular Posts With Amp Carousel"
Posting Komentar