menu melayang

01 January 2020

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.

Membuat Tombol Download di Blogger

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

Blog Post

Related Post

Back to Top