amp-sticky-ad
Amp-sticky-ad adalah dukungan untuk unit iklan yang selalu menempati tempat tetap di jendela grafik file AMP Html.
Iklan tempel akan muncul di bagian bawah halaman.
1 Code
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
2 Masukkan yang berikut ini script setelah pembukaan <head>
<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>
3 Penggunaan dasar
Gunakan pengumuman amplifikasi sebagai putra langsung dari amp-sticky-ad.
Tinggi iklan Amp-sticky-ad akan ditentukan sesuai dengan ketinggian Amp-sticky-ad. Tinggi maksimum Amp-sticky-ad es 100px, jika tingginya melebihi 100px maka ketinggiannya akan 100px dan konten overflow akan disembunyikan.
Code
<amp-sticky-ad layout="nodisplay">
<amp-ad width="320"
height="50"
type="doubleclick"
data-slot="/35096353/amptesting/formats/sticky">
</amp-ad>
</amp-sticky-ad>
Penentuan posisi
Amp-sticky-ad itu akan ditampilkan setelah memindahkan ketinggian jendela dari atas selama setidaknya ada satu jendela konten yang tersedia.
Teks berikut ini adalah untuk memastikan bahwa ada viewport lain dari yang pertama di atas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.
Kemudian Full struktur kode lengkap
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>
<link rel="canonical" href="http://amphtmlejemplos.blogspot.com/2016/12/como-anadir-un-soporte-para-bloques-de-anuncios-en-amp-html.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
.amp-sticky-ad-close-button {
min-width: 0;
}
</style>
</head>
<body>
<amp-sticky-ad layout="nodisplay">
<amp-ad width="320"
height="50"
type="doubleclick"
data-slot="/35096353/amptesting/formats/sticky">
</amp-ad>
</amp-sticky-ad>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor,
ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.
</p>
</body>
</html>