Cara Menciptakan Tombol Demo Dan Download Untuk Blogspot Keren Dan Responsive

Kali ini aku akan share cara menciptakan button demo dan dowonload dengan desain Flat UI responsive untuk blogspot dengan desain . Tombol ibarat ini biasanya di gunakan blog download untuk share File, Game, Template,Video dan lain-lain.

Pengertian Flat UI

"Flat User Interface Design is a minimalis UI Design Genre, or design language, currently used in various graphical user interfaces (such is Web sites or Applications)." - Wikipedia

Mudahnya, Flat UI yaitu desain minimalis dengan bahasa desain yang menghilangkan imbas 3D ibarat gradient, tekstur, bayangan dan sejenisnya yang menciptakan desain menjadi 3D, jadi desain Flat UI nantinya terlihat ibarat 2 dimensi dengan warna yang flat.

Dengan menerapkan desain Flat UI ini akan menciptakan tampilan terlihat fresh dan mempengaruhi performa sehingga lebih gampang untuk di akses.

Cara Membuat Tombol Demo dan Download desain Flat UI

1.  Tambahkan instruksi link CSS berikut di atas instruksi </head>
2. <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel="stylesheet"/>
3. Masuk Blogger> Template> Edit HTML
4. Letakan instruksi CSS berikut ini di atas instruksi </style> atau ]]><b:skin>

 Model 1 /* model flat ui 1 */ .button { float : left ; list-style : none ; text-align:center;width:160px;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:#3498db;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:#e74c3c} .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.after,.button li a.download:after{content:'\f135';bacground: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'}




 Model 2 /* model flat ui 2 */ .button2{float:left;list-style:none;text-align:center;width:200px;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:#3498db;display:block;color:#fff !important;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:200px;margin:auto;overflow:hidden} .button2 li a.download{background:#e74c3c} .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-animaton: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)}}

5. Simpan template
6. Gunakan instruksi berikut pada dikala posting dan letakan pada mode HTML.

Model 1 <div style="text-align:center;"> <ul class="button"> <li><a class="demo" href="your url name" target="_blank">Demo</a></li> <li><a class="download" href="your url name" target"_blank">Download</a></li>  </ul> </div> <div class="clear"></div>

 Model 2 <div class="text-align:center;"> <ul class="button2"> <li><a class="demo" href="your url name" target="_blank">Demo Link</a></li> <li><a class="download" href="your url name" target="_blank">Download Link</a></li> </ul> </div> <div class="clear"></div>

"your url name" silahkan, di ganti dengan alamat URL blog sobat.

Sumber https://abomuthemes.blogspot.com/

Bagikan Artikel ini