How to Create Cool Colorful Recent Post Widget on Blog

The recent post widget or what we are familiar with with the latest article widgets serves to provide information to visitors to read the latest posts on the blog.

Previously I had made a tutorial on modifying cool popular post widgets with colors like rainbows. This popular post widget is a feature that is already available on blogger, therefore the use of this widget is far more than the recent post widget.

How to Create Cool Colorful Recent Post Widget on Blog
Different from the popular post widgets, this recent post widget is not available on the blogger feature, meaning that when you want to add a new widget usually in the blog layout section when you click add gadget, there will be quite a lot of widgets for you to use on the blog .

Because the latest article widget or recent post is not available on blogspot, we need to make it manually by using a little help with JavaScript code.

If you want to edit the appearance of this recent post widget you can use the CSS code, here I will give a css code that can make recent post widgets look cooler than usual with colorful colors like a rainbow.


If you are interested in making a recent post widget or want to modify it to make it look good and cool, please follow the steps below.

How to Create a Recent Post Widget on Blogger
1. Log in to Blogger.com.
2. Click Layout> Add Gadget> HTML / JavaScript.
3. Then Copy and Paste the JavaScript code below.

<div id = 'recent-wrapper' class = 'recent-wrapper'>
<ul id = "recent-posts"> </ ul>
<script>
// <! [CDATA [
numPosts = 10;
recentPosts (a) function {if (document.getElementById ("recent-posts")) {var e = a.feed.entry, title, link, content = "", ct = document.getElementById ("recent-posts") ; for (var i = 0; i <numPosts; i ++) {for (var j = 0; j <numPosts; j ++) {if (e [i] .link [j] .rel == "alternate") {link = e [i]. link [j] .href; break}} var title = e [i] .title. $ t; content + = '<li class = "recent-posts"> <a href = "' + link + '"title ="' + title + '"target =" _ blank ">' + title + '</a> </ li>'} ct.innerHTML = content}} var rcp = document.createElement ('script'); rcp .src = '/ feeds / posts / summary? alt = json-in-script & orderby = published & max-results =' + numPosts + '& callback = recentPosts'; document.getElementsByTagName ('head') [0] .appendChild (rcp);
//]]>
</ script>
</ div>
4. Click Save.

Note:
You can set the number of posts displayed in the recent post widget, how to simply change the code section of numPosts = 10; please change 10 to the amount you want. But my suggestion is not to change more than 10 posts.

How to Modify Cool Colorful Post Widget
1. Log in to Blogger.com.
2. Click Theme> Edit HTML.
3. Search code]]> </ b: skin> or </ style>.
4. Then Copy the CSS code below, then Paste before the code]]> </ b: skin> or </ style>.

/ * Recent Post * /
# recent-wrapper {display: block; position: relative; overflow: hidden; font-size: 15px}
# recent-wrapper ul {margin: 0; padding: 0; list-style-type: none;}
# recent-wrapper ul li {position: relative; padding: 10px 35px 10px 10px! important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
# recent-wrapper ul li: first-child {background: # E11E28; width: 100%}
# recent-wrapper ul li: first-child: after {content: "01";}
# recent-wrapper ul li: first-child + li {background: # FD3C03; width: 97%}
# recent-wrapper ul li: first-child + li: after {content: "02";}
# recent-wrapper ul li: first-child + li + li {background: # FECB09; width: 94%}
# recent-wrapper ul li: first-child + li + li: after {content: "03";}
# recent-wrapper ul li: first-child + li + li + li {background: # 6EBE27; width: 91%;}
# recent-wrapper ul li: first-child + li + li + li: after {content: "04";}
# recent-wrapper ul li: first-child + li + li + li + li {background: # 149A48; width: 88%;}
# recent-wrapper ul li: first-child + li + li + li + li: after {content: "05";}
# recent-wrapper ul li: first-child + li + li + li + li + li {background: # 15d3c3; width: 85%}
# recent-wrapper ul li: first-child + li + li + li + li + li: after {content: "06";}
# recent-wrapper ul li: first-child + li + li + li + li + li + li {background: # 288abb; width: 82%}
# recent-wrapper ul li: first-child + li + li + li + li + li + li: after {content: "07";}
# recent-wrapper ul li: first-child + li + li + li + li + li + li + li {background: # 863e86; width: 79%}
# recent-wrapper ul li: first-child + li + li + li + li + li + li + li: after {content: "08";}
# recent-wrapper ul li: first-child + li + li + li + li + li + li + li + li {background: # 71264b; width: 76%}
recent-wrapper ul li: first-child + li + li + li + li + li + li + li + li: after {content: "09";}
# recent-wrapper ul li: first-child + li + li + li + li + li + li + li + li + li {background: # 502234; width: 73%}
# recent-wrapper ul li: first-child + li + li + li + li + li + li + li + li + li: after {content: "10";}
# recent-wrapper ul li: first-child: after,
# recent-wrapper ul li: first-child + li: after,
# recent-wrapper ul li: first-child + li + li: after,
# recent-wrapper ul li: first-child + li + li + li: after,
# recent-wrapper ul li: first-child + li + li + li + li: after,
# recent-wrapper ul li: first-child + li + li + li + li + li: after,
# recent-wrapper ul li: first-child + li + li + li + li + li + li: after,
# recent-wrapper ul li: first-child + li + li + li + li + li + li + li: after,
# recent-wrapper ul li: first-child + li + li + li + li + li + li + li + li: after,
# recent-wrapper ul li: first-child + li + li + li + li + li + li + li + li + li: after
{position: absolute; top: 5px; right: 5px; line-height: 1em; text-align: center; color: rgba (0,0,0,0.2); font-size: 23px! important; font-weight: 700}
# recent-wrapper ul li a {color: white; text-decoration: none}
5. Click Save theme.

Note:
The CSS code above works if the latest article or recent post widget that you use is no more than 10 posts, if you display more than 10 posts in the recent post widget then it won't look cool anymore.

That's an article about how to make a colorful widget recent post on a blog, the way is quite easy right? Good luck and hopefully useful.
 

Post a Comment

0 Comments