Tutorial

Showing posts with label Tutorial. Show all posts

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

How to Install AdSense In-Feed Ads on Blog

For a demo of Google AdSense In Feed Ads please see your home page MY BACKLINK

MY BACKLINK - After some time rarely update on this blog on this occasion Arlina Design will share the installation of the latest features of Google AdSense, which features In-Feed Ads ad units that can be installed on the blog. This ad unit is quite interesting, because it will be installed between the list of articles following the form of customizable post layouts.

For those of you who want to add this feature you can follow the following simple steps.

How to Install Google AdSense In-Feed Ads on Blogger

First, open your Google Adsense dashboard. Click the My ads > Content > Ad units > Then click the button New ad units

Next select in-feed ads

In the next step please select one type of display according to your blog.

Next step, go to Blogger dashboard > Themes > Click the Edit HTML button > Find the code below

<b:loop values='data:posts' var='post'>

Replace the code into the code below

<b:loop values='data:posts' var='post' index='x'>

Note: do not forget to back up your blog template first.

Next look for this code

<div class='post-outer'>

Add the code below just below the code in the step above <div class='post-outer'>.


<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:x==1'>
<div class='post'>
YOUR CODE SCRIPT NATIVE ADS
</div>
</b:if>
<b:if cond='data:x==3'>
<div class='post'>
YOUR CODE SCRIPT NATIVE ADS
</div>
</b:if>
</b:if>

Then the result will be like this.


<div class='post-outer'>...</div>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:x==1'>
<div class='post'>
YOUR CODE SCRIPT NATIVE ADS
</div>
</b:if>
<b:if cond='data:x==3'>
<div class='post'>
YOUR CODE SCRIPT NATIVE ADS
</div>
</b:if>
</b:if>

Replace YOUR CODE SCRIPT NATIVE ADS with your In-Feed Ads ad code, save the template and see the results.

LEARN MORE

How to Create an AMP Adsense Unit on Blogger

MyBacklink86 - When new to AMP HTML, it's hard to place the right Adsense ad unit on the AMP blog.

And now Google has given an explanation about the placement of Adsense ad units for AMP HTML blog. And after I try, ad units can look great on all device sizes.

If you are still confused in placing an ad unit Adsense on AMP blog, please refer to this post to complete.

Usually the code of an Adsense ad unit will look like below :


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
   style="display:inline-block;width:120px;height:600px"
   data-ad-client="ca-pub-1234567891234567"
   data-ad-slot="1234567890"></ins>
<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

The code marked above is the code needed for the amp ad unit.

For Top Display (Above The Fold)

The top-of-the-fold display is the screen display once the blog is open (the first view is visible before the screen is scrolled down). For ad units on this top view screen (such as an ad below the header), it is highly recommended to use a ad unit fixed-height 100px (the width of the ad will follow its width, while the height will remain 100px). That way, the ads that show up are ads with a height in the 100px range.

Please use the amp ad code as below


<amp-ad
layout="fixed-height"
height="100"
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

Use the data-ad-client and data-ad-slot of your Adsense ad units.

For On-Screen Display Ads On-Scroll (Below The Fold)

Below the fold is the screen that appears after the page is scrolled. Usually these ads are stored under posts or above and below comments.

For this ad it is recommended to use an ad unit with a height of 250px. Here I use layout="fixed-height" so the ads that appear are ads that are high in the 250px range.

Please use the code amp ad as below


<amp-ad
layout="fixed-height"
height="250"
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

Use the data-ad-client and data-ad-slot of your AdSense ad units.

And make sure you've installed js amp-ad below </head> .


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

LEARN MORE

How To Make Youtube Videos Responsive in Blog

MyBacklink86 - 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:


<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 :

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.

LEARN MORE

How To Make Responsive Floating Ads with Close button in Blog

MyBacklink86 - 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.

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ5VRRilwJ4mw1y6mPbx1TsXhMi3zENq9pOtmXwPubQWt8i0gObA-RuOkjxxqQtmjD2APVFJunmxSbmCjSs4dtDeubm_Tw65NzL89kn8uy-ptDxgFpRdo8Ao6ndBFw19cqcu8oQze3kPxv/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.

LEARN MORE