Cara Membuat Tombol Download dan Demo Flat UI - Pada kesempatan kali ini saya akan membahas seputar bagaimana cara membuat tombol download dan demo tampilan flat ui, nah mungkin anda sedang mencari tutorial ini, kali ini saya akan menjelaskan cara membuat tombol download dan demo flat ui secara rinci dan dapat dipahami. Sudah tahu apa itu flat ui?kalau belum tahu saya akan menjelaskan nya sebagai berikut.
Penjelasan sedikit tentang flat ui, flat ui adalah tampilan minimalis dengan bahasa desain yang menghilangkan penggunaan efek 3D seperti bayangan, gradients, textures, dan sejenisnya yang membuat design menjadi tiga dimensi, jadi flat ui design ini nantinya akan terlihat 2 dimensi dengan warna yang flat juga. Ada juga fitur flat ui ini adalah Font Awesome. Nah itulah sedikit penjelasan tentang flat ui semoga mengerti dapat dipahami.
Selanjutnya bagaimana cara membuat tombol download dan demo flat ui design? berikut saya akan menjelaskan langkah-langkah nya sebagai berikut ini.
Selanjutnya pakai kode berikut untuk membuat tombol download dan demo flat ui sebagai berikut.
1. Masuk ke Akun Blogger > Klik Menu Tema > Edit HTML .
2. Pastikan di blog anda terdapat script css style font awesome seperti dibawah ini yang terletak di atas kode </head> . Jika tidak ada, silahkan anda letak kan script CSS style font awesome di bawah ini diatas kode </head> .
3. Pasang kode CSS terlebih dahulu agar tampilan tombol menjadi flat ui .
4. Dan Tempatkan kode CSS diatas, diatas kode </style> atau ]]><[/b:skin> . Agar cepat pencarian mencari kode </style> dan ]]><[/b:skin> cukup tekan tombol pada keyboard CTRL+F lalu isikan kata kunci </style> atau ]]><[/b:skin> .
5. Simpan Template.
Selanjutnya agar tombol flat ui tampil silahkan ikuti langkah berikut.
1. Letak kan kode HTML di bawah ini lalu simpan dalam entri atau postingan artikel dengan format HTML.
Penjelasan Flat UI
Penjelasan sedikit tentang flat ui, flat ui adalah tampilan minimalis dengan bahasa desain yang menghilangkan penggunaan efek 3D seperti bayangan, gradients, textures, dan sejenisnya yang membuat design menjadi tiga dimensi, jadi flat ui design ini nantinya akan terlihat 2 dimensi dengan warna yang flat juga. Ada juga fitur flat ui ini adalah Font Awesome. Nah itulah sedikit penjelasan tentang flat ui semoga mengerti dapat dipahami.
Selanjutnya bagaimana cara membuat tombol download dan demo flat ui design? berikut saya akan menjelaskan langkah-langkah nya sebagai berikut ini.
Bagaimana Cara Membuat Tombol Download dan Demo Flat UI
Pertama-tama hal yang harus dingat widget atau script ini memerlukan Font Awesome agar tampilan enak dilihat dan bagus, nah jadi silahkan anda tambahkan kode link css berikut ini. <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Selanjutnya pakai kode berikut untuk membuat tombol download dan demo flat ui sebagai berikut.
1. Masuk ke Akun Blogger > Klik Menu Tema > Edit HTML .
2. Pastikan di blog anda terdapat script css style font awesome seperti dibawah ini yang terletak di atas kode </head> . Jika tidak ada, silahkan anda letak kan script CSS style font awesome di bawah ini diatas kode </head> .
3. Pasang kode CSS terlebih dahulu agar tampilan tombol menjadi flat ui .
/* CSS Button Style 1 by www.arlinadzgn.com */
.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!important;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'} 4. Dan Tempatkan kode CSS diatas, diatas kode </style> atau ]]><[/b:skin> . Agar cepat pencarian mencari kode </style> dan ]]><[/b:skin> cukup tekan tombol pada keyboard CTRL+F lalu isikan kata kunci </style> atau ]]><[/b:skin> .
5. Simpan Template.
Selanjutnya agar tombol flat ui tampil silahkan ikuti langkah berikut.
1. Letak kan kode HTML di bawah ini lalu simpan dalam entri atau postingan artikel dengan format HTML.
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://tornesia.blogspot.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://amsuyblog.blogspot.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div> Catatan : Ganti URL : http://tornesia.blogspot.com dengan URL tujuan anda.2. Lalu lihat hasilnya, untuk demo anda bisa lihat di link dibawah ini.
Demikian lah tutorial bagaimana cara membuat tombol download dan demo flat ui, semoga apa yang saya sampaikan ini dapat bermanfaat bagi anda dan menjadi bahan pembelajaran anda dalam ilmu koding. Apabila anda belum paham dengan tutorial diatas, silahkan anda berkomentar dibawah postingan ini terima kasih.