How to Create a Cool Widget Popular Post on a Blog

Table of Content [Hide]

     

    How to Create a Cool Widget Popular Post on a Blog

    Inputlearn.com -- Popular Post is a widget that shows the most popular articles that are many and often read by visitors. There are various types of popular post designs, but surely you are tired of the appearance that is just like that. Therefore, we will make it look more interesting in our discussion this time.

    By displaying an attractive Popular Post, it can at least attract blog visitors to see our Popular Post so that it could be that the visitor clicks on our article which is often read by others.

    Well, on this occasion we will Create a Popular Post Widget Like Arlina Design. I recommend the look of this one because of its beautiful design and is pleasing to the eye. Although the appearance is simple, I think this is already quite cool because of the decoration in the title that is interesting with the addition of an icon next to it.


    1. Go to Blogger > Theme > Edit HTML.

    2. Please find the code ]]></b:skin> and put the code below right above it.

    /* POPULAR POST BY INPUTLEARN.COM */
    .popular-posts {background: linear-gradient(127deg, #de0985, #f18241);}
    .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 #df0d83;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: '';}

    If you are a viomagz template user and want to remove the Number Count widget popular post. Please find the code. Numberedpopularposts please remove all CSS styles contained in them.

    If you are a user of another template and want to remove the Number Count widget popular post, please search for it through the inspect element fit cursor in one of the number count widget popular posts, then look for the CSS count code (usually located at ::before or ::after). If so, please find the code in your template, if you have found it, please delete the CSS, or remove the CSS code linkage.

    3. If your template doesn't have a Number Count in the popular post widget, you just install the CSS code above (no.2).

    4. Next, you guys Jump to the Popular Post Widget.

    Popular Post Widget.

    5. Then you guys find the code <data:title/> and place the code below right after the code.

    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
        <path fill="#FFD15C" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />
    </svg>

    Change the color code on the section I marked to change the color of the icon tag

    6. After that hit Save. Make sure that Image Thumbnails and Snippets have been disabled for the Widgets to work properly.

    Related: How to Make Your Blog Load Faster, Remove Blogger Default Script

    Cover

    Thus our discussion about How to Create Label Widgets Like Arlina Design on Blogger will hopefully be useful for all of you. If you have anything to ask please just comment below.

    Show Comments

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel