How to Create Recent Post Widget 2020 - BLOGHINT

How to Create Recent Post Widget 2020

Encrypting your link and protect the link from viruses, malware, thief, etc! Made your link safe to visit.



You must already know what a Recent Post is, so it seems I don't need to explain to you anymore,

so just get to the core of this post, which is Adding Recent Post Widget to Blog,
This Recent Post Fully Using Script, Not Using Deafult from his blog
First, Login to your blogger, select Layout> Add Gadget> Select HTML / JavaScript,
add the script below.

<style scoped='' type='text/css'>
ul.recent_posts_arlina{padding:0;background:#54a5db;counter-reset:popcount}
ul.recent_posts_arlina li{color:#fff;margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
ul.recent_posts_arlina li:hover{background:rgba(0,0,0,0.06)}
ul.recent_posts_arlina li i{display:none;font-style:normal}
ul.recent_posts_arlina li:last-child{border-bottom:none}
ul.recent_posts_arlina li .item-titlex{display:inline-block;color:#fff;padding:0 10px 0 0;font-weight:700}
ul.recent_posts_arlina li .item-titlex a{color:#fff;padding:0 10px 0 0;font-size:14px;}
ul.recent_posts_arlina li img{display:none;width:300px;height:auto;}
ul.recent_posts_arlina li:first-child{border-bottom:none;padding:0}
ul.recent_posts_arlina li:first-child img{margin:0;width:100%;height:180px;overflow:hidden;display:block}
ul.recent_posts_arlina li:first-child .wrapinfo{margin:0;width:100%;height:180px;overflow:hidden;display:inline-block}
ul.recent_posts_arlina li:first-child .item-titlex{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
ul.recent_posts_arlina li:hover:first-child .item-titlex{background:rgba(44,62,80,1);transform:translate(0,0)}
ul.recent_posts_arlina li:first-child .item-titlex a{font-size:15px;color:#fff}
ul.recent_posts_arlina li .item-titlex:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
ul.recent_posts_arlina li:first-child i{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}
ul.recent_posts_arlina li:first-child i:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
ul.recent_posts_arlina li:hover:first-child i{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
ul.recent_posts_arlina li:first-child .item-titlex:before{top:25%}
ul.recent_posts_arlina li:first-child .item-titlex:before{color:#fff}
ul.recent_posts_arlina li:last-child .item-titlex:before{left:3%}
ul.recent_posts_arlina li:hover .item-titlex:before{color:rgba(255,255,255,1)}
</style>
<script style='text/javascript' src='https://cdn.rawgit.com/Arlina-Design/redvision/6b5256a3/terbarulagi.js'></script>
<script style='text/javascript'>
var numposts=10,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!0,numchars=130;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>

and give the title according to what you want, and click Save / Save.

For the CSS you can edit as you like, this
Recent Post that has is (Name is listed in the Script),

To reduce the number of post views, edit the JavaScript,

I have not tried, but in The JS will have a text showing the sign, see there is a script like this,

var numposts=10,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!0,numchars=130;

You can try to change it, according to what you want,
I don't guarantee it will change, because that's just my opinion, and I haven't tried it either,
if people who frequent coding, surely he will know,
If you are still confused with my posts, give your comments according to the topic.

for the demo you can see in this template. However, if one day I change the template, you can see the Demos below. Click Demo
DEMO

0 Response to "How to Create Recent Post Widget 2020"

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel