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.

Berbagi Tutorial

How to Create Recent Post on a Unique Blog Widget

Posting Komentar