How to Install Google AdSense In-Feed Ads on Blogger

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.

How to Install Google AdSense In-Feed Ads on Blogger

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

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

How to Install Google AdSense In-Feed Ads on Blogger

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

How to Create an AMP Adsense Unit on Blogger

Adsense AMP

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

Read More

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