Tutorial

  • Android
  • Blogger
  • Printer
  • Computer
  • Laptop
  • MedSos
  • How to Create Recent Post on a Unique Blog Widget

    Recent post widgets or we know how the Recent Post mentions on a Blog are necessary for visitors to easily see new ones. There are a lot of widgets that we can use from just the text only to using the image thumbnail. With this feature, visitors will feel a long time to read our writing.

    Here I did not make for my buddy but I have the CSSnya code and HTML code to display the latest post. The trick is fairly straightforward and does not add a heavy burden page speed Blog. It looks quite unique and interesting although at first glance looks simple because it does not use images. READ ALSO: Recent Post widgets with tabs Next and picture.

    How to create Recent Post (recent posts) widgets on a unique Blog

    Step 1: Please go to your Dashboard Blogger and select Theme > > Edit HTML > > put the CSS code below exactly where the other CSS code is laid out. Just look for the code "Blogger CSS " and place the code below exactly below that CSS. Don't forget Save.
     
     /* Artikel Terbaru */
    
     .Recent Articles ul li {
        border-bottom: 2px dotted $(label.border.color);
        padding-bottom: 8px;
        margin-bottom: 8px;
        font-weight: 500;
    }
    .list-label-widget-content ul li, .LinkList ul li, .PageList ul li {
        border-bottom: 2px dotted $(label.border.color);
        padding-bottom: 5px;
    }
    .artikel-terbaru ul li:before, .list-label-widget-content ul li:before, .LinkList ul li:before, .PageList ul li:before {
        content: "\f14b";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        margin-right: 6px;
    }
    .artikel-terbaru ul li:before {
        content: "\f14b";
    }
    .list-label-widget-content ul li:before {
        content: "\f07b";
    }
    .LinkList ul li:before {
        content: "\f14c";
    }
    .PageList ul li:before {
        content: "\f249";
    }
    

    Step 2: Next go to Layout > > Add Ganget

    Step 3: Click the + sign on the HTML/JavaScript option

    Step 4: Write in the title field "Recent Articles" and enter the HTML code in the content underneath.

    <div class="artikel-terbaru">
    <script>
    function RecentArticles(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="
    <li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>
    ";document.write(n)}document.write("</ul>
    ")}
    </script>
    <script src="/feeds/posts/summary/?max-results=10&amp;alt=json-in-script&amp;callback=artikelterbaru"></script>
    </div>
    

    Last click Save.

    Pretty easy to open how to create a Recent Post or latest posts widget on Blog.

    Want to subscribe to the Latest Post Update Notification? Please Join with Us Berbagi Tutorial Online WhatsApp Grup or Blogger SEO Knowledge On Google News
    Artikel Terkait:
    Help Support this Blog with Like FansPage, Subscribe and Share. If anything is unclear, please leave a message in the comments column
    Comment Now