Cara Menciptakan Tombol Download Dan Demo Flat Ui
Cara Membuat Tombol Download dan Demo Flat UI - Pada kesempatan kali ini aku akan membahas seputar bagaimana cara menciptakan tombol download dan demo tampilan flat ui, nah mungkin anda sedang mencari tutorial ini, kali ini aku akan menjelaskan cara menciptakan tombol download dan demo flat ui secara rinci dan sanggup dipahami. Sudah tahu apa itu flat ui?kalau belum tahu aku akan menjelaskan nya sebagai berikut.
Penjelasan sedikit ihwal flat ui, flat ui yakni tampilan minimalis dengan bahasa desain yang menghilangkan penggunaan efek 3D menyerupai bayangan, gradients, textures, dan sejenisnya yang menciptakan 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 yakni Font Awesome. Nah itulah sedikit klarifikasi ihwal flat ui semoga mengerti sanggup dipahami.
Selanjutnya bagaimana cara menciptakan tombol download dan demo flat ui design? berikut aku akan menjelaskan langkah-langkah nya sebagai berikut ini.
Selanjutnya pakai isyarat berikut untuk menciptakan 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 menyerupai dibawah ini yang terletak di atas isyarat </head> . Jika tidak ada, silahkan anda letak kan script CSS style font awesome di bawah ini diatas isyarat </head> .
3. Pasang isyarat CSS terlebih dahulu biar tampilan tombol menjadi flat ui .
4. Dan Tempatkan isyarat CSS diatas, diatas isyarat </style> atau ]]><[/b:skin> . Agar cepat pencarian mencari kode </style> dan ]]><[/b:skin> cukup tekan tombol pada keyboard CTRL+F kemudian isikan kata kunci </style> atau ]]><[/b:skin> .
5. Simpan Template.
Selanjutnya biar tombol flat ui tampil silahkan ikuti langkah berikut.
1. Letak kan isyarat HTML di bawah ini kemudian simpan dalam entri atau postingan artikel dengan format HTML.
Penjelasan Flat UI
Penjelasan sedikit ihwal flat ui, flat ui yakni tampilan minimalis dengan bahasa desain yang menghilangkan penggunaan efek 3D menyerupai bayangan, gradients, textures, dan sejenisnya yang menciptakan 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 yakni Font Awesome. Nah itulah sedikit klarifikasi ihwal flat ui semoga mengerti sanggup dipahami.
Selanjutnya bagaimana cara menciptakan tombol download dan demo flat ui design? berikut aku akan menjelaskan langkah-langkah nya sebagai berikut ini.
Cara Membuat Tombol Download dan Demo Flat UI
Pertama-tama hal yang harus dingat widget atau script ini memerlukan Font Awesome biar tampilan yummy dilihat dan bagus, nah jadi silahkan anda tambahkan isyarat link css berikut ini. <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> Selanjutnya pakai isyarat berikut untuk menciptakan 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 menyerupai dibawah ini yang terletak di atas isyarat </head> . Jika tidak ada, silahkan anda letak kan script CSS style font awesome di bawah ini diatas isyarat </head> .
3. Pasang isyarat CSS terlebih dahulu biar 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 isyarat CSS diatas, diatas isyarat </style> atau ]]><[/b:skin> . Agar cepat pencarian mencari kode </style> dan ]]><[/b:skin> cukup tekan tombol pada keyboard CTRL+F kemudian isikan kata kunci </style> atau ]]><[/b:skin> .
5. Simpan Template.
Selanjutnya biar tombol flat ui tampil silahkan ikuti langkah berikut.
1. Letak kan isyarat HTML di bawah ini kemudian simpan dalam entri atau postingan artikel dengan format HTML.
<div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="http://kamsuyblog.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://kamsuyblog.blogspot.com dengan URL tujuan anda.2. Lalu lihat hasilnya, untuk demo anda sanggup lihat di link dibawah ini.
Demikian lah tutorial bagaimana cara menciptakan tombol download dan demo flat ui, semoga apa yang aku sampaikan ini sanggup bermanfaat bagi anda dan menjadi materi pembelajaran anda dalam ilmu koding. Apabila anda belum paham dengan tutorial diatas, silahkan anda berkomentar dibawah postingan ini terima kasih.