Cara Membuat Tombol Demo dan Download Flat UI Part I - Viham Blog - Mungkin sudah banyak sekali blog-blog lain yang mengulas tentang cara ini, membuat tombol (button) Demo dan Download Flat UI. Namun karena di Viham Blog, masih belum ada ya terpaksa saya posting lagi hehehe.
Cara untuk membuat dan memasang tombol Demo dan Download ini cukup mudah, silakan sobat ikuti langkah-langkah di bawah ini:
Cara Membuat Tombol Demo dan Download Flat UI Part I
1. Masuk ke Blogger - Template - Edit HTML - Kemudian letakan kode CSS dibawah ini di atas ]]></b:skin>
/* Tombol Demo dan Download by Viham Blog */
.buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#3498db!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important}
.buttonx:hover{background-color:#e74c3c!important;background:0}
.buttonx:active{position:relative;top:1px}
2. Gunakan kode markup dibawah ini, untuk memanggil kode di postingan. Jika sobat belum paham disaat sobat membuat artikel dan mau menambahkan tombol Demo dan Download, silakan tambahkan kode dibawah ini lewat HTML bukan Compose Post.
<div style="text-align: center;margin: 100px 0;">
<a class="buttonx" href="vihamblog.blogspot.com" target="_blank">Demo</a>
<a class="buttonx" href="vihamblog.blogspot.com" target="_blank">Download</a>
</div>Baca juga: Memasang Share Button Telegram di Blog
Demikian tutorial untuk menambahkan Tombol Demo dan Download Flat UI Part I di blog, semoga bermanfaat.
0 komentar