How to Install Widget Recent Post Responsive Slider in Sidebar Blog

MyBacklink86 - This post I will provide a tutorial that is not less cool with the previous tutorial article, which is about how to Add Recent Post Responsive Slider in Sidebar Blog. Widget Recent Post Slider This is quite interesting because it brings up a list of the latest articles slider with thumbnails and effects that will continue to run automatically. Not only that, this widget can also be arranged to bring the latest article by label our blog.


This widget fits written in the blog sidebar pages, because the size is just right to put on the sidebar. Okay, the rest follow the following tutorial.


READ ALSO:
How to Make Recent Post Thumbnail Grid Display Responsive

Add Widgets Recent Post Slider in Sidebar

1. Go to Blogger & gt; Layout & gt; Create a new widget HTML / Javascript & gt; Then copy the code below in it

<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/AVvXsEhINcSDpmdczVFVWdcMQEruOTGQdTGFSrxottNU5A4QgRb9vbcpVAs18WXnTXdrKPByjNA0nvvSDPxcQMUGXUBVdKhEPtC0ddggCg4hDN37A8TBkIoggTJdkGzUK2Zym8mF_6PRunNBTcA/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: "https://mybacklink86.blogspot.com",
  MaxPost: 8,
  idcontaint: "#featuredpostside",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false
});
//]]>
</script>

2. Save the widget and see the results.

Settings widget

blogurl: "https://mybacklink86.blogspot.com: Replace http://url_of_your_blog.blogspot.com with the url of your blog
MaxPost: 8 : The number of posts to be displayed
imagesize : The size or dimensions of the image in units of pixels
interval : The time needed when post slider switch
autoplay: true : To turn off auto slider, change the autoplay: true with autoplay: false
tagname: false : To add a new article based on the label, replace false with the name of a particular label. Eg Blogger: tagname: "Blogger"

Thus tutorial How to Install Widget Recent Post Responisve Slider in Sidebar Blog, may be useful.

LEARN MORE

How to Make a Simple Responsive Recent Posts in Blogspot

MyBacklink86 - Simple blog that will attract visitors much more than look too crowded. Crowded could have in terms of coloring is too much use of different colors or excessive use of widgets.

In addition to reducing the loading speed of a blog, use excessive widget also unsightly. By him that, this time My Backlink will give a tutorial use a simple widget recent posts.

Although simple, but it is quite spectacular recent posts because it can adapt to the theme of the blog.


READ ALSO:
How to Install Widget Recent Post Responsive Slider in Sidebar Blog

How to Make Recent Post Thumbnail Grid Display Responsive


How to make it simple, just follow the steps below.

1. First please copy and paste the following script into your sidebar blogspot. Figures 5 red marked simply replaced in accordance with the number of posts you want to display.

<script>
//<![CDATA[
function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<5;i++){var 
entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};

document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts\"></scr" + "ipt>");
//]]>
</script>

2. After that, go to the Edit your HTML and paste the following code just above the </head>.

<style type='text/css'>
#recent-posts{
    width:auto;
    padding:0 10px;
    margin:0 auto;
    border:1px solid #ddd;
}
#recent-posts ul,#recent-posts li {
    list-style:none;
}
#recent-posts a{
    text-decoration:none;
}
#recent-posts li{
    border-top:1px solid #ddd;
    padding:6px 0
}
#recent-posts li:first-child{
    border-top:none;
}
</style>

3. After clicking Save and view the results on your blog.

Good Luck

LEARN MORE

How to Make a Pop Under Ads Alone in Blog

MyBacklink86 - How To Make Ads Pop Under Your Own Blog? It is very easy, there is not even one minute, then the ad can be directly installed on your favorite blog. But the problem is not easy or not, but rather whether the existence of these ads are favored by visitors or not? Well, it is important to note when you have no intention to advertise this model in your blog.

As we all know that pop under ads are ads that appear in a new window on the browser, which is where these ads appear automatically, alias unwanted visitors. These ads usually appear when there is an interaction of visitors, ie clicking on links contained in our blog.

Here MY BACKLINK share how, please look carefully ya:

1. Log in to Blogger.
2. Select Layout >> Add Gadget >> HTML / JavaScript.
3. Paste the code below into >> HTML / JavaScript.

<script  type="text/javascript">  function addEvent(obj, eventName, func){       if (obj.attachEvent)      {      obj.attachEvent("on" + eventName,  func);      }      else if(obj.addEventListener)      {       obj.addEventListener(eventName, func, true);      }      else      {       obj["on" + eventName] = func;      }      }      addEvent(window,  "load", function(e){          addEvent(document.body, "click",  function(e)          {             if(document.cookie.indexOf("bkc=lyk")  == -1)             {          params = 'width=' + screen.width;           params += ', height=' + screen.height;                  params += ',  top=1000, left=1200px ,scrollbars=yes';                  params += ',  fullscreen=yes,width=1000,height=800';                  var w = window.open("http://mybacklink86.blogspot.com", 'window', params).blur();                   document.cookie = "bkc=lykshoptinhoc";                  window.focus();              }          });      });  </script>

Note:
Please change the URL of the red with url address of the blog you want.

Pop under ads will only appear twice, namely when we visit our blog, and then we clicked on a link on our blog. Click the link to the third and so on, pop under ads will no longer appear.

LEARN MORE