Skip to content Skip to sidebar Skip to footer

How to Create a Recent Post Grid Widget with Labels on a Blog

Recent Post is a widget that functions to display the last post we published or updated, usually we often see this widget on websites that discuss games, downloads or movies. On this occasion, I will give 2 views so that inwepo friends can choose at will. Without further ado, let’s review this widget.

1. First Step: Open Blogger – Layout.

2. Second Step: Add or Edit widget Html/Java Script and input code under:

3. Third Step: Open Templates – Edit Html.

4. Fourth step: input code Java Script right above code to make it easier to find press Ctrl + F in the column edit Html.

5. Fifth step: choose from one style this and put code place above ]]> or ]]

Style 1

/* Grid Recent Post by Label */ul.recent-by-tag{overflow:hidden;padding:0 15px}.recent-by-tag img{width:100px;height:100px;margin-right:10px;margin-bottom:5px}.recent-by-tag li{width:100px;margin-bottom:10px;margin-right:12px;text-align:center;list-style:none;padding:11px 18px;background:#f1f1f1;border:1px solid #ddd;float:left;line-height:1.3em!important}.recent-by-tag li a{list-style:none;color:#555;font-weight:400;font-size:13px!important;width:1-0px;overflow:hidden;text-overflow:ellipsis;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.recent-by-tag li a:hover,.recent-by-tag li:hover a{color:#f35858!important}.recent-by-tag .btndown{display:none}@media screen and (max-width:640px) {ul.recent-by-tag{padding:0;margin-left:10px}}@media screen and (max-width:480px) {ul.recent-by-tag{margin-left:0}}

Style 2

/* Grid Recent Post by Label */ul.recent-by-tag{overflow:hidden;padding:0 15px}.recent-by-tag img{width:80px;height:80px;margin-left:10px;margin-bottom:5px}.recent-by-tag li{width:100px;margin-bottom:10px;margin-right:12px;text-align:center;list-style:none;padding:11px 18px;float:left;line-height:1.3em!important}.recent-by-tag li a{list-style:none;color:#111;font-weight:700;font-size:12px!important;overflow:hidden;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.recent-by-tag .btndown{color:#88c425;font-weight:400;text-transform:uppercase;padding:2px 4px;font-size:11px!important;border:1px solid #88c425}.recent-by-tag .btndown:hover{color:#fff;background:#88c425}@media screen and (max-width:640px) {ul.recent-by-tag{padding:0;margin-left:10px}}@media screen and (max-width:480px) {ul.recent-by-tag{margin-left:0}}

save templates.

maybe this was a discussion about blog widgets, if you have any suggestions please comment.