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