How To Make Recent Post Widget On Blogger Website
Hello, everyone! Today i will share an article about how to create recent post update articles on blogger. In this tutorial we try to make a beautiful recent post widget.Read also How to make beautiful table on blogger
Blogger have some widget their own, like popular posts, author profile, contact form, blog status, translator and more. But blogger don't have a recent post widget their own, and today we will make it by this tutorial on blogger.
How to make a beautiful recent post widget on blogger
First go to your blogger dashboard, Then go to layout, Then go to sidebar area, Click on add new gadget.
Copy all of the showing codes and pest on blogger template
<style scoped='' type='text/css'>
ul.recent_posts_arlina li{display:inline-block;position:relative;width:100%;margin:0 auto 20px auto;padding:0;transition:all .3s linear}ul.recent_posts_arlina li:last-child{margin:0 auto 10px auto}.recent_posts_arlina .wrapinfo{background:#f5f5f5;display:inline-block;margin:auto;overflow:hidden;z-index:2;position:relative;float:left}ul.recent_posts_arlina li img.recent_thumb{width:100%;height:auto}.recent_posts_arlina{position:relative;float:left;width:100%;margin:10px 10px 5px 0;padding:0;font-size:.9rem}ul.recent_posts_arlina li a{line-height:normal;position:absolute;color:#fff;font-size:18px!important;left:15px;bottom:15px;right:15px;top:30%;text-align:center;z-index:12}ul.recent_posts_arlina li a:hover{color:#fff;text-decoration:underline}.recent_posts_arlina i{font-style:normal;color:#999;font-size:13px}.recent_posts_arlina .wrapinfo:before{content:'';background:rgba(40,40,40,.7);color:#fff;position:absolute;left:0;bottom:0;right:0;top:0;z-index:11;padding:10px;transition:all .3s}.recent_posts_arlina .wrapinfo:hover:before,.recent_posts_arlina:hover .wrapinfo:before{background:rgba(40,40,40,.9)}
ul.recent_posts_arlina li a.url{bottom:0;left:0;right:0;top:initial;font-size:12px!important;padding:5px;background:#f39c12}
@media screen and (max-width:768px){
#HTML50{display:none;margin:0}}
</style>Add javascript
<script style='text/javascript'>
var numposts=1,showpostthumbnails=!0,displaymore=!0,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=62;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>Add this
<script style='text/javascript' src='https://cdn.jsdelivr.net/gh/Indzign/theme@master/recentpostsidebar.js'></script>And done your widget complete how to make a beautiful recent post widget on blogger website.
Thank you for visiting us.
Post a Comment