Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

How to Make a Widget Only Shown on Homepage Blog

Blogger Widget

How to Make a Widget Only Shown on Homepage Blog - Homepage is the main page of the website / blog, on this occasion we will discuss how to make the widget appear only on the homepage. To be dynamic and blogs seem neat, preferably some widgets that are considered essential and are only displayed on the main home page or homepage.
You want to make widgets appear only on the main page / homepage, follow the following steps:

1. Login to blogger.
2. Choose Template => Edit HTML => Expand Widget Templates checkbox.
3. Do not forget to backup templates so you can easily restore if something goes wrong.
4.'s Widgets use F3 or Ctrl + F. Example widget: Latest Articles.

<b:widget id='HTML5' locked='false' title='Latest Articles' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty --&gt
; <b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

5. Put the code <b:if cond='data:blog.url == data:blog.homepageUrl'> under <b:includable id='main'> and </b:if> above code </b:includable> as follows:

<b:widget id='HTML5' locked='false' title='Latest Articles' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

6. Then save the template
LEARN MORE

How to Make a Widget Only Appear On The Blog Posts

Blogger Widget

How to Make a Widget Only Appear On The Blog Posts - My Backlink this time will share a tips-tricks that only serves to show the widget on the blog post page. Illustrations like this, at some point we feel should install a widget which we think is important and must be present on our blog, but on the other hand, the home-page page has been cluttered and if imposed, it would be more chaotic and confusing. Well here is the method to show a widget only on the pages of blog posts into a workable solution to overcome these problems.

How do I make it? Not too difficult, but it requires precision and patience, because we have to add a script to the html-template blog series we are so in length and complicated, one can slightly damaged all blogs arrangements that we have built with such difficulty.

In this article I pointed to put Widgets Related Articles only on post pages. The original script is as follows widgets.

<b:widget id='HTML1' locked='false' title='Related articles' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>


To achieve such purposes we only need to add 2 additional course code or script that is <b:if cond='data:blog.pageType == &quot;item&quot;'> and </ b: if>, so that the configuration script into seperrti this:
<b:widget id='HTML1' locked='false' title='Related articles' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
LEARN MORE

How to Enable Ads.txt in Blogger

Blogger Now Already Supported Ads.txt

My Backlink - After Google introduced the search console beta version, it's now finally Google or Blogger releases ads.txt directly on the Blogger dashboard on January 31, 2018.

Ads.txt is an initiative of the Interactive Advertising Bureau Tech Lab (IAB) to promote and improve transparency in program advertising. This is an easy way for Adsense publishers to clearly point out to authorized buyers to sell their inventory.

Actually for Blogger Ads.txt already existed but now you can edit Ads.txt as you like and for you who get warning message like this.

Your earnings are at risk - One or more of your ads.txt files do not contain the AdSense publisher ID. Fix this issue right now to avoid having a serious impact on your revenue.


To enable Ads.txt on Blogger, you can set it in Blogger Dashboard > Settings > Search preferences > Monetization > custom ads.txt > Then click edit select Yes and fill in the following code in the column ads.txt.

How to Enable Ads.txt on Blogger

google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0


Please replace pub-0000000000000000 with your Adsense ID, then click Save changes.

Adsense ID can be found in Blogger dashboard or Google Adsense buddy like the example below.

How to Enable Ads.txt on Blogger

How to Enable Ads.txt on Blogger

To check whether Ads.txt is enabled, you can check in the browser search tab with links like this.

 http://www.your_domain.com/ads.txt

Replace your_domain with your blog address.

We suggest you activate ads.txt manually in all of your blogs from bloogers serving Adsense ads to ensure that we have activated ads.txt with the account currently in use, as in the tutorial above.

Similarly about How To Easily Enable Ads.txt on Blogger.

Good luck
LEARN MORE

Create Ads AMP 970x250 With Show Hide Ad Button

Adsense Billboard 970x250

MyBacklink86 - This is inspired by billboard adsense on Youtube, just check out the adsense at the top of the Youtube page of 970x250 billboard ad unit.

And there is no harm we try to experiment with this billboard advertising unit, who knows his rea is in the unit.

And it seems still not many bloggers who use this 970x250 billboard advertising unit, probably because of its large size so it takes up a lot of space on the blog.

For that, this ad unit we are equipped with show hide ad button, so if there are visitors who feel annoyed with this slot then the ads can be hidden as well as on the Youtube page also use the show hide ads button.

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

Please save the CSS code under the place above ]]></b:skin>.

/* Top Banner */
.top_banner{margin:20px auto;padding:0 10px 20px;position:relative;width:100%;max-width:990px;height:auto}
#close_topbanner,#open_topbanner{font-family:Roboto,sans-serif;position:absolute;padding:0;bottom:0;background:0 0;border:none;cursor:pointer;color:#888;font-size:15px;font-weight:500;height:20px;line-height:20px;}
#close_topbanner{right:10px}
#open_topbanner{width:100px;text-align:center;right:50%;margin-right:-50px}
#close_topbanner:focus,#open_topbanner:focus{outline:0}

Then please save the code below and place it after the code. <body>

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<div class='top_banner'>
<div id='topbanner'>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxx' height='250' layout='fixed-height' type='adsense'>
 </amp-ad>
  </div>
<button id='close_topbanner' on='tap:topbanner.hide, close_topbanner.hide, open_topbanner.show' role='button' tabindex='0' title='Close'>Close Ad</button>
<button hidden='' id='open_topbanner' on='tap:topbanner.show, close_topbanner.show, open_topbanner.hide' role='button' tabindex='0' title='Open'>Open Ad</button>
  </div>
</b:if>

Please customize the code <data-ad-client='ca-pub-xxxxxxxxxxxxxx' and data-ad-slot='xxxxxxxxxx' with your responsive ad unit.

And make sure you've installed js amp-ad on your blog.
LEARN MORE

Create a Youtube AMP Video Playlist On AMP Blog

Youtube Video Playlist AMP

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

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

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

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.

Adsense In The Middle of Blog Post

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

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

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

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.
LEARN MORE

How to Create an AMP Adsense Unit on Blogger

Adsense AMP

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