Cara Membuat Tombol Demo Download dan Buy Keren dan Responsive di Postingan Blog

Cara Membuat Dan Memasang Tombol Button Demo, Download Dan Buy Now Keren, Elegan dan Responsive (Material Design) Di Blog - Tombol download atau demo ataupun tombol buy cart salah satu fitur yang cukup penting.

Biasanya tombol download, demo dan buy cart ini digunakan pada blog dengan konten download software-software seperti aplikasi Android, film, jual beli template blogger, atau tutorial yang mengharuskan adanya link ke luar halaman blog.

Ya walaupun sebenarnya kalau tidak memasang fitur tombol demo, download atau buy now ini juga bukan menjadi masalah. Namun akan jauh lebih baik dan akan terlihat lebih profesional kalau blog memiliki fitur seperti ini yaitu fitur tombol demo, download dan buy cart atau buy now yang keren.

Di artikel kali ini saya akan membahas tutorial bagaimana cara membuat dan memasang tombol demo, download dan buy cart dengan desain yang keren dan elegan ini di blog. Tombol yang saya berikan ini menggunakan CSS dan mungkin akan sedikit memberatkan loading blog kamu.

Namun kamu tidak perlu khawatir, kode CSS yang digunakan sudah di optimasi menggunakan Tool CSS Minifier agar ukuran CSS tidak terlalu berat yang dapat berdampak buruk terhadap performa loading blog kamu. Dan satu lagi, note box ini terdapat ikon untuk mempercantik tampilannya dan ikon tersebut menggunakan font awesome. Tapi kamu bisa ganti menjadi ikon SVG.

Tombol demo, download dan buy cart yang saya berikan dibawah ada tiga jenis atau tiga gaya (style material design) yang berbeda-beda. Kamu bisa pilih saja salah satu yang paling kamu suka. Cara memasang tombol button demo, download dan buy now di blog terbilang mudah kok. Ikuti saja langkah-langkah dibawah ini.

Ikon yang digunakan pada tombol demo dan download ini menggunakan font awesome. Jadi kalau blog kamu belum terpasang font awesome, pasang terlebih dahulu. Dan font awesome mungkin akan sedikit memberatkan loading blog kamu karena menggunakan script external.

Cara Membuat Tombol Demo, Download dan Buy Now Keren dan Responsive Di Blog

1. Buka dashboard blogger
2. Masuk ke menu Theme » Edit HTML
3. Kemudian cari kode ]]></b:skin> atau </style>
4. Udah ketemu? Kalau udah ketemu tambahkan CSS tombol demo dan download dibawah ini tepat sebelum ]]></b:skin> atau </style> tadi

   /* CSS button download dan demo By BokBan */
   .body{margin:50px;font-family:helvetica,sans-serif;background:#e9f0f4}#wrap{margin:20px auto;text-align:center}
   .btn-slide,.btn-slide2{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#ooo000;border:2px solid #0099cc;margin:10px;transition:.5s}
   .btn-slide2{border:2px solid #efa666}
   .btn-slide:hover{background-color:#0099cc}
   .btn-slide2:hover{background-color:#efa666}
   .btn-slide:hover span.circle,
   .btn-slide2:hover span.circle2{left:100%;margin-left:-45px;background-color:#fdfdfd;color:#0099cc}
   .btn-slide2:hover span.circle2{color:#efa666}
   .btn-slide:hover span.title,
   .btn-slide2:hover span.title2{left:40px;opacity:0}
   .btn-slide:hover span.title-hover,
   .btn-slide2:hover span.title-hover2{opacity:1;left:40px}
   .btn-slide span.circle,.btn-slide2 span.circle2{display:block;background-color:#0099cc;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%}.btn-slide2 span
   .circle2{background-color:#efa666}
   .btn-slide span.title,
   .btn-slide span.title-hover,
   .btn-slide2 span.title2,
   .btn-slide2 span.title-hover2{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:16px;font-weight:bold;color:#30abd5;transition:.5s}
   .btn-slide2 span.title2,
   .btn-slide2 span.title-hover2{color:#efa666;left:80px}
   .btn-slide span.title-hover,
   .btn-slide2 span.title-hover2{left:80px;opacity:0}
   .btn-slide span.title-hover,
   .btn-slide2 span.title-hover2{color:#fff}

5. Kalau sudah klik simpan

Sampai di langkah ini fitur tombol demo, download dan buy cart sudah berhasil di pasang ke dalam template blog kamu. Berikutnya tinggal gunakan fitur tersebut ke dalam postingan yang ingin ditambahkan tombol ini. Caranya seperti ini:

1. Buka dashboard blogger lagi
2. Masuk ke postingan atau halaman yang akan ditambahkan tombol ini
3. Kemudian pindah ke mode HTML dan taruh HTML dibawah ini ke dalam postingan kamu dalam mode penulisan HTML bukan Compose

   <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
   <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
   <div id="wrap">
       <a href="taruh link disini" class="btn-slide">
         <span class="circle"><i class="fa fa-rocket"></i></span>
         <span class="title">Demo</span>
         <span class="title-hover">Click here</span>
       </a>
        <a href="taruh link disini" class="btn-slide2">
         <span class="circle2"><i class="fa fa-download"></i></span>
         <span class="title2">Download</span>
         <span class="title-hover2">Click here</span>
       </a>
      </div>

   Jangan lupa ganti link diatas dengan alamat situs web atau link tujuan kamu
4. Langkah terkahir klik simpan

Selian gaya atau desain diatas, masih ada dua desain atau style tombol yang lainnya yang sudah saya siapkan dibawah ini. Untuk cara pemasangan CSS dan penggunaan tombol HTML sama seperti langkah-langkah yang sudah dijelaskan diatas.

Desain Atau Style Tombol Demo Dan Download 2

CSS taruh sebelum ]]></b:skin> atau </style>

/* CSS button demo dan download by BokBan */
.howtofact{text-align:center;color:#fff!important;list-style:none;margin:10px!important;padding:10px!important;font-size:14px;display:inline-block;text-decoration:none!important;clear:both}
.howtofact ul{padding:0;margin:0}.howtofact li{list-style:none;display:inline;padding:0;margin:5px}.demo,
.download{color:#fff!important;padding:12px 15px!important;font-size:13px;font-weight:700;font-family:oswald;text-transform:uppercase;text-align:center;border-radius:3px;border:0;letter-spacing:1px;transition:all 0.2s ease-out;text-decoration:none!important}
.demo{background-color:#3498db}
.download{background-color:#34d968}
.demo:hover{background-color:#2980b9;color:#fff}
.download:hover{background-color:#2fbd5a;color:#fff}

Untuk HTML salin dan taruh ke dalam postingan dalam mode HTML

<center>
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<div style="text-align: center,">
    <ul class="howtofact">
    <li><a class="demo" href="URL" rel="nofollow" target="_blank">DEMO</a></li>
    <li><a class="download" href="URL" rel="nofollow" target="_blank">DOWNLOAD</a></li>
    </ul>
    </div>
 </center>

Desain Atau Style Tombol Demo Dan Download 3

CSS taruh sebelum ]]></b:skin></ code> atau </style>

/* CSS button demo dan download by BokBan */
#m-wrap{margin:10px auto;text-align:center}#m-wrap br{display:none}
.egg-btn-slide,
.egg-btn-slide2,
.egg-btn-slide3{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:0;background:#fdfdfd;border:2px solid #009688;margin:10px;transition:
.5s;border-bottom-right-radius:20px;border-top-left-radius:20px}
.egg-btn-slide2{border:2px solid #8BC34A}
.egg-btn-slide3{border:2px solid #f73d00}
.egg-btn-slide:hover{background-color:#009688}
.egg-btn-slide2:hover{background-color:#8BC34A}
.egg-btn-slide3:hover{background-color:#f73d00}
.egg-btn-slide:hover span.circle,
.egg-btn-slide2:hover span.circle2,
.egg-btn-slide3:hover span
.circle3{left:100%;margin-left:-45px;background-color:#fdfdfd}
.egg-btn-slide:hover span.circle{color:#009688}
.egg-btn-slide2:hover span.circle2{color:#8BC34A}
.egg-btn-slide3:hover span
.circle3{color:#f73d00}
.egg-btn-slide:hover span
.title,.egg-btn-slide2:hover span
.title2,.egg-btn-slide3:hover span
.title3{left:40px;opacity:0}
.egg-btn-slide:hover span
.title-hover,
.egg-btn-slide2:hover span
.title-hover2,
.egg-btn-slide3:hover span.title-hover3{opacity:1;left:40px}.egg-btn-slide span.circle,.egg-btn-slide2 span.circle2,.egg-btn-slide3 span.circle3{display:block;background-color:#009688;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%}.egg-btn-slide2 span.circle2{background-color:#8BC34A}.egg-btn-slide3 span.circle3{background-color:#f73d00}.egg-btn-slide span.title,.egg-btn-slide span.title-hover,.egg-btn-slide2 span.title2,.egg-btn-slide2 span.title-hover2,.egg-btn-slide3 span.title3,.egg-btn-slide3 span.title-hover3{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:16px;font-weight:bold;color:#009688;transition:.5s}.egg-btn-slide2 span.title2,.egg-btn-slide2 span.title-hover2{color:#8BC34A;left:80px}.egg-btn-slide3 span.title3,
.egg-btn-slide3 span.title-hover3{color:#f73d00;left:80px}.egg-btn-slide span.title-hover,.egg-btn-slide2 span.title-hover2,
.egg-btn-slide3 span.title-hover3{left:80px;opacity:0}.egg-btn-slide span.title-hover,.egg-btn-slide2 span.title-hover2,
.egg-btn-slide3 span
.title-hover3{color:#fff}

Untuk HTML salin dan taruh ke dalam postingan dalam mode HTML

<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<div id="m-wrap">
    <a class="egg-btn-slide" href="URL" target="_blank">
    <span class="circle"><i class="fa fa-eye"></i></span>
    <span class="title">Demo</span>
    <span class="title-hover">View Now</span>
    </a>
    <a class="egg-btn-slide2" href="URL" target="_blank">
    <span class="circle2"><i class="fa fa-chevron-circle-down"></i></span>
    <span class="title2">Download</span>
    <span class="title-hover2">Download Now</span>
    </a>
    <a class="egg-btn-slide3" href="URL" target="_blank">
    <span class="circle3"><i class="fa fa-shopping-cart"></i></span>
    <span class="title3">Buy Now</span>
    <span class="title-hover3">Purchase Now</span>
    </a>
    </div>
    </div>

Nah, itulah tutorial cara membuat dan memasang tombol demo, download dan buy cart keren dan responsive dengan gaya material desain yang bisa saya sampaikan di artikel ini. Semoga bisa bermanfaat dan membantu bagi yang membutuhkan tutorial ini. Kalau masih bingung tanyakan langsung di kolom komentar.

Share :