SEARCH
ABOUTCONTACTDISCLAIMERPRIVACYSITEMAPTERM OF SERVICELOGIN AS AUTHOR
Home Blog Tutorial CSS HTML Cara Memasang Tombol Demo dan Download Flat UI Valid AMP
Cara Memasang Tombol Demo dan Download Flat UI Valid AMP
Cara Memasang Tombol Demo dan Download Flat UI Valid AMP
Draf artikel semakin hari semakin menumpuk. Tahukah Anda, kalau ada artikel di blog ini tiba-tiba hilang begitu saja, berarti artikel tersebut perlu direvisi ulang, karena menurut saya pribadi artikel yang tidak berkualitas itu hanya mengotori blog ini saja. Tujuan utama saya selain menginterpretasikan bahwa apa yang saya bagikan itu bermanfaat bagi orang lain, juga mengakomodasi para pembaca setia blog Fastest yang mana content is king, exactly.
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 😁
Demo
Download
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 😁
Demo
Download Link
That's all~
orang ganteng
DIMAS YUDHA
Hi, There! My name is Yudha. I am student of English Literature. Thanks for visiting 😉
ads 300x250
POPULAR POSTS
Kumpulan AMP Blogger Template
Kumpulan AMP Blogger Template
Soghiro atau Sighoro?
Soghiro atau Sighoro?
Cara Membuat Footer dengan 4 Kolom Valid AMP
Cara Membuat Footer dengan 4 Kolom Valid AMP
Cara Menulis Huruf Bahasa Arab pada Blog Valid AMP
Cara Menulis Huruf Bahasa Arab pada Blog Valid AMP
Hukum Orang yang Meninggalkan Salat karena Lupa/Tertidur
Hukum Orang yang Meninggalkan Salat karena Lupa/Tertidur
Add Telegram Sharing Button Fixed with Show Hide and Animation
Add Telegram Sharing Button Fixed with Show Hide and Animation
Cara Memasang Telegram dan WhatsApp Share Button Valid AMP
Cara Memasang Telegram dan WhatsApp Share Button Valid AMP
Cara Memasang Tombol Demo dan Download Flat UI Valid AMP
Cara Memasang Tombol Demo dan Download Flat UI Valid AMP
About Fastest
About Fastest
LABELS
Akhlak
(1)
All About Islam
(5)
Blog Tutorial
(6)
CSS
(5)
Diary
(1)
English Lesson
(2)
Hadis
(1)
HTML
(6)
JS
(1)
Notes
(9)
Template
(1)
ABOUT CONTACT DISCLAIMER PRIVACY SITEMAP TERM OF SERVICE
Copyright © 2017 Fastest All Right Reserved Maintained By Dimas Yudha Pratama
