Cara Membuat Tombol Download Flat UI Pada Blog

Diposkan oleh Admin 22.11 Posting Komentar

Cara Membuat Tombol Download Flat UI Pada Blog - Pada kesempatan kali ini saya akan share Bagaimana Cara Membuat Tombol Download Flat UI Pada Blog seperti yang pernah saya gunakan untuk meletakan link download pada blog ini. Sebenarnya tombol seperti ini tidak hanya untuk tombol download saja, tetapi bisa dikreasikan lagi untuk berbagai kegunaan lainnya. Hanya saja kunci utama dari proses pembuatannya yang harus kita ketahui.

Berikut proses pembuatan tombol Flat UI tersebut:

Pastikan bahwa template yang digunakan sudah menerapkan CSS Stylesheet Font Awesome.
Kalau belum tambah CSS di bawah ini tepat di bawah kode <head>.

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

Kemudian tambahkan pula kode CSS berikut tepat di atas ]]></b:skin> atau </style>.


* CSS Tombol Demo & Download by Libra Yanada */

    #wrap {
     margin:20px auto;
     text-align:center;
    }
    #wrap br {
     display:none;
    }
    .btn {
     display:inline-block;
     position:relative;
     font-family:'Open Sans', Helvetica, sans-serif;
     text-decoration:none;
     font-weight:700;
     background:#22313f;
     padding:10px 20px;
     margin:0 3px;
     color:#fff;
     border-radius:3px;
     transition:all 0.3s ease-out;
     text-transform:uppercase;
     border-bottom:2px;
     border-color:#1C1E29;
     text-shadow:none;
    }
    .btn:hover {
     background:#f22613;
    }
    .btn:active {
     background:#f22613;
    }
    .btn.down {
     background:#22313f;
    }
    .btn.down:hover {
     background:#f22613;
    }
    .btn.down:active {
     background:#f22613;
    }
    a.btn,a.btn:hover,a.btn:active {
     color:#fff;
    }
    .btn i {margin-left:10px;}

Lalu simpan hasil editan pada CSS template tersebut.

Sampai pada tahap ini, pemasangan atau penambahan CSS Stylesheet Font Awesome sudah selesai, hanya saja tombol yang dimaksud masih belum bisa digunakan, harus ditambahkan kode pemanggilan dari tombol tersebut. Berikut cara memanggil/menerapkannya:


<div id="wrap">
 <a href="#" class="btn" rel="nofollow" target="_blank">Live Demo <i class="fa fa-paper-plane"></i></a><br>
 <a href="#" class="btn down" rel="nofollow" target="_blank">Download <i class="fa fa-download"></i></a><br>
 </div>

Masukan kode HTML di atas pada halaman posting pada mode HTML bukan pada mode Compose. Ganti kode # yang dengan link download masing-masing.

Untuk contoh jadi tombolnya silahkan liat di akhir postingan ini.

Demikianlah Tutorial Blog kali ini. Semoga bisa bermanfaat dan selamat berkreasi.

Download

RudiEtnovian.Com

Cara Membuat Tombol Download Flat UI Pada Blog

Posting Komentar untuk "Cara Membuat Tombol Download Flat UI Pada Blog"