Membuat Tombol Demo dan Download - Blog kumpulan download template, aplikasi atau software biasanya menyediakan widget Demo & Download Button dengan tampilan icon atau animasi bergeser (slide) keren dan menarik perhatian pembaca, Saya pun coba memasang beberapa style tombol ternyata sangat gampang dan sensitif sekali, ingin tau bagaimana cara membuatnya? Berikut tutorial cara menciptakan tombol demo dan download otomatis di blogger.
Tombol download berfungsi mempermudah pengunjung jikalau akan mengunduh atau sekedar melihat demontrasi mengenai Tema blog atau file lain. Pengertian Download button pada blog sanggup diartikan yaitu sebagai alat mengunduh secara otomatis dibentuk link pribadi dari halaman blog.
Memasang download button atau unduh untuk blog kita sanggup menggunakan redesign dari blog ternama ibarat arlinadesign yang ditambahkan isyarat CSS style dan JavaScript untuk menambahkan Icon dari fontawesome dan code Button in HTML semoga tampilan menjadi keren dan bagus.
Untuk menciptakan tombol download dan demo templete atau aplikasi di blog silahkan pilih style dan langkah berikut ini:
Untuk menciptakan Tombol download ibarat pola diatas cukup mudah
1. Login ke blogger.
2. Pada Dashboard pilih sajian Tema > Edit HTML carilah isyarat ]]></b:skin> atau </style> gunakan trik Ctrl+f semoga gampang mencari.
3. Kemudian copy isyarat dalam kotak berikut kemudian pasang sempurna di atas isyarat ]]></b:skin>
4. Jika sudah Simpan tema.
Selanjutnya... Memasang isyarat pemangil di postingan untuk dibentuk tombol download caranya...
1. Buat Postingan gres atau edit, kemudian menciptakan baris gres dan pindahan mode Compose ke tab HTML.
2. Lalu copy dan paste isyarat dibawah pada tab HTML posts tersebut:
<a class="btn" href="Link/url_Download" rel="”nofollow”" target="_blank">Download <i class="fa fa-download"></i></a>
3. Ganti link demo dan link download berwarna dengan alamat tujuan anda.
4. Jika sudah klik Pratinjau dan Simpan.
Demo tombol download bergeser silahkan lihat disini
Untuk memasag download button tampilan geser (slide) ibarat diatas berikut caranya...
1. Buka blog yang mau dibentuk tombol download.
2. Pada sajian Tema > Edit HTML cari kode ]]></b:skin> atau </style> agar gampang mencarinya pakai Ctrl+F.
3. Copy isyarat CSS berikut kemudian paste di atas/depan isyarat ]]></b:skin> atau </style>
(Kode.1)
Langkah selanjutnya... Menerapkan isyarat style fontawesome CSS pada template blog anda, caranya?
1. Masih di HTML cari isyarat </head>
2. Tambahkan isyarat css fontawesome berikut sebelum isyarat </head>
(Kode.2)
3. Kalau sudah semuanya (kode.1 dan kode.2) Simpan tema.
Selanjutnya.... Membuat postingan yang akan dibentuk tombol Demo dan Download...
1. Buat postingan gres atau edit.
2. Tandai saja dimana letaknya > copy dan paste isyarat berikut pada mode HTML posts.
<a class="bie-slide" href="link/url_demo_tujuan" target="_blank">
<a class="bie-slide2" href="link/url_download_tujuan" target="_blank">
3. Silahkan ganti isyarat cuilan warna blok hijau dengan link/url Demo dan Download yang dituju oleh Anda.
4. Coba lihat Pratinjau dulu jikalau berhasil klik Simpan.
Catatan!
Tips!
Sebaiknya sebelum mengedit HTML template Anda back up terlebih dahulu caranya dengan download tema, untuk mencegah terjadinya kesalahan atau error.
Tombol download sederhana tampilan button responsive transparan serbaguna...
Kenapa disebut sederhana dan serbaguna?
Karena tombol ini cukup dibentuk pada postingan saja dan berfungsi bukan hanya sebagai tombol download saja tapi sanggup untuk apa saja sesuai kebutuhan (Download Lagu Video, Aplikasi dll) tinggal ganti teksnya dan buat link tujuan url apa saja sangat responsive.
Seperti ini pola tampilannya:
Cara membutnya cukup pribadi di HTML postingan saja.
1. Buka blog kemudian buat postingan gres atau edit maupun tambahan.
2. Copas isyarat pada script box dibawah pada HTML postingan:
isyarat untuk menciptakan tombol serbaguna:
Keterangan
Catatan!
Tinggal pakai satu cuilan isyarat berikut script nya:
Tinggal menambahkan link/url tujuan pada bagian # dan tulisan Demo.
Untuk posisi tinggal sesuaikan..."center" berarti tengah, jikalau ingin tombol posisinya bergeser kiri jadi "left", sebelah kanan "right" sesuaikan saja oleh sendiri.
Cara ini cukup memasukkan URL gambar logo download kemudian pasang link ke alamat download:
Hanya cara ini harus mempunyai gambar bertuliskan Download yang telah di upload pada postingan sebelumnya, selanjutnya masukkan URL gambar tersebut pada struktur isyarat dibawah ini:
Nah itulah beberapa pola desain dan cara menciptakan Tombol (button) yang tampilan keren, berkhasiat untuk dibentuk link download file dan demo untuk konten blog, aku harap semoga sanggup membantu.
Tombol download berfungsi mempermudah pengunjung jikalau akan mengunduh atau sekedar melihat demontrasi mengenai Tema blog atau file lain. Pengertian Download button pada blog sanggup diartikan yaitu sebagai alat mengunduh secara otomatis dibentuk link pribadi dari halaman blog.
Memasang download button atau unduh untuk blog kita sanggup menggunakan redesign dari blog ternama ibarat arlinadesign yang ditambahkan isyarat CSS style dan JavaScript untuk menambahkan Icon dari fontawesome dan code Button in HTML semoga tampilan menjadi keren dan bagus.
Cara Membuat Tombol Demo & Download di Postingan Blog
Untuk menciptakan tombol download dan demo templete atau aplikasi di blog silahkan pilih style dan langkah berikut ini:
1#. Tombol Demo dan Download ala Arlinadesign
Tombol ini aneka macam blogger yang menggunakan sebab tampilan tombol plus icon fontawesome keren, menarik dan sensitif.Untuk menciptakan Tombol download ibarat pola diatas cukup mudah
1. Login ke blogger.
2. Pada Dashboard pilih sajian Tema > Edit HTML carilah isyarat ]]></b:skin> atau </style> gunakan trik Ctrl+f semoga gampang mencari.
3. Kemudian copy isyarat dalam kotak berikut kemudian pasang sempurna di atas isyarat ]]></b:skin>
>
#wrap {
margin: 20px auto;
text-align: center;
}.btn {
display: inline-block;
position: relative;
font-weight: 700;
background: #3cc091;
padding: 9px 18px;
margin: 0 3px;
border-radius: 3px;
opacity: 1;
border: 0;
text-transform: uppercase;
transition: all .3s ease-out;
}.btn:hover, .btn:active {
background: #374760;
}
a.btn {
color: rgba(255,255,255,1);
}
#wrap {
margin: 20px auto;
text-align: center;
}.btn {
display: inline-block;
position: relative;
font-weight: 700;
background: #3cc091;
padding: 9px 18px;
margin: 0 3px;
border-radius: 3px;
opacity: 1;
border: 0;
text-transform: uppercase;
transition: all .3s ease-out;
}.btn:hover, .btn:active {
background: #374760;
}
a.btn {
color: rgba(255,255,255,1);
}
4. Jika sudah Simpan tema.
Selanjutnya... Memasang isyarat pemangil di postingan untuk dibentuk tombol download caranya...
1. Buat Postingan gres atau edit, kemudian menciptakan baris gres dan pindahan mode Compose ke tab HTML.
2. Lalu copy dan paste isyarat dibawah pada tab HTML posts tersebut:
<br />
<div style="text-align: center;">
<div id="wrap">
<a class="btn" href="Link/URL_Demo" rel="”nofollow”" target="_blank">Lihat Demo <i class="fa fa-paper-plane"></i></a> </div>
<br />
3. Ganti link demo dan link download berwarna dengan alamat tujuan anda.
4. Jika sudah klik Pratinjau dan Simpan.
#2. Tombol Demo dan Download tampilan slide (bergeser)
Demo tombol download bergeser silahkan lihat disini
Untuk memasag download button tampilan geser (slide) ibarat diatas berikut caranya...
1. Buka blog yang mau dibentuk tombol download.
2. Pada sajian Tema > Edit HTML cari kode ]]></b:skin> atau </style> agar gampang mencarinya pakai Ctrl+F.
3. Copy isyarat CSS berikut kemudian paste di atas/depan isyarat ]]></b:skin> atau </style>
(Kode.1)
#wrap { margin:20px auto; text-align:center; }
#wrap br { display:none; }
.bie-slide,.bie-slide2 { position:relative; display:inline-block; height:50px; width:200px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #F9690E; margin:10px; transition:.5s; }
.bie-slide2 { border:2px solid #36D7B7; }
.bie-slide:hover { background-color:#F9690E; }
.bie-slide2:hover { background-color:#36D7B7; }
.bie-slide:hover span.circle,.bie-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#F9690E; }
.bie-slide2:hover span.circle2 { color:#36D7B7; }
.bie-slide:hover span.title,.bie-slide2:hover span.title2 { left:40px; opacity:0; }
.bie-slide:hover span.title-hover,.bie-slide2:hover span.title-hover2 { opacity:1; left:40px; }
.bie-slide span.circle,.bie-slide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; top:0; left:0; transition:.5s; border-radius:50%; }
.bie-slide2 span.circle2 { background-color:#36D7B7; }
.bie-slide span.title,.bie-slide span.title-hover,.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#36D7B7; left:80px; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { left:80px; opacity:0; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { color:#fff; }
#wrap br { display:none; }
.bie-slide,.bie-slide2 { position:relative; display:inline-block; height:50px; width:200px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #F9690E; margin:10px; transition:.5s; }
.bie-slide2 { border:2px solid #36D7B7; }
.bie-slide:hover { background-color:#F9690E; }
.bie-slide2:hover { background-color:#36D7B7; }
.bie-slide:hover span.circle,.bie-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#F9690E; }
.bie-slide2:hover span.circle2 { color:#36D7B7; }
.bie-slide:hover span.title,.bie-slide2:hover span.title2 { left:40px; opacity:0; }
.bie-slide:hover span.title-hover,.bie-slide2:hover span.title-hover2 { opacity:1; left:40px; }
.bie-slide span.circle,.bie-slide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; top:0; left:0; transition:.5s; border-radius:50%; }
.bie-slide2 span.circle2 { background-color:#36D7B7; }
.bie-slide span.title,.bie-slide span.title-hover,.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#36D7B7; left:80px; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { left:80px; opacity:0; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { color:#fff; }
Langkah selanjutnya... Menerapkan isyarat style fontawesome CSS pada template blog anda, caranya?
1. Masih di HTML cari isyarat </head>
2. Tambahkan isyarat css fontawesome berikut sebelum isyarat </head>
(Kode.2)
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
3. Kalau sudah semuanya (kode.1 dan kode.2) Simpan tema.
Selanjutnya.... Membuat postingan yang akan dibentuk tombol Demo dan Download...
1. Buat postingan gres atau edit.
2. Tandai saja dimana letaknya > copy dan paste isyarat berikut pada mode HTML posts.
<br />
<div id="wrap" style="text-align: center;">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>
<br />
3. Silahkan ganti isyarat cuilan warna blok hijau dengan link/url Demo dan Download yang dituju oleh Anda.
4. Coba lihat Pratinjau dulu jikalau berhasil klik Simpan.
Catatan!
- Semua isyarat diatur pada aktivitas HTML templete dan postingan.
- Kode menciptakan tombol diatas sanggup diganti dengan icon/logo yang sesuai sebab templete sudah dipasang isyarat CSS dari awesome pada style.
- Kode diatas bersumber dari https://mamankdzgn.blogspot.com//search?q=cara-membuat-tombol-download-dan-demo-di-blog?m=1
Tips!
Sebaiknya sebelum mengedit HTML template Anda back up terlebih dahulu caranya dengan download tema, untuk mencegah terjadinya kesalahan atau error.
#3. Membuat tombol Demo dan Download sederhana di Postingan tanpa edit HTML Templete
Tombol download sederhana tampilan button responsive transparan serbaguna...
Kenapa disebut sederhana dan serbaguna?
Karena tombol ini cukup dibentuk pada postingan saja dan berfungsi bukan hanya sebagai tombol download saja tapi sanggup untuk apa saja sesuai kebutuhan (Download Lagu Video, Aplikasi dll) tinggal ganti teksnya dan buat link tujuan url apa saja sangat responsive.
Seperti ini pola tampilannya:
Cara membutnya cukup pribadi di HTML postingan saja.
1. Buka blog kemudian buat postingan gres atau edit maupun tambahan.
2. Copas isyarat pada script box dibawah pada HTML postingan:
isyarat untuk menciptakan tombol serbaguna:
<ul>
<div style="text-align: center;">
<button onclick="window.location='# '"><b>Demo</b></button> <button onclick="window.location='#'"><b>Download</b></button></div> </ul>
Keterangan
- Hapus tanda # pertama isi dengan Link/URL_demo tujuan.
- Hapus tanda # yang kedua dengan Link/URL_download atau apasaja dan sesuaikan tulisan.
Catatan!
Kode diatas menampilkan (2) Dua tombol sejajar horizontal, jikalau anda ingin merubah menjadi satu tombol atau jadi tampilan vertikal tinggal anda sesuaikan saja kustomisasi sendiri ibarat ini:
Tinggal pakai satu cuilan isyarat berikut script nya:
<ul>
<div style="text-align: center;">
<button onclick="window.location='# '"><b>Demo</b></button><br/></div>
<div style="text-align: center;">
<button onclick="window.location='# '"><b>Demo</b></button><br/></div>
Tinggal menambahkan link/url tujuan pada bagian # dan tulisan Demo.
Untuk posisi tinggal sesuaikan..."center" berarti tengah, jikalau ingin tombol posisinya bergeser kiri jadi "left", sebelah kanan "right" sesuaikan saja oleh sendiri.
#4. Membuat tombol Download dengan Gambar goresan pena download
Hanya cara ini harus mempunyai gambar bertuliskan Download yang telah di upload pada postingan sebelumnya, selanjutnya masukkan URL gambar tersebut pada struktur isyarat dibawah ini:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://mudahrizki.blogapot.com/" style="margin-left: 1em; margin-right: 1em; text-align: center;" target="_blank"><img border="0" data-original-height="222" data-original-width="400" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc0TGiQOwTGuXgz537wmZlc_uRDUlXtxCVfWDzAiQv6XI6VtRhT-8sB9PihMQeOODJ8oNSzkZD-PzwBALIesngWF1g_neNVD1qY9ey0Yn7nMnqFBOg69WV2dJGYxLo2hZtpL8q2xLozy4/s320/Memasang-Download-button-dengan-gambar.png" width="150" /></a></div>
<a href="https://mudahrizki.blogapot.com/" style="margin-left: 1em; margin-right: 1em; text-align: center;" target="_blank"><img border="0" data-original-height="222" data-original-width="400" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc0TGiQOwTGuXgz537wmZlc_uRDUlXtxCVfWDzAiQv6XI6VtRhT-8sB9PihMQeOODJ8oNSzkZD-PzwBALIesngWF1g_neNVD1qY9ey0Yn7nMnqFBOg69WV2dJGYxLo2hZtpL8q2xLozy4/s320/Memasang-Download-button-dengan-gambar.png" width="150" /></a></div>
- Ganti isyarat warna Merah dengan link download
- Warna Biru silahkan isi dengan URL gambar (untuk mencari url gambar baca cara mengetahui URL gambar)
- Untuk gambar anda sanggup modifikasi sendiri atau cari kemudian download di pixabay.com setelah sanggup > upload ke postingan blog > tinggal ambil URL nya.
Nah itulah beberapa pola desain dan cara menciptakan Tombol (button) yang tampilan keren, berkhasiat untuk dibentuk link download file dan demo untuk konten blog, aku harap semoga sanggup membantu.
