In This Video, I Have Shown You How To Add Stylish Slider In Blogger In Telugu. In This Blogger Sidebar Video, I Have Shared Your How To Add Slider In Blogger Sidebar In Telugu Without Any Issues. The slider can be added to Sidebar In Blogger using HTML code. Adding a slider to the sidebar is one of the easiest ways to grab user attention on your website and also it can generate impressions to your posts.
1.Backup Your Blogger Template.
Go To > Blogger > Theme > 3 dots > Backup > Download.
2. Open HTML Editor.
Go To > Blogger > Layout > Add Gadget.
3. Select HTML Gadget.
4. Edit and Paste the below code in your HTML Gadget.
You can change:-
Change (listURL: "https://asdasdq2.blogspot.com/",) with your website URL.
Change (featuredNum: 5,) How many posts you want to display.
Change (listbyLabel: false,) Add your label in false area.
Change (feathumbSize: 350,) Size of your slider
Change (interval: 5000,) In how many seconds the next post to display?
Change (autoplay: false,) If True Slider will automatically slide if the false user must press next button to see the next post.
CODE:-
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrIJYUEWWvAtot0XUVPJB9eXbRRLoxXk-z1gYsaQSTvAEB13SEjD0rl7ugAXKJdIxQsVUMECDJrsmJxtSjMBhp3f5EbhfpTRFtUZYMRnX0hp4MJ7xLYQ519X2rnaYKKfRDAgGzwfcJrlY/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;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;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:5px;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;margin-left:-11px;left:50%}.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}</style><div id="featuredbwidget"></div><link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script type='text/javascript'>//<![CDATA[featuredbwidget({
listURL: "https://asdasdq2.blogspot.com/",featuredNum: 5,listbyLabel: false,feathumbSize: 350,interval: 5000,autoplay: false,
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/AVvXsEg6TDo-fKnxIEsOqz-1ZOzKGDoVtl163iSK6nxm_hzqgHyPx2SPhaXMNQJcPvdlpHtDqKvv0Sl9BNOfxzDmfXXxja2R4MKZ9huGV1fkFCfTcCHYqzoB5WjwoXQrHBv6J-Fl-u0hEJYzfmE/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],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>
So This is How To Add Stylish Slider In Blogger In Telugu In 2020. In this post, I have shown you How To Add Stylish Slider In Blogger and also in post. If your facing any trouble while adding the above code let me know in the comments.
Post a Comment
Post a Comment