MY BACKLINK

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

How To Easily Install SEO Smart Links in Blog

My Backlink - In this article my backlink will be sharing plugin SEO Smart Links & which is a WordPress plugin that works to change every word specified in an article be a link.

How to Work Smart SEO Plugin Link This plugin will read every word pal specified in the article. For example if my friend added the word SEO or Blogger in the plugin, then every word will be automatically turned into a link if at all in your blog article contained the word.

How to Install SEO Smart Links

Open Blogger > Template > Then add the following code before the</body>

<script type='text/javascript'>
function smartLink(){
    this.keywdHref = new Object();
    this.add = function(keyword, href){
        if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}
        this.keywdHref[keyword] =  href;
    }
    this.createAnchor = function(){
        var objs = document.getElementsByTagName(&quot;div&quot;);
        for(var i=0; i&lt;objs.length; i++){
            var obj = objs[i];
            if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){
                var content = obj.innerHTML;
                for(var keyword in this.keywdHref){
                    var href = this.keywdHref[keyword];
                    var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);
                    obj.innerHTML = newstr;
                    content = newstr;
                }
            }
        }
    }
    this.startScript = function(){
        var onLoad = window.onload;
        window.onload = function(){
            if(onLoad){onLoad();}
            setTimeout(&quot;f.createAnchor()&quot;, 100);
        }
    }
}
</script>
<script type='text/javascript'>
var f = new smartLink();
f.add(&quot;SEO&quot;, &quot;https://mybacklinks86.blogspot.com/&quot;);
f.startScript();
</script>

If you want the plugin above only appear on post pages only, please add a special conditional tags post page.

Save template

In the code that is marked with SEO by keywords pal specify and change https://mybacklinks86.blogspot.com/ with the url of your blog.

In the above code buddy can add more keywords below, as an example

f.add("SEO", "https://mybacklinks86.blogspot.com/"); f.add("Template", "https://mybacklinks86.blogspot.com/"); f.add("Blogger", "https://mybacklinks86.blogspot.com/");

Buddy can also add words into bold, for example.