Membuat Tombol Download dan Demo Keren - Susah Tidur

Membuat Tombol Download dan Demo Keren

Membuat Tombol Download dan Demo Keren
Membuat Tombol Download dan Demo Keren - SusahTidur - Pada kesempatan kali ini saya akan berbagi tutorial Cara Membuat Tombol Download dan Demo Keren di blog. Penggunaan tombol Download maupun Demo ini sering kita jumpai pada Blog yang membahas Tutorial blog maupun blog Download. 

Sebenarnya pada sebagian Template Blog, tombol Download maupun Demo sudah disediakan namun ada juga yang bosen dengan tampilan yang gitu - gitu aja sobat bisa memakai tombol Download dan Demo keren ini di blog sobat.

Penggunaan tombol Download maupun Demo selain untuk menunjukkan apa yang akan dituju. Tombol ini sekaligus dapat menarik perhatian pengunjung sobat, apalagi dengan iklan direct pengunjung awam pun bisa meng-klik tombol tersebut dan menghasilkan deh hihi.


Membuat Tombol Download dan Demo Keren

  1. Masuk dulu ke Dashboard Blogger sobat
  2. Langkah ini untuk template yang belum memasang Font Awesome ya, untuk yang sudah ada skip ke langkah selanjutnya. Untuk template VIOMAGZ sudah ada.

    Masuk Menu Tema > Edit HTML > Cari kode </head>

    Masukkan kode di bawah ini tepat di atas </head>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
  3. Masuk Menu Tema > Edit HTML > Cari kode </b:skin> lalu tambahkan CSS berikut tepat di atas kode </b:skin>
    /* Tombol Download Demo By www.susahtidur.my.id */
    #wrap {
     margin:20px auto;
     text-align:center;
    }
    #wrap br {
     display:none;
    }
    .btn {
     display:inline-block;
     position:relative;
     font-family:'Source Sans Pro', Helvetica, sans-serif;
     background:#FF8C00;
     padding:6px 14px;
     font-size:14px;
     margin:0 3px;
     color:#fff!important;
     border-radius:3px;
     border:none;
     text-transform:uppercase;
     text-decoration:none;
     transition:all 0.3s ease-out;
    }
    .btn.down {
     background:#28a1f0;
     color:#fff!important;
    }
    .btn.down:hover,.btn.down:active,.btn:hover,.btn:active {
     background:#3b3f48;
     color:#fff;
    }
    a.btn.down:hover,a.btn.down:active,a.btn:hover,a.btn:active {
     color:#fff;
    }
    .btn i {
     margin-left:10px;
     font-weight:normal;
     font-family:FontAwesome;
    }
  4. Kemudian Simpan Tema

Cara Pemasangan Tombol Download dan Demo?

  1. Masuk Dashboard Blogger sobat
  2. Buatlah Postingan/Halaman baru > Pilih mode HTML jangan Compose 
  3. Lalu masukkan kode di bawah ini di dalam kolom HTML tersebut
    <div id="wrap">
    <!-- Tombol Demo -->
    <a class="btn" href="#" rel="nofollow" target="_blank"><b>Live Demo</b> <i class="fa fa-paper-plane"></i></a>
    <!-- Tombol Download -->
    <a class="btn down" href="#" rel="nofollow" target="_blank"><b>Download</b> <i class="fa fa-download"></i></a>
    </div>
    
  4. Jika mau pakai satu tombol, silahkan sobat ambil kodenya mulai dari <!-- Tombol Demo --> atau <!-- Tombol Download --> sampai ke penutup </a> jangan lupa di bungkus dengan kode <div id="wrap"> sampai </div> jelasnya sudah saya blok warna biar lebih mudah dimengerti
  5. Masih bingung? yaudah saya pisahin aja, jangan lupa # ganti dengan link tujuan
    Live Demo
    <div id="wrap">
    <!-- Tombol Demo -->
    <a class="btn" href="#" rel="nofollow" target="_blank"><b>Live Demo</b> <i class="fa fa-paper-plane"></i></a></div>
    Download
    <div id="wrap">
    <!-- Tombol Download -->
    <a class="btn down" href="#" rel="nofollow" target="_blank"><b>Download</b> <i class="fa fa-download"></i></a></div>
    

Demo? ke blog DEMO SusahTidur yak, terlalu penuh kode di blog utama ga baek hihi.

Baiklah selesai sudah tutorial Cara Membuat Tombol Download dan Demo Keren. Sekian dan terimakasih telah berkunjung ke SusahTidur.
"Membuat Tombol Download dan Demo Keren"
Tampilkan Komentar
Sembunyikan Komentar

Belum ada Komentar untuk "Membuat Tombol Download dan Demo Keren"

Posting Komentar

Jangan malu bertanya!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel