Lompat ke konten Lompat ke sidebar Lompat ke footer

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>


Silahkan cek hasilnya seperti disini

Selamat Mencoba

Source Link

1 komentar untuk "Membuat Tombol Download di Blogger"

  1. Surat Ad Dukhaan terdiri atas 59 ayat, termasuk golongan surat-surat Makkiyyah, diturunkan sesudah Az Zukhruf.

    Dinamai Ad Dukhaan (kabut), diambil dari perkataan Dukhaan yang terdapat pada ayat 10 surat ini.

    Menurut riwayat Bukhari secara ringkas dapat diterangkan sebagai berikut: Orang-orang kafir Mekah dalam menghalang-halangi agama Islam dan menyakiti serta mendurhakai Nabi Muhammad s.a.w. sudah melewati batas, karena itu Nabi mendoa kepada Allah agar diturunkan azab sebagaimana yang telah diturunkan kepada orang-orang yang durhaka kepada Nabi Yusuf yaitu musim kemarau yang panjang. Do’a Nabi itu dikabulkan Allah sampai orang-orang kafir memakan tulang dan bangkai, karena kelaparan. Mereka selalu menengadah ke langit mengharap pertolongan Allah. Tetapi tidak satupun yang mereka lihat kecuali kabut yang menutupi pandangan mereka.

    Akhirnya mereka datang kepada Nabi agar Nabi memohon kepada Allah supaya hujan diturunkan. Setelah Allah mengabulkan doa Nabi, dan hujan di turunkan, mereka kembali kafir seperti semula; karena itu Allah menyatakan bahwa nanti mereka akan diazab dengan azab yang pedih.

    Pokok-pokok isinya.

    1. Keimanan:
    Dalil-dalil atas kenabian Muhammad s.a.w.; huru-hara dan kehebatan hari kiamat; pada hari kiamat hanya amal-amal seseorang yang dapat menolongnya; azab dan penderitaan yang ditemui orang-orang kafir di akhirat serta nikmat dan kesenangan yang diterima orang-orang mukmin.

    2. Hukum-hukum:
    Kisah Musa a.s dengan Fir’aun dan kaumnya.

    3. Dan lain-lain:
    Permulaan turunnya Al Quran pada malam lailatul Qadar; orang-orang kafir hanya beriman kalau mereka ditimpa bahaya, kalau bahaya telah hilang mereka kafir kembali; dalam penciptaan langit dan bumi itu terdapat hikmat yang besar.

    BalasHapus
Wpberita Wordpress Theme
Wpberita Wordpress Theme