MY BACKLINK

Create a Youtube AMP Video Playlist On AMP Blog

Live Demo Here
My Backlink - Sometimes a Blogger needs to display a Youtube video playlist on the blog, be it a music video playlist, video tutorial, or other video.

For non AMP blogs, to display youtube video playlist, can use the embed code provided by Youtube which formatted iframe code.

But for blogs that use AMP HTML, to display Youtube video playlist there are 2 ways that is by using amp-youtube and amp-iframe.

Video embed code provided by Youtube is usually as below.

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLI7-RQrPntL1sK7bbBVJHlO8zJjkTxofX" frameborder="0" gesture="media" allowfullscreen></iframe>

The marked code is the embed URL of the Youtube playlist.

First you have to do is place the JS AMP Youtube code below inside <head>

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Well to display the Youtube playlist in AMP HTML with amp-iframe actually I've discussed in the postlist video playlist Youtube for AMP HTML blog, please make it like this.

<amp-iframe width="560"
      height="315"
      layout="responsive"
      sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups"
      frameborder="0"
      allowfullscreen="allowfullscreen"
      src="URL_EMBED_PLAYLIST_YOUTUBE">
  </amp-iframe>

Please replace URL_EMBED_PLAYLIST_YOUTUBE with the URL of the embed Youtube playlist above the one I marked.

But to watch Youtube video playlists using amp-iframes, playlist with amp-iframe should be stored approximately 75% from the top edge of the screen when the page first opened before scroll, and make sure it has js amp-iframe installed.

Read Also:
Create a responsive youtube video on Non AMP blog

Create youtube video autoplay and no autoplay on AMP blog

Create youtube video autoplay on blog No AMP blog

And to display a playlist of Youtube videos using amp-youtube, please see the code below.

<amp-youtube
      width="480"
      height="270"
      layout="responsive"
      data-videoid="ID_VIDEO"
      data-param-listType="playlist"
      data-param-list="ID_PLAYLIST">
  </amp-youtube>

ID_VIDEO please replace with your youtube video ID and replace also ID_PLAYLIST with ID of your youtube video playlist, , for example the code below.

https://www.youtube.com/watch?v=QhxU_95FXY8&list=PLI7-RQrPntL1sK7bbBVJHlO8zJjkTxofX

For example as below:

<amp-youtube
      width="480"
      height="270"
      layout="responsive"
      data-videoid="QhxU_95FXY8"
      data-param-listType="playlist"
      data-param-list="PLI7-RQrPntL1sK7bbBVJHlO8zJjkTxofX">
  </amp-youtube>

With amp-youtube we can display youtube videos anywhere either above or below post, and make sure you have js amp-youtube installed on your blog.

Hope this article useful to you and good luck.

LEARN MORE

Creating Parallax Adsense In Blogs Non-AMP

MyBacklink86 - We can create parallax ads on AMP blogs easily with the help of js amp-fx-flying-carpet.

Of course it will not work on non AMP blogs because it's specifically for blogs with AMP templates.

So what if we want to create a parallax ad on non AMP blog?

Parallax ads can be for banner image, ads with iframe and for adsense.

If you want to try it, please you follow the steps below.

Please save the code below and place it above </head>

Click

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.paralax_div {
  position: relative;
  overflow: visible;
  width: 300px;
  height: 250px;
  margin-right: 20px;
  display: inline-block;
  float: left;
  z-index: 9999;
}
.paralax_div > div {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(auto auto auto auto);
}
.paralax_div > div > div {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  margin: 0 auto;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.paralax_div > div > div > div {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 50%;
  top: 0;
  border: none;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: #ddd;
}
.paralax_div > div > div > div > * {
  margin: 0;
  margin-top: 0;
}
.paralax_div > div > div > div > a {
  width: 100%;
  height: 100vh;
}
.paralax_div img,.paralax_div iframe,.paralax_div ins {
  height: 600px;
  width: 300px;
}
.clear {
  clear: both;
  display: block
}

@media screen and (max-width:640px) {
  .paralax_div {
    width: 100%;
    height: 250px;
    margin: 0 auto;
    float: none;
  }
  .paralax_div > div > div > div {
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .paralax_div > div > div {
    width: 100%;
    left:0;
    text-align: center;
  }
  .paralax_div img {
    margin: 0 auto;
    width:auto;
    max-width:100%;
    height:auto;
  }
}
@media screen and (max-width:320px) {
  .paralax_div iframe,.parallax_banner ins {
    margin: 0 auto;
    width:100%;
    height:600px;
  }
}
/*]]>*/
</style>
</b:if>

Then save the code below and place it above this code <div class='post-body entry-content' ........

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="paralax_div">
  <div>
    <div>
      <div>
        <img src="https://4.bp.blogspot.com/-RzxVWJw3Uho/WcKesObgvwI/AAAAAAAAEsg/-5IWkUTJIAYacQNaGvc0bqbXl2Svy35xQCLcBGAs/s640/Adsense%2BIn%2BThe%2BMiddle%2BOf%2BBlog%2BArticles.png" alt="banner" width="300" height="250" />

      </div>
    </div>
  </div>
<span class="clear"/>
</div>
</b:if>

If you use it for your image banner ads (banner with height 600px and width 300px), please replace the url image in the code above.

If you use to ad code with iframe or adsense (300x600 ads), please remove the <img> tag above and replace your adsense code.

LEARN MORE

How to Make Easy Youtube AMP Video on Blog

MyBacklink86 - In this post my backlink will share how to make Youtube AMP video on AMP blog.

If you have a video on Youtube and you want to display it on your blog then you can make a Youtube video and save embed youtube video playlist on your blog.

If you are using AMP blog, you can also display Youtube AMP video by using Youtube AMP code.

Please follow how to make youtube AMP video below.

1. Please put this code just below <head> code.

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Example

<head>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
.......
.......
</head>
</body>

2. Show Youtube AMP video singles on your AMP blog please use the code below.

No Autoplay

Embed YouTube videos via the video id. The id is found in every Youtube video page URL.

<amp-youtube width="480" height="270" layout="responsive" data-videoid="VIDEO ID HERE">
</amp-youtube>

Replace VIDEO ID HERE with your Video Youtube ID (data-videoid = "VIDEO ID HERE")

Autoplay

Setting autoplay will automatically play/pause the YouTube video as it is scrolled into/out of view on supported browsers.

The YouTube video is automatically muted before autoplay starts, when the user taps the video, the video is unmuted.

If the user has interacted with the YouTube video (e.g., mutes/unmutes, pauses/resumes, etc.), and the video is scrolled in or out of view, the state of the video remains as how the user left it.

<amp-youtube width="480" height="270" layout="responsive" data-videoid="VIDEO ID HERE" autoplay></amp-youtube>

Replace VIDEO ID HERE with your Video Youtube ID (data-videoid = "VIDEO ID HERE")

This code can be stored in your blog widget or in your blog post.

Make it easy to implement Youtube AMP code in Blog.

Hope this article useful to you.

Good luck

LEARN MORE

How To Create Adsense In The Middle of Blog Post

MY BACKLINK - In this post my backlink discuss about tutorial how to install adsense in the middle of blog post. Actually there are so many articles that discuss about this tutorial, but coincidence in this blog has not been discussing this tutorial so I make this tutorial post to you.

The benefits of tutorial install adsense in the middle of this blog post that you can further increase Google Adsense revenue on your blog with a higher clickthrough rate and usually will more interest to readers with ad content that is displayed because of the position of a strategic ad in the middle of the blog post .

Here's how to install adsense in the middle of blog posts

The way is very easy, here you just need to replace the specific code in the template and replace it with the code that I will give in the guide below.

1. Please login to Blogger and select the blog you want to edit.

2. Click the Template menu, click the Edit HTML button, then search and replace this code <data:post.body/> in your template with the code below.

Read also How to Install Google AdSense In-Feed Ads on Blogger

Inside the template you will find some <data:post.body/> code depending on the template you are using, try it one by one until the ads appear in the page of your blog article.

Read also How to Create an AMP Adsense Unit on Blogger


<div expr:id='"ads1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">
SCRIPT ADSENSE THAT HAS BEEN DIPARSE
</div>
<div expr:id='"ads2" + data:post.id'><data:post.body/></div>
<script type="text/javascript">
var obj0=document.getElementById("ads1<data:post.id/>");
var obj1=document.getElementById("ads2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(" ");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1);}
</script>

Please note, the above script will place the ad exactly in the middle of the post, or in other words, the script will count all the words in your article and divide it into 2 (see the code line var t=s.substr(0,s.length/2);), then insert ads at that point.

To parse the Adsense code, can use this tools parse here.

3. Save the template and see the results.

Well, please apply the tutorial how to install adsense in the middle of this blog post on your blog. Hopefully will be able to improve CTR ads on your blog.

LEARN MORE

Magenet Good Alternative Adsense, It's Payment Proof

MY BACKLINK - To earn money from blog or site is one of the target of the voters blog or website. For now the owners of blogs or sites to make money from his blog is to register a blog or site into a publisher partner ads in Google Adsense .

Which ad publisher does not know Google Adsense.

Google Adsense is one very good land to make money from blogs. Owners of Google Adsense it self is Google.

But not a few blog owners or sites that are denied to become a publisher partner on Google Adsense.

And it is still a lot of Google Adsense alternative is good and really pay. One of them that we recommend for you is Magenet.

Magenet is an ad publisher site whose ad type is Text Links Ads.

Signing up to be an ad publisher in magenet is not difficult alias very easy.

The terms and conditions of registering to publishers in magenet are not strict.

Free domain blogs are also registered to publishers magenet (blogspot.com, wordpress, etc ...).

The better the SEO of your blog or website in search engines the more likely advertisers who are interested in advertising on your blog or website.

How to register for an ad publisher in magenet.?

Here's how:

You visit the magenet site Join Now
Enter the name and email you will list (contact register directly in front of magenet site) can also register with facebook account.
See the picture below.

Magnet Good Alternative Adsense, It's Payment Proof

4. Later there will be a notification email that goes into the email you are listing as a publisher in magenet if there are advertisers who want to place Text Links Ads on your blog or website.

5. Before you install ads from magenet, you can also reject advertisers' advertisements to be posted on your blog or website if the price of ads is low or the type of ads violate your blog or site TOS (Google Adsense TOS).

This is proof of payment from magenet already received MY BACKLINK from 5 Blogs registered partner publisher in magenet :

What do you think.?

Are you interested in registering your blog or website into a publisher in magenet.?

sign up publisher

Hopefully this article useful to you.

Good luck.

LEARN MORE