Responsive Featured/Recent Post Widget For Blogger

This time I am going to share with you and other exciting and beautiful widget for blogger. This time we are going to make responsive featured or recent post widget for blogger and add it to Blogger blog.

Featured post and recent post widget for blogger shows up recent posts from your blogger blog and this widget is responsive to all devices you can see the demo if you want and resize your screen to see the responsiveness.

The best location to add this widget in blogger is footer or header of your blogger template because it's full width horizontal recent/featured post blogger widget.

I hope you will like this widget. This widget also shows the labels of posts when you hover over the post. If you are a web designer you can customize this widget in your own way whatever you like.

If you want to see the demo of this blogger widget you simply have to click the button below to view it.

View Demo

So below are the steps that you have to follow to add this widget in your blogger blog.

Follow these Steps:

Go to Blogger Dashboard
Go to Layout Section
Click Add Widget
Select HTML/Javascript Widget

Try to Add this widget in the header section on the footer section of your blogger template.

Now copy the source code provided below and paste it as widget content.

<style>
body {
    background: #f8f8f8;
    color: #000;
    font-family: 'Poppins',sans-serif;
    font-size: 16px;
    padding: 0;
    margin: 0;
    font-weight: normal;
}
a{text-decoration:none}
/* Featured Post */
#featured-posx-section{max-height:380px;overflow:hidden;margin:20px auto 0 auto}.featured-posx a{font-size:1em;color:#fff}.featured-posx a:hover{color:#fff}.main-post.featured-posx a{margin:0;font-size:17px}.featured-posx .col-post{float:left;position:relative;overflow:hidden;margin:0 10px 0 0;border-radius:5px}.featured-posx .secondary-post{width:31.5%;margin:0 0 10px 0;animation:moccaShine 1.25s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px;transition:all .4s}.featured-posx .secondary-post:nth-child(even){margin:0 10px 10px 0!important}.featured-posx .main-post{width:34.9%;padding:0;animation:moccaShine 1.25s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px;transition:all .4s}.featured-posx span{background:rgba(20,20,20,.85);color:#fff;font-style:normal;font-weight:600;position:absolute;font-size:11px;line-height:1.4;padding:3px 10px;top:10px;left:10px;z-index:3;border-radius:3px;opacity:0;visibility:hidden;transform:scale(0.5);transition:all .4s}#featured-posx-section:hover span{opacity:1;visibility:visible;transform:scale(1.0)}.featured-posx .main-post:hover span,.featured-posx .secondary-post:hover span{background:#f39c12;color:#fff}.featured-posx img{height:100%;transition:all .5s}.featured-posx .main-post img{height:380px;width:100%;object-fit:cover}.featured-posx .secondary-post img{height:185px;object-fit:cover;width:100%}.featured-posx .main-post:hover img,.featured-posx .secondary-post:hover img{backface-visibility:hidden;transform-style:preserve-3d}.featured-posx header{display:inline-block;position:absolute;background:rgba(40,40,40,.3);top:0;bottom:0;opacity:1;visibility:visible;left:0;right:0;padding:0;z-index:2;transition:all .4s}.featured-posx header:hover{background:rgba(40,40,40,.7)}.featured-posx .main-post h3,.featured-posx .secondary-post h4{position:absolute;bottom:5px;left:5px}.featured-posx .secondary-post h4{position:absolute;bottom:0;left:0}.featured-posx .main-post:hover h3,.featured-posx .secondary-post:hover h4{}.featured-posx .secondary-post header{padding:0}.featured-posx header h3{font-size:20px;margin:0}.featured-posx h4{font-size:14px;margin:0}.featured-posx header h3 a,.featured-posx header h4 a{display:block;padding:10px}.featured-posx .main-post:hover h3 a,.featured-posx .secondary-post:hover h4 a{color:#fff}.featured-posx .secondary-post:nth-child(4) span{transition-delay:.2s}.featured-posx .secondary-post:nth-child(5) span{transition-delay:.4s}.featured-posx .secondary-post:nth-child(6) span{transition-delay:.6s}.featured-posx .secondary-post:nth-child(7) span{transition-delay:.8s}.featured-posx:hover .secondary-post:nth-child(4) span,.featured-posx:hover .secondary-post:nth-child(5) span,.featured-posx:hover .secondary-post:nth-child(6) span,.featured-posx:hover .secondary-post:nth-child(7) span{transition-delay:initial}
  @media screen and (max-width:768px){
#featured-posx-section{margin:0 auto}.featured-posx .main-post{width:100%;border-radius:0}.featured-posx .secondary-post.col-post{display:none}}
@media screen and (max-width:640px){
#featured-posx-section{max-height:240px}.featured-posx .main-post img{height:240px}
</style>
  <script>
//<![CDATA[
function slderposx(_0x5fd3x2) {
    j = showRandomImg ? Math['floor']((imgr['length'] + 1) * Math['random']()) : 0, img = new Array, numposts1 <= _0x5fd3x2['feed']['entry']['length'] ? maxpost = numposts1 : maxpost = _0x5fd3x2['feed']['entry']['length'];
    for (var _0x5fd3x3 = 0; _0x5fd3x3 < maxpost; _0x5fd3x3++) {
        var _0x5fd3x5, _0x5fd3x7, _0x5fd3x8 = _0x5fd3x2['feed']['entry'][_0x5fd3x3],
            _0x5fd3x9 = _0x5fd3x8['category'][0]['term'],
            _0x5fd3xa = _0x5fd3x8['title']['$t'];
        if (_0x5fd3x3 == _0x5fd3x2['feed']['entry']['length']) {
            break
        };
        for (var _0x5fd3xb = 0; _0x5fd3xb < _0x5fd3x8['link']['length']; _0x5fd3xb++) {
            if ('alternate' == _0x5fd3x8['link'][_0x5fd3xb]['rel']) {
                _0x5fd3x7 = _0x5fd3x8['link'][_0x5fd3xb]['href'];
                break
            }
        };
        for (var _0x5fd3xb = 0; _0x5fd3xb < _0x5fd3x8['link']['length']; _0x5fd3xb++) {
            if ('replies' == _0x5fd3x8['link'][_0x5fd3xb]['rel'] && 'text/html' == _0x5fd3x8['link'][_0x5fd3xb]['type']) {
                _0x5fd3x5 = _0x5fd3x8['link'][_0x5fd3xb]['title']['split'](' ')[0];
                break
            }
        };
        if ('content' in _0x5fd3x8) {
            var _0x5fd3xc = _0x5fd3x8['content']['$t']
        } else {
            if ('summary' in _0x5fd3x8) {
                var _0x5fd3xc = _0x5fd3x8['summary']['$t']
            } else {
                var _0x5fd3xc = ''
            }
        };
        postdate = _0x5fd3x8['published']['$t'], j > imgr['length'] - 1 && (j = 0), img[_0x5fd3x3] = imgr[j], s = _0x5fd3xc, a = s['indexOf']('<img'), b = s['indexOf']('src="', a), c = s['indexOf']('"', b + 5), d = s['substr'](b + 5, c - b - 5), -1 != a && -1 != b && -1 != c && '' != d && (img[_0x5fd3x3] = d);
        for (var _0x5fd3xd = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], _0x5fd3xe = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], _0x5fd3xf = (postdate['split']('-')[2]['substring'](0, 2), postdate['split']('-')[1]), _0x5fd3x10 = (postdate['split']('-')[0], 0); _0x5fd3x10 < _0x5fd3xd['length']; _0x5fd3x10++) {
            if (parseInt(_0x5fd3xf) == _0x5fd3xd[_0x5fd3x10]) {
                _0x5fd3xf = _0x5fd3xe[_0x5fd3x10];
                break
            }
        };
        if (0 == _0x5fd3x3) {
            var _0x5fd3x11 = '<div class="main-post col-post"><a href="' + _0x5fd3x7 + '"><span class="blue">' + _0x5fd3x9 + '</span><img src="' + img[_0x5fd3x3] + '" height="340" width="640" alt=""></img></a><header><h3 class="entry-title"><a href="' + _0x5fd3x7 + '" title="">' + _0x5fd3xa + '</a></h3></header></div>';
            document['write'](_0x5fd3x11)
        } else {
            var _0x5fd3x11 = '<div class="secondary-post col-post" style="margin-right:0"><span class="blue">' + _0x5fd3x9 + '</span><a class="hover_play_small" href="' + _0x5fd3x7 + '"><img src="' + img[_0x5fd3x3] + '" height="200" width="320"></img></a><header><h4><a href="' + _0x5fd3x7 + '">' + _0x5fd3xa + '</a></h4></header></div>';
            document['write'](_0x5fd3x11)
        };
        j++
    }
}
imgr = new Array, imgr[0] = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh56Tb5LOI9loM_mhxo3VtUZvWD0yLQ95jhQV1ak3gKPdUl9j5XuoD_mWYrvjm7nkZZ2AP928DkOdtroyzNimuGQkBpg9VvPeUZnpCjw0PtnMUFxNrjyT25oQDk9wIHzst2Adb7UuJ2XWE/s1600/no_thumbnail2.jpg', showRandomImg = !0, aBold = !0, summaryPost = 150, summaryTitle = 50, numposts1 = 10, featured_numposx = '50'
//]]>
</script>
<div class='ct-wrapper' id='featured-posx-section'>
<div class='featured-posx padding clearfix'>
<script type='text/javaScript'>
document.write("<script src=\"https://www.softwebtuts.com/feeds/posts/default/?max-results="+featured_numposx+"&orderby=published&alt=json-in-script&callback=slderposx\"><\/script>");
</script>
</div>
</div>

Save Widget

That's it you have successfully added this responsive featured or recent post widget in blogger if you have any difficulty or any errors you can comment that in the comment section I will try to resolve it.

Do I have to make customization's?

Yes, you have to make some customization's in the above code you can see the highlighted text you can change anything that you like.

Conclusion:

In this today's article I have shared source code of responsive featured and recent post widget for blogger which you can add to your blogger blog. If you like this post share it with your friends and spread it all over the social media so that I can create better for you. Subscribe to notifications of this blog and get notifications daily.

Good Luck & Keep Creating!

source:softwebtuts.com

A4F

Responsive Featured/Recent Post Widget For Blogger