Saturday, November 18, 2017

Customize Blogger Popular Post Widget With CSS (Valid AMP)

How to Make Post Popular Widget and Valid Blogger AMP with CSS


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 */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 10px;overflow:hidden;border-radius:0 0 5px 5px;border-top:none;}
.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 {margin:0;list-style:none;color:#64707a;}
.PopularPosts ul li amp-img {display: flex;align-items:center;display:block;width:auto;height:100%}
.PopularPosts ul li .item-thumbnail {display:block;margin:0 0 0 10px;width:65px;height:65px;border:1px solid #f5f5f5;overflow:hidden;float:right;border-radius:5px ;background-position:center;transition:all 0.5s ease-out}
.PopularPosts ul li .item-thumbnail:hover{-webkit-filter:brightness(0.4);transition:all 0.5s ease-out}
.PopularPosts ul li {background-color:#fff;margin:0;padding:10px 0;padding-right:5px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;display:block;min-height:67px}
.PopularPosts ul li:first-child {border-top:none;}
.PopularPosts ul li:last-child {border-bottom:none;}
.PopularPosts ul li a:hover {color:#4285f4;}
.PopularPosts ul li .item-title a, .PopularPosts ul li a {color:#000;transition:all .3s;display:block;height:100%;}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#4285f4;}
.PopularPosts .item-snippet{display:none}
.profile-img{display:inline;opacity:1;margin:0 6px 3px 0;}
.PopularPosts .item-title {padding-bottom:.2em;padding:0 5px;}

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="Trending" type="PopularPosts" version="1">

        <b:widget-settings>

          <b:widget-setting name="numItemsToShow">8</b:widget-setting>

          <b:widget-setting name="showThumbnails">true</b:widget-setting>

          <b:widget-setting name="showSnippets">false</b:widget-setting>

          <b:widget-setting name="timeRange">LAST_MONTH</b:widget-setting>

        </b:widget-settings>

        <b:includable id="main">

  <b:if cond="data:title"><h3>

<data:title></data:title></h3>

</b:if>

  <div class="widget-content popular-posts">

<ul>

      <b:loop values="data:posts" var="post">

<li>

        <b:if cond="data:showThumbnails == &quot;false&quot;">

          <b:if cond="data:showSnippets == &quot;false&quot;">

            <!-- (1) No snippet/thumbnail -->

            <a expr:href="data:post.href" href="https://www.blogger.com/null"><data:post .title=""></data:post></a>

          <b:else>

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

            <div class="item-title">

<a expr:href="data:post.href" expr:title="data:post.title" href="https://www.blogger.com/null"><data:post .title=""></data:post></a></div>

<div class="item-snippet">

<data:post .snippet=""></data:post></div>

</b:else></b:if>

        <b:else>

          <b:if cond="data:showSnippets == &quot;false&quot;">

            <!-- (3) Show only thumbnails -->

            <div class="item-thumbnail-only">

<b:if cond="data:post.thumbnail">

                </b:if><br />

<div class="item-thumbnail">

<a expr:href="data:post.href" href="https://www.blogger.com/null" target="_blank">

                    <amp-img expr:alt="data:post.title" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:title="data:post.title" expr:width="data:thumbnailSize">

                  </amp-img></a>

                </div>

<div class="item-title">

<a expr:href="data:post.href" expr:title="data:post.title" href="https://www.blogger.com/null"><data:post .title=""></data:post></a></div>

</div>

<div class="clear">

<b:else>

            <!-- (4) Show snippets and thumbnails -->

            </b:else><br />

<div class="item-content">

<b:if cond="data:post.thumbnail">

                </b:if><br />

<div class="item-thumbnail">

<a expr:href="data:post.href" href="https://www.blogger.com/null" target="_blank">

                    <amp-img expr:alt="data:post.title" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:title="data:post.title" expr:width="data:thumbnailSize">

                  </amp-img></a>

                </div>

<div class="item-title">

<a expr:href="data:post.href" expr:title="data:post.title" href="https://www.blogger.com/null"><data:post .title=""></data:post></a></div>

<div class="item-snippet">

<data:post .snippet=""></data:post></div>

</div>

<div class="clear">

</div>

</div>

</b:if>

        </b:else></b:if>

      </li>

</b:loop>

    </ul>

</div>

</b:includable>

      </b:widget>


Please see the image for how to change the code of popular post widget.

5. Lastly, please SAVE and see the results.

If an error occurs on your HTML page, please make sure the quickedit code is deleted on the Popular Post widget.
Disqus Comments