Tombol Demo dan Download merupakan sebuah fitur tambahan yg tak jarang digunakan pada sebuah blog/situs download, baik itu situs download lagu, film, game, ebook, maupun template. Kegunaan dari ke 2 tombol ini tak lain dan tak bukan yaitu buat mempermudah pengunjung untuk melaksanakan demo atau download.
Kedua tombol ini mempunyai fungsi dan kegunaannya masing-masing. Tombol Demo mempunyai fungsi untuk melaksanakan preview atau pratinjau pada file yang akan didownload. Biasanya fitur ini tak jarang digunakan dalam situs download ebook atau template.
Tujuan digunakannya tombol Demo yaitu buat mempermudah para pengunjung dalam melihat file yang akan didownload. Para pengunjung sanggup melihat sendiri bagaimana kualitas dari file yang akan mereka download, bersama begitu mereka bisa yakin dan percaya bahwa file yg akan mereka download memang mempunyai kualitas yg bagus.
Selain itu ada pula tombol Download. Sesuai beserta namanya tombol ini berfungsi buat mendownload atau mengunduh file yg terdapat pada sebuah situs/blog. Ada beberapa karakteristik dari tombol Download, yaitu tombol Download yg mengarah eksklusif dalam file, serta tombol download yg menunjuk dalam halaman lain yang sudah dihubungkan beserta file.
Baiklah admin rasa anda sudah mulai paham mengenai tombol Demo dan Download. Sesuai bersama judul di atas, dalam kesempatan kali ini saya akan memperlihatkan anda sebuah cara praktis buat membuat kedua tombol tersebut (Demo serta Download), dan cara mengaplikasikannya dalam postingan blog.
Cara ini sangat admin rekomendasikan bagi anda yang mempunyai blog download alasannya ialah selain memudahkan pengunjung, kedua tombol ini bisa menarik para pengunjung buat mengunjungi situs blog anda, ini dikarenakan warna pada kedua tombol ini telah terintegrasi beserta warna Flat UI yg pastinya sangat nyaman apabila ditinjau.
Disini admin akan memperlihatkan cara membuat tombol Demo serta Download bersama dua Style yang tidak sama. Style yg pertama yaitu tombol Demo dan Download akan berada dalam posisi sejajar, serta Style ke 2 yaitu tombol Demo serta Download berada pada posisi urut, atau letak tombol Demo berada di atas dan tombol Download berada dibawah.
Oke tanpa berbasa-basi lagi, bagi kau yg ingin sanggup membuat tombol Demo dan Download silahkan ikuti saja panduan berikut:
Karena tombol Demo serta Download yg akan kita buat ini menggunakan Font Awesome, jadi kita wajib memasukkan aba-aba berikut kedalam tema blog. Caranya:
1. Masuk ke blogger
2. Pilih Tema>Edit HTML
3. Masukan aba-aba berikut diatas </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>Nah setelah kita berhasil memasukkan aba-aba Font Awesome, maka saatnya kita berlanjut ke cara berikutnya. Yaitu cara memasukkan script aba-aba buat membuat tombol Demo dan Download Flat UI.
Karena tombol Demo serta Download Flat UI yg akan saya bagikan ini mempunyai dua style yang tidak selaras, jadi anda bisa memilih salah satunya.
STYLE 1
1. Login ke blogger
2. Pada dashboard pilih Tema>Edit HTML
3. Letakkan aba-aba berikut di atas aba-aba ]]></b:skin> atau </style>
/* CSS Button Style 1 by https://www.kostandroid.com */.buttonfloat:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both.button ulmargin:0;padding:0.button lidisplay:inline;margin:5px;padding:0;list-style:none.button li a.demo,.button li a.downloadposition: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.downloadbackground:#3498db.button li a.demo:hover,.button li a.download:hoverbackground:#666.button li a.demo:active,.button li a.download:activecursor:pointer.button li a.demo:after,.button li a.download:aftercontent:'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:aftercontent:'f019'Cara Mengaplikasikan Pada Postingan
1. Masuk ke blogger
2. Pilih Postingan>Entri Baru
3. Masuk ke mode HTML (Bukan "Compose")
4. Masukan aba-aba berikut:
<div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="https://www.kostandroid.com" sasaran="_blank">Demo</a></li> <li><a class="download" href="https://www.kostandroid.com" sasaran="_blank">Download</a></li> </ul></div><div class="clear"></div>Ubah goresan pena yg bertanda Merah beserta URL yg kau inginkan!5. Lakukan Pratinjau buat melihat hasilnya
STYLE 2
1. Login ke blogger
2. Pada dashboard pilih Tema>Edit HTML
3. Tambahkan aba-aba berikut di atas aba-aba ]]></b:skin> atau </style>
/* CSS Button Style 2 by https://www.kostandroid.com */.button2float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both.button2 ulmargin:0;padding:0.button2 lidisplay:inline;margin:5px;padding:0;list-style:none.button2 li a.demo,.button2 li a.downloadposition:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!Important;font-weight:700;font-size:14px;text-align:justify;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.downloadbackground:#3498db.button2 li a.demo:hover,.button2 li a.download:hoverbackground:#666.button2 li a.demo:active,.button2 li a.download:activecursor:pointer.button2 li a.demo:after,.button2 li a.download:aftercontent:'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:afterbackground:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite@-webkit-keyframes bouncerightfrom-webkit-transform:translateX(0)to-webkit-transform:translateX(3px)@keyframes bouncerightfromtransform:translateX(0)totransform:translateX(3px)Cara Mengaplikasikan Pada Postingan
1. Masuk ke blogger
2. Pilih Postingan>Entri Baru
3. Masuk ke mode HTML (bukan "Compose")
4. Masukan aba-aba berikut:
<div style="text-align: center;"> <ul class="button2"> <li><a class="demo" href="https://www.kostandroid.com" sasaran="_blank">Demo Link</a></li> <li><a class="download" href="https://www.kostandroid.com" sasaran="_blank">Download Link</a></li> </ul></div><div class="clear"></div>Ubah goresan pena yg bertanda Merah beserta URL yg kau inginkan!5. Lakukan Pratinjau buat melihat hasilnya
Itu dia cara membuat tombol Demo serta Download pada postingan blog. Dengan kau menerapkan cara ini pastinya kualitas postingan kau akan semakin baik serta terlihat profesional.
Yap saya rasa hanya itu yg sanggup saya sampaikan, kurang lebihnya mohon maaf. Terimakasih dan hingga jumpa di postingan berikutnya.
