Cara Menciptakan Tombol Demo Dan Download Flat Ui - Dewa Blogger

Halaman

    Social Items

Buy Now
Cara Membuat Tombol Demo dan Download Flat UI - Pada tutorial ke 4 hari ini akan membuatkan tutorial Cara Membuat Tombol Demo dan Download Flat UI dengan perhiasan icon Font Awesome. Untuk teman yang biasa membagikan sesuatu melalui blog baik itu membuatkan template, software, film, dan hal lain yang sanggup dibagikan pastinya akan membutuhkan tombol demo dan download.

Cara Membuat Tombol Demo dan Download Flat UI Cara Membuat Tombol Demo dan Download Flat UI

Tampilan tombol demo dan download yang aku bagikan ini sangat menarik, sebab terdapat icon Font Awesome pada tombol tersebut :

Oke tanpa perlu berlama-lama, pribadi saja teman ikuti langkah-langkah di bawah ini.

Cara Membuat Tombol Demo dan Download Flat UI


Widget ini memakai Font Awesome, jadi silakan tambahkan link CSS berikut di atas </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Berikut demo Tombol Demo dan Download yang sudah aku buat dengan 2 style pilihan

Style 1




Style 2




1. Masuk ke Blogger > Template > Edit HTML

2. Pastikan di blog Anda terdapat script pemanggil css style font awesome menyerupai di bawah ini yang terletak di atas instruksi </head>. Jika tidak ada, silahkan Letakkan script pemanggil CSS style font awesome di bawah ini di atas instruksi </head>.

3. Letakkan instruksi CSS di bawah ini di atas instruksi ]]></b:skin> atau </style>

Style 1


/* 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'}

Style 2


/* CSS Button Style 2 by www.arlinadzgn.com */ .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!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: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)}}

4. Simpan template.

5. Untuk penggunaannya, silakan gunakan instruksi berikut ini dikala menciptakan posting (Tambahkan dalam tab HTML)

Style 1


<div style="text-align: center;">   <ul class="button">     <li><a class="demo" href="http://www.arlinadzgn.com" target="_blank">Demo</a></li>     <li><a class="download" href="http://www.arlinadzgn.com" target="_blank">Download</a></li>   </ul> </div> <div class="clear"></div>

Style 2


<div style="text-align: center;">   <ul class="button2">     <li><a class="demo" href="http://www.arlinadzgn.com" target="_blank">Demo Link</a></li>     <li><a class="download" href="http://www.arlinadzgn.com" target="_blank">Download Link</a></li>   </ul> </div> <div class="clear"></div>

Ganti http://www.arlinadzgn.com dengan link tujuan

Demikian tutorial Cara Membuat Tombol Demo dan Download Flat UI. Semoga tutorial ini bermanfaat.

Cara Menciptakan Tombol Demo Dan Download Flat Ui

Cara Membuat Tombol Demo dan Download Flat UI - Pada tutorial ke 4 hari ini akan membuatkan tutorial Cara Membuat Tombol Demo dan Download Flat UI dengan perhiasan icon Font Awesome. Untuk teman yang biasa membagikan sesuatu melalui blog baik itu membuatkan template, software, film, dan hal lain yang sanggup dibagikan pastinya akan membutuhkan tombol demo dan download.

Cara Membuat Tombol Demo dan Download Flat UI Cara Membuat Tombol Demo dan Download Flat UI

Tampilan tombol demo dan download yang aku bagikan ini sangat menarik, sebab terdapat icon Font Awesome pada tombol tersebut :

Oke tanpa perlu berlama-lama, pribadi saja teman ikuti langkah-langkah di bawah ini.

Cara Membuat Tombol Demo dan Download Flat UI


Widget ini memakai Font Awesome, jadi silakan tambahkan link CSS berikut di atas </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Berikut demo Tombol Demo dan Download yang sudah aku buat dengan 2 style pilihan

Style 1




Style 2




1. Masuk ke Blogger > Template > Edit HTML

2. Pastikan di blog Anda terdapat script pemanggil css style font awesome menyerupai di bawah ini yang terletak di atas instruksi </head>. Jika tidak ada, silahkan Letakkan script pemanggil CSS style font awesome di bawah ini di atas instruksi </head>.

3. Letakkan instruksi CSS di bawah ini di atas instruksi ]]></b:skin> atau </style>

Style 1


/* 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'}

Style 2


/* CSS Button Style 2 by www.arlinadzgn.com */ .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!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: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)}}

4. Simpan template.

5. Untuk penggunaannya, silakan gunakan instruksi berikut ini dikala menciptakan posting (Tambahkan dalam tab HTML)

Style 1


<div style="text-align: center;">   <ul class="button">     <li><a class="demo" href="http://www.arlinadzgn.com" target="_blank">Demo</a></li>     <li><a class="download" href="http://www.arlinadzgn.com" target="_blank">Download</a></li>   </ul> </div> <div class="clear"></div>

Style 2


<div style="text-align: center;">   <ul class="button2">     <li><a class="demo" href="http://www.arlinadzgn.com" target="_blank">Demo Link</a></li>     <li><a class="download" href="http://www.arlinadzgn.com" target="_blank">Download Link</a></li>   </ul> </div> <div class="clear"></div>

Ganti http://www.arlinadzgn.com dengan link tujuan

Demikian tutorial Cara Membuat Tombol Demo dan Download Flat UI. Semoga tutorial ini bermanfaat.