Membuat Tombol Download di Blogger

Banyaknya pertanyaan di group bagaimana cara membuat tombol Download dan Tombol Preview atau Tombol DEMO membuat saya tertarik bertapa pentingnya tutorial ini, hal ini selain wawasan juga bisa menambah ilmu dan bisa menambah cantiknya model tombol yang kita gunakan di blogger kita.

Tentu saja ini membuat tampilan blog dan situs anda semakin terlihat elegan, nah bagaimana cara membuat tombol seperti di situs masterdesain.com, silahkan simak baik-baik cara dibawah ini :

1. Masuk ke Blogger → Tema → Edit HTML

2. Masukan kode script dibawah ini sebelum kode </head> 

Masuk ke Blogger → Tema → Edit HTML
Masukan kode script dibawah ini sebelum kode </head> 

<!-- before </head> -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css">
  .buttondownload {
    list-style: none;
    text-align: center;
    width: 95%;
    margin: 10px;
    padding: 2px;
    font-size: 16px;
    clear: both
  }

  .buttondownload a {
    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: 0px;
    box-shadow: 0 1px rgba(0, 0, 0, 0.1);
    line-height: normal;
    transition: all .3s
  }

  .buttondownload a:before {
    content: "\f019";
    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";
  }

  .buttondownload a:hover {
    background: #5C5C5C
  }

  .buttondownload:active {
    cursor: pointer
  }

  .buttondemo {
    float: left;
    list-style: none;
    text-align: center;
    width: 95%;
    margin: 10px;
    padding: 2px;
    font-size: 16px;
    clear: both
  }

  .buttondemo a {
    position: relative;
    padding: 9px 48px 9px 16px;
    background: #E55E48;
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0px;
    box-shadow: 0 1px rgba(0, 0, 0, 0.1);
    line-height: normal;
    transition: all .3s
  }

  .buttondemo a:before {
    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: #ffffff;
    padding: 11px;
    font-family: "fontawesome";
  }

  .buttondemo a:hover {
    background: #666
  }

  .buttondemo:active {
    cursor: pointer
  }
</style>

Jika kurang jelas diatas bisa kopas pada script dibawah ini :

<!-- before </head> -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css">
  .buttondownload {
    list-style: none;
    text-align: center;
    width: 95%;
    margin: 10px;
    padding: 2px;
    font-size: 16px;
    clear: both
  }

  .buttondownload a {
    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: 0px;
    box-shadow: 0 1px rgba(0, 0, 0, 0.1);
    line-height: normal;
    transition: all .3s
  }

  .buttondownload a:before {
    content: "\f019";
    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";
  }

  .buttondownload a:hover {
    background: #5C5C5C
  }

  .buttondownload:active {
    cursor: pointer
  }

  .buttondemo {
    float: left;
    list-style: none;
    text-align: center;
    width: 95%;
    margin: 10px;
    padding: 2px;
    font-size: 16px;
    clear: both
  }

  .buttondemo a {
    position: relative;
    padding: 9px 48px 9px 16px;
    background: #E55E48;
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0px;
    box-shadow: 0 1px rgba(0, 0, 0, 0.1);
    line-height: normal;
    transition: all .3s
  }

  .buttondemo a:before {
    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: #ffffff;
    padding: 11px;
    font-family: "fontawesome";
  }

  .buttondemo a:hover {
    background: #666
  }

  .buttondemo:active {
    cursor: pointer
  }
</style>

Keterangan : Code di atas adalah style dari tombol yang dibuat, dimana di dalam tombol tersebut terdapat icon dari fontawesome.

Gunakan code HTML dibawah ini setiap postingan untuk menampilkan tombol DOWNLOAD NOW maupun DEMO THEME

<div class="buttondemo"><a href="http://www.masterdesain.com/"target="_blank">DEMO THEME</a></div>
<div class="buttondownload"><a href="http://www.masterdesain.com/"target="_blank">DOWNLOAD NOW</a></div>

Selamat Mencoba

Demo Link/link/button/#0a21f5 Source Link/link/button/#f50a77