Abdul Hamid Info - Tombol Demo dan Download merupakan sebuah fitur pelengkap yang sering dipergunakan pada sebuah blog/situs download, baik itu situs download lagu, film, game, ebook, maupun template. Kegunaan dari kedua tombol ini tidak lain dan tidak bukan yaitu untuk mempermudah pengunjung untuk melakukan demo atau download.
Kedua tombol ini memiliki fungsi dan kegunaannya masing-masing. Tombol Demo memiliki fungsi untuk melakukan preview atau pratinjau pada file yang akan didownload. Biasanya fitur ini sering dipakai pada situs download ebook atau template.
Tujuan digunakannya tombol Demo yaitu untuk mempermudah para pengunjung dalam melihat file yang akan didownload. Para pengunjung bisa melihat sendiri bagaimana kualitas dari file yang akan mereka download, dengan begitu mereka bisa yakin dan percaya bahwa file yang akan mereka download memang memiliki kualitas yang bagus.
Selain itu ada pula tombol Download. Sesuai dengan namanya tombol ini berfungsi untuk mendownload atau mengunduh file yang ada pada sebuah situs/blog. Ada beberapa karakteristik dari tombol Download, yaitu tombol Download yang mengarah langsung pada file, dan tombol download yang mengarah pada halaman lain yang sudah dihubungkan dengan file.
Baiklah saya rasa anda sudah mulai paham mengenai tombol Demo dan Download. Sesuai dengan judul diatas, pada kesempatan kali ini saya akan membagikan anda sebuah cara mudah untuk membuat kedua tombol tersebut (Demo dan Download), dan cara mengaplikasikannya pada postingan blog. kalau masih bingung silahkan lihat demo nya dibawah ini.
Cara ini sangat saya rekomendasikan bagi anda yang memiliki blog download karena selain memudahkan pengunjung, kedua tombol ini bisa menarik para pengunjung untuk mengunjungi situs blog anda, ini dikarenakan warna pada kedua tombol ini sudah terintegrasi dengan warna Flat UI yang pastinya sangat nyaman bila dilihat.
Disini saya akan membagikan cara membuat tombol Demo dan Download dengan dua Style yang berbeda. Style yang pertama yaitu tombol Demo dan Download akan berada pada posisi sejajar, dan Style kedua yaitu tombol Demo dan Download berada pada posisi urut, atau posisi tombol Demo berada di atas dan tombol Download berada dibawah.
Oke tanpa berbasa-basi lagi, bagi anda yang ingin dapat membuat tombol Demo dan Download silahkan ikuti saja panduan berikut:
Karena tombol Demo dan Download yang akan kita buat ini menggunakan Font Awesome, jadi kita harus memasukkan kode berikut kedalam tema blog. Caranya:
1. Masuk ke blogger
2. Pilih Tema>>Edit HTML
3. Masukan kode berikut diatas </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
4. Simpan Tema
Nah setelah kita berhasil memasukkan kode Font Awesome, maka saatnya kita berlanjut ke cara berikutnya. Yaitu cara memasukkan script kode untuk membuat tombol Demo dan Download Flat UI.
Karena tombol Demo dan Download Flat UI yang akan saya bagikan ini memiliki dua style yang berbeda, jadi anda bisa memilih salah satunya.
STYLE 1
1. Login ke blogger
2. Pada dashboard pilih Tema>>Edit HTML
3. Letakkan kode berikut diatas kode ]]></b:skin> atau </style>
/* CSS Button Style 1 by https://paling-top21.blogspot.com */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{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:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}
4. Simpan Tema
Cara Mengaplikasikan Pada Postingan
1. Masuk ke blogger
2. Pilih Postingan>>Entri Baru
3. Masuk ke mode HTML (Bukan "Compose")
4. Masukan kode berikut:
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="Link URL" target="_blank">Demo</a></li>
<li><a class="download" href="Link URL" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>
Catatan:
Ubah tulisan yang bertanda warna biru dengan URL yang anda inginkan!
5. Lakukan Pratinjau untuk melihat hasilnya
STYLE 2
1. Login ke blogger
2. Pada dashboard pilih Tema>>Edit HTML
3. Tambahkan kode berikut diatas kode ]]></b:skin> atau </style>
/* CSS Button Style 2 by https://paling-top21.blogspot.com */
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';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:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
4. Simpan Tema
Cara Mengaplikasikan Pada Postingan
1. Masuk ke blogger
2. Pilih Postingan>>Entri Baru
3. Masuk ke mode HTML (bukan "Compose")
4. Masukan kode berikut:
<div style="text-align: center;">
<ul class="button2">
<li><a class="demo" href="Link URL" target="_blank">Demo Link</a></li>
<li><a class="download" href="Link URL" target="_blank">Download Link</a></li>
</ul>
</div>
<div class="clear">
</div>
Catatan:
Ubah tulisan yang bertanda warna biru dengan URL yang anda inginkan!
5. Lakukan Pratinjau untuk melihat hasilnya
Itu dia cara membuat tombol Demo dan Download pada postingan blog. Dengan anda menerapkan cara ini pastinya kualitas postingan anda akan semakin baik dan terlihat profesional.[pt]
Advertise