How to make popular post responsive like the original: 100% WORK

Home Blogging how to make responsive popular posts like Arlina: 

100% WORK Touch To Gain - On this occasion, I will give a tutorial on how to make popular post responsive like Arlina Design. How to make popular post responsive-like-arlina-design As we know, that Arlina is a blogger who is quite famous for her template works, many templates that have been produced by Arlina are viral go templates, this viral go template is often used by Arlina Design. One that makes me interested in the viral go template is the popular post widget, because I think the popular post widget looks interesting and cool, that's why I'm interested in making it.

However, before we make it, it would be nice for you to backup the template first, so that if an error occurs you can go back to using a backup template. How To Make Responsive Popular Post Like Arlina Design

Step 1: log in to your blogger account

Step 2: enter the Themes >> Edit HTML menu

Step 3: then copy the code below, then paste the code directly above the code]]> </ b: skin>

/* POPULAR POST touchtogain.blogspot.com */
.popular-posts {background: linear-gradient(127deg, #17a2b8, #17a2b8);}
.PopularPosts ul li:hover{background: #3333330f;}
.popular-posts ul li a {color:#fff;}
.popular-posts ul li a:hover {color:#fff;}
.PopularPosts h2 {text-indent: 20px;border-top: 2px solid #17a2b8;margin-bottom: 0px;border-bottom: none;width: 100%;padding-bottom: 15px;background: #fff;padding-top: 15px;}
.PopularPosts h2 span {margin-left:20px}
.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li {margin: 0 0;padding: 0 0;list-style:none;border:none;outline:none;}
.PopularPosts .widget-content ul {margin: 0;list-style:none;counter-reset:num;}
.PopularPosts .widget-content ul li img {display: block;width: 70px;height: 70px;float: left;}
.PopularPosts .widget-content ul li {margin: 0;counter-increment: num;position: relative;border-bottom: 1px solid rgba(0,0,0,0.08);border-top: 1px solid rgba(255,255,255,0.12);}
.PopularPosts ul li:last-child {margin-bottom: 0px;}
.PopularPosts ul li .item-thumbnail-only::after, .PopularPosts ul li .item-content::after, .PopularPosts ul li > a::after {background: #efefef;}
.PopularPosts .item-title {line-height: 1.6;margin-right: 8px;min-height: 40px;font-weight: bold;}
.PopularPosts .item-thumbnail {float: left;margin-right: 8px;}
.PopularPosts .item-snippet {line-height: 1.6em;margin-top: 8px;opacity: 0.925;}
.PopularPosts ul li > a {font-weight: bold;    font-size: 14px;}
.PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {margin-left: 28px;}
.PopularPosts ul li > a {display: block;padding: 8px 20px;font-size: 15px;font-weight: 400;min-height: 45px;}
.PopularPosts h2 svg {margin-right: 15px;float: right;display: inline-block;width: 20px;height: 20px;vertical-align: -5px;background-repeat: no-repeat!important;content: '';}

Step 4: next is to delete the code numbered popular posts, find the code below then delete all the code.

<b:include name='numberedpopularposts'/>

And delete all the code below as well

<b:includable id='numberedpopularposts'>
  <style>
  .PopularPosts ul li .item-thumbnail-only::before, .PopularPosts ul li .item-content::before, .PopularPosts ul li &gt; a::before {
   content: counter(num) !important;
   font-size: 30px;
   font-weight: bold;
   font-style: italic;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   text-align: center;
  }
  .PopularPosts ul li:nth-child(10) .item-thumbnail-only::before, .PopularPosts ul li:nth-child(10) .item-content::before, .PopularPosts ul li:nth-child(10) &gt; a::before {
   left: -10px;
  }
  .PopularPosts ul li .item-thumbnail-only::after, .PopularPosts ul li .item-content::after, .PopularPosts ul li &gt; a::after {
   content: &quot;&quot;;
   display: block;
   position: absolute;
   top: 32px;
   left: 9px;
   bottom: 0;
   width: 2px;
  }
  .PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {
   margin-left: 28px;
  }
  .PopularPosts ul li &gt; a {
   display: block;
   padding-left: 28px;
   min-height: 45px;
  }
  </style>
  </b:includable>

If you use the Viomagz template, you follow step number 4 to remove the popular post widget count number.  If you use another template, all you have to do is inspect the element and look for the CSS count code (usually located at :: before or :: after), delete all of the CSS code, or delete the linkage of the CSS code. Step 5: Save To add an ICON popular post, you can follow the steps below. How to Add the Popular ICON Post 

Step 1: enter the Themes >> Edit HTML menu 

Step 2: Please look for the code <div class = 'widget-content popular-posts'> 

Step 3: if you have found, then the next step is to copy the code below, then paste the code in the code <data: title /> HERE </h2> </ b: if>, Read HERE to put the code.
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#17a2b8" d="M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z" />
</svg>

Step 4: Finish To install the popular post widget, you can follow the steps below. How to Install the Popular Post Widget
Step 1: enter the LAYOUT menu
Step 2: then Add the Sidebar Gadget
Step 3: then select Popular Posts
Step 4: then you follow the picture below,

then Save  If you want to change the color of ICON and Background, you just need to change the color code # 17a2b8 with your color code. Conclusion: By using the popular post widget, visitors can see the articles being read on your blog, so visitors are interested in reading articles that are crowded. Until here you have been able to make responsive popular posts, hopefully the article can be useful for you all.

Output

Subscribe Our Newsletter