Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Modif AMP

Cara Buat Text Slide AMP Carousel Valid AMP

Posting Komentar

  • Pertama Masuk Ke Edit HTML Template sobat
  • Lalu letakan kode dibawah ini di atas </style> di halaman Homepage Desktop Maupun Mobile

.head-amp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDNFD1XeUWp0SEU5BzKZDxuH3DP21uPkvlSwU1F4ZOK1ulTSQhTCspI0fF-iMKqGzaONZccxrUfGZPYu51CWQbc8gfVPkyYG5nz6Vlc3WgKW4Er0n0g_N1ZQBWOs-ojUzY6Ok-88a4J9zu/s1600/logo-textslide-blogsgoblog.jpg) center 0 repeat-x #2d3e3a;height:429px;width:100%;margin-top:60px}

.amp-kepala{width:1100px;height:60px;margin:0 auto;padding:0;}

/* textslide */

.textslide span{color:#fafafa}

.textslide p{font-size:15px;text-transform:none;font-weight:300;margin-top:15px;color:#fff}

.button li a.amp-button,.textslide span{font-weight:700;text-transform:uppercase}

p.text { font-size:16px;text-align:center;line-height:30px;width:80%;margin:20px auto 0;}

#header amp-img{border:0;background:0;width:auto;height:auto;margin:0 auto}

.amp-carousel-button-next{right:0;cursor:pointer}

.amp-carousel-button-prev{left:0;cursor:pointer}

.textslide{text-align:center;margin-top:50px}

.textslide span{line-height:40px;text-align:center;font-size:30px}

.button {font-size:14px;text-align:center;color:#fff}

.button li a.amp-button{font-size:14px;text-align:center;padding:5px 30px;border:1px solid#fff}

.button{list-style:none;width:100%;margin:40px 0;padding:2px}

  • Oh ya jangan lupa Jika template blog anda belom ada kode js amp-carousel nya silahkan anda tambahkan kodenya di bawah ini diatas kode /head.

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

  • Jika sudah Sekarang anda Copy Kode di bawah ini Tepat diatas Header Wrapper Maupun Main wrapper bisa juga Outer wrapper tergantung template yang anda gunakan,anda sesuaikan saja.

<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>

<div class='amp-content2'>

<amp-carousel height='350' layout='fixed-height' type='slides'>

<div class='textslide'>

<span>AMP HTML Blog Dan Informasi Dunia Maya </span>

<p>

Situs Tentang Blog AMP Html Dan Yang Berkaitan Dengan Blog</p>

<ul class='button'>

<li><a class='amp-button' href='https://amp-html-blog.blogspot.com/p/sitemap.html' target='_blank'>ALL CONTENT</a></li>

</ul>

</div>

<div class='textslide'>

<span>Accelerated Mobile Pages (AMP) HTML</span>

<p>

AMP HTML atau Accelerated Mobile Pages HTML

Lihat Semua Artikel Tentang Amp Html</p>

<ul class='button'>

<li><a class='amp-button' href='https://amp-html-blog.blogspot.com/search/label/Amp%Html.html' rel='nofollow' target='_blank'>AMP HTML</a></li>

</ul>

</div>

<div class='textslide'>

<span>Dapatkan Informasi Dunia Maya Menarik Lainya</span>

<p>

Berbagi Informasi Tentang Dunia Maya Dan Yang Masih Berkaitan Dengan Blog </p>

<ul class='button'>

<li><a class='amp-button' href='https://amp-html-blog.blogspot.com/search/label/blogging' target='_blank'>AMP TEMPLATE</a></li>

</ul>

</div>

</amp-carousel>

</div>

</div>

</b:if>

selesai silahkan anda pertinjau dulu jika tampilan desktop sudah pas, simpan saja template nya, lalu cek untuk tampilan mobile nya jika tidak pas silahkan anda sesuiakan tampilan nya sesuai template yang anda pakai.

selamat mencoba, semoga berhasil kawan. jika masih bingung atau kurang jelas sillahkan tinggalkan jejak dikolom komentar.

Posting Komentar untuk "Cara Buat Text Slide AMP Carousel Valid AMP"