Adding Popular Posts Slider in Blogger

<style type = "text / css"> 
Ul.featured-widget-list, Ul.featured-widget-list li {margin: 0; padding: 0; list-style: none; position: relative} Ul.featured-widget -list li {display: none} ul.featured -widget-list li: nth-child (1) {display: block; line-height: 0} ul.featured-widget-list img {border: 0; width: 100 %; height: auto} ul.featured- widget-list .featuredbg {width: 100%; height: 100%; position: absolute; z-index: 2; left: 0; top: 0; opacity: .6; background -image: url (https://3.bp.blogspot.com/-1_Vnfz23h0E/V0m7kzHpgiI/AAAAAAAALlU/f763ScY-PBc2UnqNX3Tf20lyvHxtRo9qwCLcB/s400/overlay-bg.png); background -position: 0% 100%; background-repeat: repeat-x} ul.featured-widget- list .featuredbg: hover {opacity: .1} ul.featured-widget-list h5 {position: absolute; left: 0; right: 0; text-align: center; bottom: 10px; z-index: 2; color: #fff; margin: 0; text-transform: capitalize; padding: 10px 20px; line-height: 1.9em; font: 16px 700 ' droid arabic Kufi ', sans-serif; overflow : hidden} Ul.featured-widget-list li: hover h5 {bottom: 30px} Ul.featured-widget-list .featured-meta {font: 11px ' droid arabic Kufi ', sans-serif; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; z-index: 2; color: #fff; opacity: 0} ul.featured-widget-list h5, ul.featured-widget-list .featured- meta {-webkit-transition: all 0.3s ; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} ul.featured-widget-list li: hover .featured-meta bottom {: 20px; opacity: 1} .feat-buttons {position: absolute; top: 50%; left: 0; z-index: 5; width: 100%} 
.feat-buttons a {text-indent: -9999px ; margin: 0 7px; width: 15px; height: 15px; padding: 9px; background: # 000; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacity = 60)"; filter: alpha (opacity = 60 ); - moz-opacity: 0.6 ; -khtml-opacity: 0.6; opacity: 0.6; position: relative; -webkit-border-radius: 50%; - moz-border-radius: 50%; border-radius: 50% ;}. feat-prev {float : left;}. feat-next {float: right;}. feat-buttons a.feat-prev :: before, .feat-buttons a.feat-next :: before {content: ""; width: 0; height : 0; border-width: 6px 7px; border-style: solid; border-color: transparent #fff transparent transparent; position: absolute; top: 50%; margin-top: -6px; left-margin: -11px; left: 50%} 
.feat-buttons A.feat next-:: before {r.jpg-color: transparent transparent transparent #fff; margin-left: -3px} 
</ style> 
<div id = "Featuredbwidget"> </ div> 
<script type = 'text / javascript'> 
// <! [CDATA [ 
Featuredbwidget ({ ListURL : "Https://mudwnp.blogspot.com/", FeaturedNum : 9, ListbyLabel : false , FeathumbSize : 350, interval : 3000, autoplay : true, FeaturedID: "# Featuredbwidget" }); function Featuredbwidget (a) {(function (e) {var h = {ListURL: "", FeaturedNum: 3, FeaturedID: " ", feathumbSize: 300, interval: 5000, autoplay: false, loadingFeatured:" nextfeatured ", pBlank:" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq5P6BnOYmKRwC1CHoFZUZvwPc-rgOaFXDtea0pyDXq1UrXLfjIA00-wU6Dx9GIjef8yRKIoLAmdNuTFa87KuuYQ_92paO_cybeExT6PF1PNWu2IRbPxsXxioa3SlxjVFFjhSzV_i0pw4/s500/no-image. png ", byMonth: [" January "," February "," March "," April "," May "," June "," July "," August "," September "," October "," November ", "December"], listbyLabel: false}; h = e.extend ({}, h, a); var g = e (h.featuredID); var d = h.featuredNum * 200; g.html ( '<div class = "featslider"> <ul class = "featured-widget-list"> </ ul> <div class = "feat-buttons"> <a href="#" class="feat-prev"> Prev </ a> <a href="#" class="feat-next"> Next </a> < / div> </ div> '); var f = function (w) {var q, k, m, u, x, p, t, v, r, l = "", s = w.feed.entry; for (var o = 0; o <s.length; o ++) {for (var n = 0; n <s [ o] .link.length; n ++) { if (s [o] .link [n] .rel == "alternate") {q = s [o] .link [n] .href; break}} if ( " media $ thumbnail "in s [o ]) {u = s [o] .media $ thumbnail.url.replace (/ \ / s [0-9] + \ - c / g," / s "+ h.feathumbSize + "-c")} else {u = h.pBlank.replace (/ \ / s [0-9] + (\ - c | \ /) /, "/ s" + h.feathumbSize + "$ 1")} k = s [o] .title. $ t; r = s [o] .published. $ t.substring (0,10); m = s [o] .author [0] .name. $ t; x = r .substring (0,4); p = r.substring (5,7); t = r.substring (8,10); v = h.byMonth [parseInt (p, 10) -1]; l + = '< li> <a href="'+q+'"> <div class = "featuredbg"> </ div> <img class = "featuredthumb" src = " '+ u +'" /> <h5> '+ k +' < / h5> </a> <div class = "featured-meta"> <span class = "fdate"> <span class = "fday"> '+ t +' </ span> <span class = "fmonth"> ' + v + '</ span> <span class = "fyear">' + x + '</ span> </ span> - <span class = "fauthor">' + m + "</ span> </ div> </ li> "} e (" ul ", g) .append (l) .addClass (h.loadingFeatured)}; var c = function () {e (h.featuredID +" .feat-next "). click ()} ; var b = function () { e.get ((h.listURL === ""? window.location.protocol + "//" + window.location.host:h.listURL)+"/feeds/posts/summary "+ (h.listbyLabel === false?" ":" / - / "+ h.listbyLabel) +"? max-results = "+ h.featuredNum +" & orderby = published & alt = json-in-script ", f, "jsonp"); setTimeout (function () {e (h.featuredID + ".feat-prev"). click (function () {e (h.featuredID + ".featslider li: first"). before (e (h. featuredID + ".featslider li: last" )); return false}); e (h.featuredID + ".feat-next"). click (function () {e (h.featuredID + ".featslider li: last"). after (e (h.featuredID + ".featslider li : first")); return false}); if (h.autoplay) {var i = h.interval; var j = setInterval (c, i); e (h.featuredID + ".featslider li: first"). before (e (h.featuredID + ".featslider li: last")); e (h.featuredID + ".featslider"). hover (function () {clearInterval (j)}, function () {j = setInterval (c , i)})} e ( "ul", g) .removeClass (h.loadingFeatured)}, d)}; e (document) .ready (b)}) (jQuery)} ; //]]> </ script>