Ya beginilah kehidupan nara blog yang sangat antusias sekali dengan project terbaru milik Google. Mereka sudi untuk mengoprek-oprek kode supaya bisa valid AMP. Berawal dari keinginan saya untuk membuat sebuah artikel yang isinya adalah kumpulan template buatan para mastah Blogger. Tentu saja apabila kita ingin membagikan template-template tersebut, sebelumnya Anda harus menambahkan tombol demo dan download pada artikel tersebut. Saya pun iseng-iseng untuk blog walking ke blog para mastah dan pada akhirnya, saya menemukan sebuah artikel yang menurut saya cukup menarik untuk dioprek-oprek kodenya, yaitu blog milik Mas Verdy a.k.a arlinadzgn. Jadi, tutorial ini masih berkaitan dengan artikel milik Mas Verdy. Hanya saja saya membuat kode-kode tersebut supaya valid AMP HTML.
Well, di sini saya akan memberikan dua pilihan style untuk tombol flat UI-nya. Yuk, langsung saja kita bahas bersama tentang cara memasang tombol demo dan download flat UI valid AMP. Check it out, guys~
Style 1.
Langkah pertama:
Tambahkan kode CSS di bawah;
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}Lalu simpan pada style amp-custom postingan desktop maupun mobile.
Langkah kedua:
Untuk kode pemanggil CSS di atas pada halaman HTML postingan, silakan untuk menggunakan kode pemanggil di bawah ini.
<ul class="button">
<li><a class="demo" href="https://www.validamp.com" target="_blank">Demo</a></li>
<li><a class="download" href="https://www.validamp.com" target="_blank">Download</a></li>
</ul>
<div class="clear"></div>Notes: Silakan ganti semua alamat tautan berikut https://www.validamp.com menjadi alamat tautan blog miliki Anda.
Hasilnya akan nampak seperti contoh di bawah ini 😁
Style 2.
Langkah pertama:
Simpan kode CSS di bawah;
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}Lalu simpan pada style amp-custom postingan desktop maupun mobile.
Langkah kedua:
Untuk kode pemanggil CSS di atas pada halaman HTML postingan, silakan untuk menggunakan kode pemanggil di bawah ini.
<ul class="button2">
<li><a class="demo" href="https://www.validamp.com" target="_blank">Demo Link</a></li>
<li><a class="download" href="https://www.validamp.com" target="_blank">Download Link</a></li>
</ul>
<div class="clear"></div>Notes: Silakan ganti semua alamat tautan berikut https://www.validamp.com menjadi alamat tautan blog miliki Anda.
Hasilnya akan nampak seperti contoh di bawah ini 😁
That's all~