How To Make Youtube Videos Responsive in Blog

Youtube Videos Responsive

Live Demo Here

MY BACKLINK - YouTube is a video sharing website The most popular today is where my friend can upload videos, watch videos, or it could be to generate revenue from youtube adsense account by registering via youtube.

Many advantages offered by this youtube sites, one of which is the video embed feature that can mate to add and can be viewed directly on the blog. However, by adding the video will reduce the value of SEO blog because the iframe element and the zoom was not responsive if the screen size is reduced.

In this article My Backlink will give a youtube video tricks to become responsive and will not reduce the value of SEO blog. Here's how its application:

1. Go to Blogger >> Template >> Edit HTML >> Add the code below before the ]]></b:skin> or </style>

/* Youtube Responsive */
.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

2. Add the following code before the </body>

<script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>

3. Save Template

4. Next to the add video in the sidebar or post blog, use the code below:

Youtube Videos Responsive


<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/gWG-_WQz3qM">
</div>
</div>
</div>

Examples of link embed youtube video :

Youtube Videos Responsive


Copy the embed youtube link like the screenshot above, and then store them in your HTML code above.

For responsive youtube video codes you can apply in the sidebar of a blog or in a blog post, all according to your wishes which you want to post your blog responsive youtube video.
Read More

How To Make Responsive Floating Ads with Close button in Blog

Responsive Floating Ads


MY BACKLINK - This time My Backlink will give a tutorial on how to advertise drift (Fixed banner ad or text) that has been unresponsive to additional blog the close button below.

Most people start a blog as a hobby, but there is also the purpose to make friends, increase sales online store, make money and so forth. As a means of supporting the activity of blogging, my friend can put advertising space on the blog to help advertisers promote their products.

Banner ads that float with additional buddy close button may often encounter in a blog or forum that installed it. The close button serves as an alternative if the visitor was annoyed because he had read the content was blocked by floating banner.

Responsive Floating Ads

Here's How to Install Floating Ads Responsive with Close Button :

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

<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>
<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>
<div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='http://1.bp.blogspot.com/-_A83iDM6JYc/VhtxROLILrI/AAAAAAAADK4/aM4ikIA6aqI/s1600/btn_close.gif' title='close button' style='vertical-align:middle;'/></a></div>
<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
<a href='#' title='Banner ad here'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner iklan disini' src='http://3.bp.blogspot.com/-9h86Fhn6zZU/VhtxRDTM4qI/AAAAAAAADK0/fQN3Z00kWwk/s1600/arlina-tea.png'/></a>
</div>
</div>

Change width and banner ads on the code marked according to your wish.

Save Template

Note:
Responsive Floating Ads is very good for use on a mobile site to see.
Read More

SNews Magazine Responsive Blogger Template

My Backlink - SNews is the most efficient blogger template for your magazine , news editorial, newspaper website. It has a lot of option that magazine website need. This Blogger template has ability to change layout for each categories, breadcrumbs for post and category, social widget, post widget that has many options to sort and much more. This theme shows you how cool and flexible blogspot magazine template can be. You can turn your magazine website into any possibilities you can think of.

SNews  Magazine Responsive Blogger Template


Template Information

Features :
  • 100% Responsive (Desktop,Tablet,Smartphone)
  • 10+ Recent Post by Labels Widget
  • Third Party Image Support
  • Support 4 Comments System (Blogger,Facebook,Disqus,Spot.IM)
  • Recent Post Widget
  • Random Post Widget
  • Featured Post Widget
  • Recent Comment Widget
  • Disqus Recent Comment Widget
  • Flickr Badge Widget
  • News Ticker Widget
  • Related Post Widget
  • Optimize SEO
  • Dropdown Menu
  • Tabel CSS
  • Recommended post [New]
  • Review Shortcode [New]
  • Post Pagination [New]
  • Ads ready
  • Top Social Icon
  • Social Counter Widget
  • Author Profile
  • Google CSE
  • Page Navigation
  • ShortCodes
  • Compatible with major browsers (IE9+,Mozilla,Chrome,Safari)
  • Professional admin layout, help you easy work with blog layout
  • Support RTL
  • Custom Error 404 Page
  • Archive Page
  • Support Advance Editor: upload background images, change background color, key colors, fonts
  • Support Print CSS and allow visitors share articles email
Read More

How to Install Widget Recent Post Responsive Slider in Sidebar Blog

MY BACKLINK - 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.

Widget Recent Post Responsive Slider in Sidebar Blog

Live Demo Here

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 a Simple Responsive Recent Posts in Blogspot

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(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/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://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: "http://mybacklink86.blogspot.com: Replace http://invisiontheme.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.
Read More

How to Make a Simple Responsive Recent Posts in Blogspot

MY BACKLINK - 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.


Live Demo Here

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
Read More