Widget slider di blog AMP

Halo Sobat, kali ini saya akan memberikan tutorial cara membuat slider baik itu text maupun gambar yang valid di blog AMP, Kadangkala suatu blog kita ingin percantik dengan tambahan widget yang ada termasuk widget slider ( karena saya penyuka widget slider seperti yang ada di blog ini ) Walaupun banyak para master mengatakan bahwa menggunakan widget slider tidak bagus buat blog Sobat.

Namun sayangnya widget ini belum bisa otomatis menampilkan fitur posting jadi harus kita masukkan secara manual. Silahkan disimak tutorialnya :

• Pertama Masuk Ke Edit HTML Template sobat
• Lalu letakan kode dibawah ini di atas di halaman Homepage Desktop Maupun Mobile dan masukkan css dibawah ini

.head-amp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpKCfHADpn55pZwbDz4BvNAan5bu3lfRzGNOd2BU-DY4IzmLc_EZZ2tEjeAEQOlBfWR33sCT2dypJumGaF5DRdIPG99Ow1RQwW_wfKomh6nriq5FMRysPCEloPu9CQuujSNS6oyTT7mazE/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}

• Bila sobat belum ada JS-AMP untuk carousel masukkan JS dibawah ini di atas 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. atau juga bisa di masukkan langsung ke kolom widget HTML/javascript di blog Sobat

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

• Dan bila Sobat ingin menambahkan Caption di gambar slider bisa juga memasukkan kode CSS dibawah ini dan tempatkan sebelum kode </head>

#carousel-with-preview amp-img {transition: opacity 1s ease-in-out;} .carouselamp {background: #eee;margin: 16px 0;} .carouselamp .slide > amp-img > img{object-fit: contain;} .carouselamp .caption {position: absolute;bottom: 0;left: 0;right: 0;padding: 8px;background: rgba(0, 0, 0, 0.6);color: #ddd;font-size: smaller;max-height: 30%;} .selected {border-width: 1px;border-style: solid;}

• Dan sama seperti cara yang pertama masukkan kode widget di bawah ini

<amp-carousel class="carouselamp" layout="responsive" height="400" width="500" type="slides"> <div class="slide"> <amp-img src="URL GAMBAR" layout="fill" alt="ALT IMAGE"></amp-img> <div class="caption"> CAPTION GAMBAR </div> </div> <div class="slide"> <amp-img src="URL GAMBAR" alt='ALT IMAGE'></amp-img> <div class="caption"> CAPTION GAMBAR </div> </div> <div class="slide"> <amp-img src="URL GAMBAR" layout="fill" alt="ALT IMAGE"></amp-img> <div class="caption"> CAPTION </div> </amp-carousel>

Keterangan:

• Ubah URL GAMBAR dengan url gambar anda.
• Ubah ALT IMAGE sesuai yang diinginkan.
• Ubah CAPTION dengan caption gambar yang akan tampil overlay di atas gambar.

Harap diperhatikan bahwa, biasanya saat anda memasang kode gallery diatas akan mengalami sedikit error saat sudah dipublish. Biasanya error tersebut terjadi karena kode penutup </amp-carousel> tiba-tiba terpasang pada tempat yang salah. Sehingga saat artikel publish, tampilan blog anda error. Untuk mengatasi masalah ini, silahkan perbaiki di mode penulisan HTML saat mengedit artikel.

Demikian Tutorial dari saya, semoga bermanfaat..👌

Sumber :
amp.alinuxblog.com
valid-amp.blogspot.co.id

Baca Juga

Josie

Cuma seorang blogger yang jarang ngeblog

Share :

Related Posts