Customize Blogger Popular Post Widget With CSS (Valid AMP)

Popular Post widget is important to be installed on the blog, especially for bloggers who use blogger cms. Installing popular post widgets and other widgets such as related post can decrease bounce rate or bounce rate for your blog.

But many bloggers who regret that popular widget post blogger default is too simple. For that, many who want to change the look of the widget.

Well, for you blogspot users and want to change the look of popular widget post, I will share it. Complete with his tutorial and CSS code. This code can be installed in your blogger template AMP.

1. The first thing needed is to add the Post Popular Widget in the Layout menu on the blogger dashboard. Then select add popular post widget.

2. Then the second one, go to the Themes menu and click Edit HTML.

3. Add the popular post CSS code in your AMP template. Please copy and paste the following code between the amp-custom code.

 /* CSS Popular Post AMP IDN Blogger - Hafid */


/* Popular Post */


.PopularPosts ul{font-family:'Fira Sans', sans-serif;list-style:none;margin:0 auto;padding:0;overflow:hidden;width:100%}


.PopularPosts li,.PopularPosts li amp-img,.PopularPosts li a,.PopularPosts li a amp-img {margin:0;padding:0;list-style:none;border:none;background:none;outline:none;}


.PopularPosts ul li {margin:0 auto 10px;position:relative;overflow:hidden;line-height:1em;list-style:none;padding:10px;background: #F1F3F4;border-radius: 25px;}


.PopularPosts ul li a:hover {color:#38a3d1;}


.PopularPosts li a{color:#333;font-weight:500;font-size:16.40px;list-style:none;line-height:1.2em;display:block;overflow:hidden}


.PopularPosts ul li amp-img {width:90px;height:90px;float:left;display:inline-block}


.PopularPosts .item-thumbnail {display: flex;align-items: center;justify-content: center;border-radius:99em;overflow:hidden;float:left;margin:0px 20px 0 0;position:relative}


.PopularPosts .item-snippet{display:block;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:12px;color:#aaa;overflow:hidden;margin:4px 0 0;display:none}


.PopularPosts .item-title {padding:0;margin:0;text-align:left}

4. Now you need to replace all the popular post widget code that was already added, and replace it with the code below. Look at the picture below:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1' visible='true'>

    <b:includable id='main'>

        <b:if cond='data:title != &quot;&quot;'>

            <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'>

                                    <data:post.title/>

                                </a> <b:else/>

                                <!-- (2) Show only snippets -->

                                <div class='item-title'>

                                    <a expr:href='data:post.href'>

                                        <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 ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>

                                <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>

                                    <div class='item-thumbnail'>

                                        <a expr:href='data:post.href' target='_blank'>

                                            <b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 700) : data:post.thumbnail' var='image'>

                                                <amp-img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='170' layout='responsive' width='280' /> </b:with>

                                        </a>

                                    </div> <b:else/>

                                    <div class='item-thumbnail'>

                                        <a expr:href='data:post.href' target='_blank'>

                                            <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwN3hk2SowqH-f5FSSse783pobdbPIQ7Mv5ppzPT_5it7rcWbeCOnuzsIVmfqQuKx3hSE5Mok8au_OX5bqr72e0D_fmHw6AA0Qh3Qqs4c_gsdxgUZmy6ANqoPSPVS8Yt0wh5Zm7U_YGWyq/s100/no-thumbnail.png' width='100' /> </a>

                                    </div>

                                </b:if>

                                <div class='item-title'>

                                    <a expr:href='data:post.href'>

                                        <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>