In this post, I will tell you a way you can use the article to give a new look to your site.. This is one of my best widgets. Whose information I will give today in this content Install The Blogger Featured Post Slider Widget In The Sidebar .
. Friends, you know about the slider. Slider means runway And it looks great too. With the new design . Like if your favorite content that you see in the running scenes, how much would it look like? Just think once. This trick will tell you the most.
It will run automatically and will continue. You can do your best post show in it. Or even the category of your blog. Very funny script. I am using it in my other site. And my job is to tell me every secret. That's what I'm telling..
PLEASE NOTE :-
. But remember one thing that it will work only on Blogger. Will not work in WordPress And add it to the sidebar itself.....
So let me explain about the process of adding it. So that you all understand. There is a very simple way.
WIDGET Setting :-
blog url :- http://pyarmeindia.blogspot.com
Change this url to your blog url.... (Example.com ) or ( example.blogspot.com)
MaxPost : 8 ( change the number of content you displayed )
tagName: False :- ( "false" you can change this word to replace your blog's category name. Example :- "RELATION" " love " Etc )
Now maybe you all have understood how easy it is to add it. So start using it right away. So give a new look to your site and content. With this hope, now I get sick.
Must read : How To Report Copied Content In Google Dmca
11 things that husbands should never say to their wife
So if you get some benefit from this tip Install The Blogger Featured Post Slider Widget In The Sidebar then share it in social media. So that everyone can get help......
. Friends, you know about the slider. Slider means runway And it looks great too. With the new design . Like if your favorite content that you see in the running scenes, how much would it look like? Just think once. This trick will tell you the most.
It will run automatically and will continue. You can do your best post show in it. Or even the category of your blog. Very funny script. I am using it in my other site. And my job is to tell me every secret. That's what I'm telling..
PLEASE NOTE :-
. But remember one thing that it will work only on Blogger. Will not work in WordPress And add it to the sidebar itself.....
So let me explain about the process of adding it. So that you all understand. There is a very simple way.
Trending/popular Post Slider and Widget
- Open the blogger dashboards
✓ otherwise visit blogger.com
✓ Now see Layout option.
✓ Click layout. Now click the Creat a New Html/JavaScript widget
✓ Now copy below code first. And paste in it.......
✓ save the widget and See The Results. So go to your website url. 😉<style scoped="" type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.rcentside li:nth-child(2){left:0;top:50% }ul.rcentside li:nth-child(3){left:50.5%;top:50% }ul.rcentside li:nth-child(4){width:100%;left:0;top:75% }ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{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/AVvXsEgy2tQpUJdSuvoEC2b9QeR1LazRxOJSRRwh91oAkvhZ1fzWygFV1J5SejbVcIWbB4ts8KV6dqYo7V1VIlWWkaMaDtz7kPjUnOPna2_nGyjj5-vuiEv2pgE5KNR_hybc4XpcjvJADAgqOWU/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }
</style>
<div id="featuredpostside"></div>
<script type='text/javascript'>
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></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.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$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.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSide({
blogURL: "http://pyarmeindia.blogspot.com",
MaxPost: 8,
idcontaint: "#featuredpostside",
ImageSize: 300,
interval: 5000,
autoplay: true,
tagName: false
});
//]]>
</script>
Featured Recent Posts Thumbnail Slider Widget Plugin
blog url :- http://pyarmeindia.blogspot.com
Change this url to your blog url.... (Example.com ) or ( example.blogspot.com)
MaxPost : 8 ( change the number of content you displayed )
tagName: False :- ( "false" you can change this word to replace your blog's category name. Example :- "RELATION" " love " Etc )
Now maybe you all have understood how easy it is to add it. So start using it right away. So give a new look to your site and content. With this hope, now I get sick.
Must read : How To Report Copied Content In Google Dmca
11 things that husbands should never say to their wife
So if you get some benefit from this tip Install The Blogger Featured Post Slider Widget In The Sidebar then share it in social media. So that everyone can get help......
Tags:
Blogger Tips
Hey gourabdesign, thanks for sharing this, I can really add feature post widget in my blog. But I can't feature the post specially by only one label but not by recent posts.
ReplyDeletePlease help me out!
And thanks in advance....:-)