Cara Membuat Tombol Download Keren Di Postingan Blog

Cara Membuat Tombol Download Keren Di Postingan Blog - Bagi teman - teman blooger khususnya yang membahas seputaran blog download memang semestinya tidak terlepas dari yang namanya tombol button download yang digunakan untuk menaruh link yang akan diambil oleh para penggunanya.

Selain untuk menampilkan tombol download, biasanya tombol button ini digunakan untuk membuat tombol Demo yang biasanya khusus digunakan bagi teman - teman blogger yang membahas mengenai download tamplate, sehingga orang akan bisa melihat demo dari file tamplate yang akan mereka download.

Sebenarnya kalau dipikir - pikir, masalah penggunaan tombol button keren bukanlah sebuah hal yang akan mempengaruhi banyaknya pengunjung anda, dan bukan juga sebuah hal yang menyebabkan pengunjung betah berlama - lama berada di halaman blog anda.

Namun demikian dengan membuat tombol download keren atau tombol button download keren di postingan blog anda bisa menciptakan sebuah hasil karya postingan yang memiliki nilai lebih atau lebih profesional daripada yang biasanya.

Cara Membuat Tombol Download Keren Di Postingan Blog

Pada dasarnya untuk membuat tombol download button sangatlah mudah. Karena kita hanya perlu membuat tulisan download lalu menyisipkan link di dalamnya, sehingga ketika orang klik tulisan tersebut maka akan mengarah ke link tujuan. 

Baca juga:

• Cara Menambahkan Icon Di Menu Blog 100% Work  
• 3 Cara Memasang Tamplate Blog Sesuai Keinginan  
• Cara Membuat Sitemap Blogger Dengan Mudah 100% Work  
• Cara Mengetahui Template Pada Website Orang Lain  
• Cara Membuat Link Hidup Di Komentar Blog Dengan Mudah  
• Cara Membuat Kotak Kode HTML Di Postingan  
• Cara Membuat Tombol Whatsapp Keren Di Blog

Namun untuk cara diatas saya rasa semua teman - teman pasti sudah memahaminya. Nah berikut ini saya akan membuat beberapa contoh cara membuat tombol link di blogger yang bisa anda gunakan untuk mempercantik tampilan download dengan button yang profesional.

Cara Membuat Tombol Download Keren Di Postingan Blog

Sebenarnya ada 2 cara yang bisa digunakan untuk membuat tombol button download di blogger yaitu:

1. Menambahkan kode CSS pada tamplate blogger
2. Langsung menambahkan HTML di postingan blogger

Mungkin untuk blog yang khusus membahas mengenai blog download alangkah lebih bagus dengan menambahkan kode CSS langsung di tamplate blogger anda, sehinga nantinya setiap membuat postingan yang mengandung link download akan lebih mudah dalam membuat tombol download buttonnya.

Cara membuat tombol download button do blog dengan menambahkan kode CSS di tamplate adalah sebagai berikut:
1. Silahkan anda masuk ke akun blogger
2. Selanjutnya pilih tamplate >> lalu pilih edit HTML
3. Copy paste kode CSS di bawah ini dan letakkan persis di atas kode ]]></b:skin>

.button {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 10px 20px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}

4. Klik Simpan pada tamplate

Nah untuk memunculkan tombol downloadnya anda tinggal menambahkan kode HTML berikut ini pada postingan anda.

<a href="URL download anda" target="_blank"><span class="button"><b>Download File Ini</b></span></a>

Nah tampilan nantinya akan seperti gambar berikut ini

Selain tombol download model diatas anda juga bisa menggunakan tombol download berikut ini dengan cara yang sama dengan cara diatas:

Tambahkan kode dibawah ini diatas kode ]]></b:skin>

.button {float:left; list-style:none; text-align:center; width:100%; margin:5px 0; padding:0; font-size:14px; clear:both;}
.download {border:none; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; padding:8px 30px !important; background:#5FAAE3; color:#fff !important; text-align:center; text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow:0 0 1px rgba(0, 0, 0, 0.3); transition:background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.download:hover {background:#454242; text-shadow:0 0 1px #222; -moz-text-shadow:0 0 1px #222; -webkit-text-shadow:0 0 1px #222; -ms-text-shadow:0 0 1px #222;}

selanjutnya Simpan pada tamplate anda

NOTE: Untuk membuat tombol berada di samping kiri ubah text-align:center; menjadi text-align:left; (di dalam .button)

Nah untuk menampilkan tomnbol button download tersebut di blog anda tinggal tambahkan kode HTML berikut ini pada postingan anda

<div class="button">
<a class="download" href="http://www.kubis.online">DOWNLOAD</a>
</div>
<div class="clear"></div>

Tampilannya akan menjadi seperti gambar dibawah ini

Anda juga bisa menambahkan kode berikut ini pada postingan

<div style="background-color: lightcyan; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">
TULISAN DISINI</div>

Hasilnya akan menjadi seperti berikut ini:

Berikutnya bagi anda yang ingin menggunakan cara yang lebih simple, yakni tanpa perlu menambahkan kode CSS pada tamplate blog. Biasanya banyak digunakan oleh blogger yang tidak khusus membahas blog download bisa menggunakan cara yang kedua ini yang tentunya lebih simple karena hanya perlu menggunakan kode HTML didalam postingan saja.

1. Pada postingan anda >> Klik HTML lalu tambahkan kode HTML berikut ini:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
.onmaibana {
  margin-right:9px;
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #009688;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #000;
}
/* Darker background on mouse-over */
.onmaibana:hover {
    background-color: #a5a6a7;
}
.onmaibana:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
<br />
<center>
<a href="https://www.kubis.online" target="_blank">
<button class="onmaibana"><i class="fa fa-eye"></i> Demo</button></a>
<a href="https://www.kubis.online" target="_blank">
<button class="onmaibana"><i class="fa fa-download"></i> Download</button></a>
</center>

NOTE:

• Silahkan anda ubah yang warna merah dengan link tujuan anda
• Apabila anda tidak memerlukan demo atau hanya membutuhkan tombol download saja maka anda cukup hapus scrip demo nya.

 Demonya akan menjadi seperti berikut ini:



Cukup mudah bukan? Sekarang anda tinggal pilh saja tergantung selera dan topik yang anda bahas, misalnya apabila anda khusus membahas mengenai blog download anda bisa menggunakan cara pertama yaitu dengan menambahkan CSS pada tamplate blog anda, tetapi apabila anda menginginkan cara yang lebih simpel anda bisa menggunakan cara yang lebih simple yaitu dengan langsung menambahkan HTML di postingan terkait.

Penutup: Demikian Cara Membuat Tombol Download Keren Di Postingan Blog yang bisa saya bagikan pada kesempatan kali ini, semoga bisa membantu.

🌐 Baca Juga

seconds.

⚠ Ikuti Kami di Blogger dan Google News Dan Dapatkan 1 Buah Smartphone dari Sponsor jika Beruntung‼

• 3comment

Mr.Surya

TEACHER | BLOGGER | CONTEN WRITER

Related Posts

BLOGGING