Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial cara membuat tombol demo, download, dan buy now di blogger dengan mudah.
Jika kalian mencari cara membuat tombol demo atau download untuk blog kalian, kalian sudah tepat mampir kesini karena saya akan membagikan beberapa bahkan banyak jenis tombol demo, download, dan buy now.
Jika blog kalian blog download sudah pasti kalian membutuhkan button/tombol download yang sangat ringan dan pas dengan selera kalian, karena tombol download sangat penting fungsinya bagi blog download.
Biasanya tombol demo, download dan buy now ini digunakan oleh blogger dengan niche download seperti aplikasi Android, film, software, template blogger, atau tutorial yang mengharuskan adanya link ke luar halaman blog untuk menuju ke file yang mau di download.
Sebenarnya kalau tidak memasang fitur tombol demo, download atau buy now di blog kalian ini juga tidak apa - apa. Namun akan jauh lebih baik dan terlihat lebih profesional kalau blog kalian memiliki fitur seperti ini yaitu fitur tombol demo, download dan buy now.
Buat kalian yang mau mencoba atau memasang tombol demo, download, dan buy now ini silahkan pilih sesuai selera dan kebutuhan kalian karena saya akan membagikan semuanya. Simak caranya di bawah ini.
Cara Membuat Tombol Demo, Download, dan Buy Now di Blogger
Tombol download yang bagikan hanya menggunakan CSS dan HTML saja jadi kalian tidak usah khawatir dengan kecepatan blog kalian karena css dan html tidak akan memberatkan loading atau kecepatan blog kalian.
Cara membuat tombol download seperti jalan tikus di blogger
- Silahkan masuk ke blog kalian lalu pilih tema dan edit html
- Salin kode di bawah ini dan letakan di atas kode </head>
<style type="text/css">
#box-download,#box-download .box-cover,#box-download .box-cover .box-title{position:relative}#box-download .box-cover .icon-app,#box-download .link-download{position:absolute}#box-download,#box-download .box-cover,#box-download .box-cover .icon-app span,#box-download .box-cover .box-title,#box-download .label-grup,#box-download .link-download a{display:block}#box-download,#box-download .box-cover .icon-app span,#box-download .link-download a{width:100%}#box-download,#box-download .link-download a{border-radius:0.230769230769231em}#box-download{padding:1.15384615384615em;box-sizing:border-box;margin:0.384615384615385em 0;overflow:hidden;min-height:116px;border:1px solid #ddd;font-size:13px!important;max-width:50.0769230769231em;background:#FFF}#box-download a{text-decoration:none}#box-download .box-cover{min-height:6.61538461538462em;margin-right:10.0769230769231em}#box-download .box-cover .icon-app{width:75px;height:75px;top:0;left:0}#box-download .box-cover .icon-app span{background-size:100%;background-repeat:no-repeat;height:100%}#box-download .box-cover .box-title{margin-left:6.15384615384615em}#box-download .box-cover .box-title .app-title{font-weight:bold;color:#252525;font-size:150%}#box-download .box-cover .box-title .app-version{font-size:90%;color:#727171}#box-download .label-grup a{color:#666;font-size:12px}#box-download .box-cover .box-title .tag-os{overflow:hidden;display:inline-block;vertical-align:middle;width:20px;height:20px;background-image:url(https://rawgit.com/mastamvan/image/master/device.png);background-repeat:no-repeat;background-size:100%;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}#box-download .box-cover .box-title .tag-os.android{background-color:#6ab344}#box-download .box-cover .box-title .tag-os.windows{background-position:0 33.33%;background-color:#1f9cf4}#box-download .box-cover .box-title .tag-os.mac{background-color:#606060;background-position:0 66.67%}#box-download .box-cover .box-title .tag-os.blackberry{background-color:#000000;background-position:0 99.99%}#box-download .link-download{max-width:9.61538461538462em;text-align:center;top:1.15384615384615em;right:1.15384615384615em;width:30%}#box-download .link-download a{padding:0.769230769230769em 0;margin-bottom:0.769230769230769em;text-transform:uppercase;color:#fafafa;font-weight:bold;font-size:100%}#box-download .link-download a:nth-child(1){background:#008efa}#box-download .link-download a:nth-child(2){background:#6ab344;margin:0}.link-alternative{position:relative;display:block;font-size:11px;padding:0.909090909090909em 0 0}.link-alternative:before{content:'Alternative:'}.link-alternative a{padding:0 0.384615384615385em 0;border-right:1px solid #bbb;color:#008efa}.link-alternative a:last-child{border:none}@media screen and (max-width:400px){#box-download .box-cover,#box-download .box-cover .icon-app,#box-download .box-cover .box-title,#box-download .link-download{margin:0 auto}#box-download .box-cover .icon-app{position:relative}#box-download .link-download{position:relative;width:100%;right:auto;margin-bottom:0.769230769230769em}}
/*ICON APP*/
.icon-app span{
background-image:url('https://rawgit.com/mastamvan/image/master/download.png')
}
.icon-app span.coc {
background-image:url('https://rawgit.com/mastamvan/image/master/coc.png');
}
.icon-app span.clash-royale {
background-image:url('https://rawgit.com/mastamvan/image/master/clash-royale-icon.png')
}
.icon-app span.get-rich {
background-image:url('https://rawgit.com/mastamvan/image/master/get-rich-icon.png')
}
.icon-app span.adobe-cc {
background-image:url('https://assets.jalantikus.com/assets/cache/300/300/apps/2015/02/18/cc-icon.jpeg')
}
</style>- Simpan tema kalian
Sekarang cara untuk memanggilnya
- Silahkan masuk postingan kalian lalu pilih tampilan html
- salin kode di bawah ini dan letakan ke dalam artikel kalian
<div id='box-download'>
<div class='box-cover'>
<div class='icon-app'>
<span class='coc'/>
</div>
<div class='box-title'>
<span class='app-title'>Clash of Clans</span>
<span class='app-version'>9.24.1</span>
<span class="label-grup"><span class="tag-os android"></span> <a href="#">Aplikasi Android</a></span>
</div>
</div>
<div class="link-download">
<a href="#">Download</a>
<a href="#">Google Play</a>
</div>
<div class="link-alternative">
<a href="#">4shared</a>
<a href="#">Mediafire</a>
<a href="#">Zippyshare</a>
<a href="#">Tusfiles</a>
</div>
</div>- Publish artikel kalian dan selesai.
Untuk yang saya tandai dengan warna kuning silahkan sesuaikan dengan selera kalian.
Cara membuat tombol download berdasarkan urutan dan tugas di blogger
- Silahkan masuk ke blog kalian lalu pilih tema dan edit html
- Salin kode di bawah ini dan letakan di atas kode </style> atau ]]></b:skin>
:root{
/* length size of grid block */
--color-input: #F57C00;
}
input{min-width:50px; width:100%; max-width:400px;background-color:var(--color-input);margin-bottom:5px;border:none;border-radius:4px;color:#fff;padding:15px;text-align:center;text-decoration:none;display:block;font-size:16px;cursor:pointer;font-weight:600; white-space: normal;}
input#step2{background-color:#ddd; cursor:no-drop;}
input#step3{background-color:#ddd; cursor:no-drop;}
input#stepfinal{background-color:#ddd; cursor:no-drop}
#BoxDownload{text-align:center;margin:auto;width:310px;padding:2px;}- Simpan tema kalian
Sekarang cara untuk memanggilnya
- Silahkan masuk postingan kalian lalu pilih tampilan html
- salin kode di bawah ini dan letakan ke dalam artikel kalian
<CENTER>
<h3>Ikuti Step Berikut!</h3>
<input id="step1" onclick="step1()" type="button" value="1. Like Fans Page!" />
<input disabled="" id="step2" onclick="step2()" type="button" value="2. Follow Instagram!" />
<input disabled="" id="step3" onclick="step3()" type="button" value="3. Subscribe Youtube!" />
<input disabled="" id="stepfinal" onclick="stepfinal()" type="button" value="Download File" />
</CENTER>
<p id="textfinal" style="color: #9e9e9e; font-weight: blod; text-alain: center; "></p>Untuk yang saya tandai dengan warna kuning silahkan sesuaikan dengan selera kalian.
- Publish artikel kalian dan selesai.
Cara membuat tombol download box di blogger
- Silahkan masuk ke blog kalian lalu pilih tema dan edit html
- Salin kode di bawah ini dan letakan di atas kode </style> atau ]]></b:skin>
/* CSS Download Box by telatngoding.com */
.dbox-title {
padding: 8px 10px;
margin: 8px 0 3px;
color: #FFF;
background: #3498db;
}
.dbox-wrap {
font-size: 11px;
font-weight: bold;
background: #F5F5F5;
padding: 10px;
margin: 10px 0;
}
.dbox {
margin: 0;
padding: 0;
list-style: none;
}
.dbox-list {
background: #E4E4E4;
margin-bottom: 2px;
line-height: 26px;
padding: 0 5px;
}
.dbox-list strong {
background: #3498db;
border-right: 2px solid #F5F5F5;
width: 65px;
display: block;
float: left;
margin-left: -5px;
margin-right: 5px;
color: #FFF;
padding: 0 5px;
text-align: center;
}
.dbox-list a {
color: #6d6d6d;
}
.dbox-list a:hover {
color: #222;
}
@media only screen and (max-width: 360px) {
.dbox-list strong {width:100%}
.dbox-title {text-align:center}
}- Simpan tema kalian
Sekarang cara untuk memanggilnya
- Silahkan masuk postingan kalian lalu pilih tampilan html
- salin kode di bawah ini dan letakan ke dalam artikel kalian
<div class="dbox-wrap"> <div class="dbox"> <div class="dbox-title">Judul Film</div> <div class="dbox-list"> <strong>480p</strong> <a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> | <a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> | <a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> | <a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> | <a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a> </div> <div class="dbox-list"> <strong>720p</strong> <a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> | <a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> | <a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> | <a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> | <a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a> </div> <div class="dbox-list"> <strong>1080p</strong> <a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> | <a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> | <a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> | <a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> | <a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a> </div> </div> <div class="dbox"> <div class="dbox-title">Nama Software</div> <div class="dbox-list"> <strong>Part1</strong> <a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> | <a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> | <a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> | <a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> | <a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a> </div> <div class="dbox-list"> <strong>Part2</strong> <a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> | <a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> | <a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> | <a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> | <a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a> </div> <div class="dbox-list"> <strong>Part3</strong> <a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> | <a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> | <a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> | <a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> | <a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a> </div> </div> </div>
Silahkan edit sesuaikan dengan selera kalian.
- Publish artikel kalian dan selesai.
Cara membuat tombol download yang ringan dan responsive di blogger
- Silahkan masuk ke blog kalian lalu pilih tema dan edit html
- Salin kode di bawah ini dan letakan di atas kode </style> atau ]]></b:skin>
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}- Simpan tema kalian
Sekarang cara untuk memanggilnya
- Silahkan masuk postingan kalian lalu pilih tampilan html
- salin kode di bawah ini dan letakan ke dalam artikel kalian
<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li> <li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li> </ul> </div>
Untuk yang saya tandai dengan warna kuning silahkan isi dengan URL kalian.
- Publish artikel kalian dan selesai.
Cara membuat tombol demo dan download untuk template Viomagz, Linkmagz, dan Evomagz
- Silahkan masuk postingan kalian lalu pilih tampilan html
- salin kode di bawah ini dan letakan ke dalam artikel kalian
<a class="buttonDownload" href="#">Download</a>Untuk yang saya tandai dengan warna kuning silahkan sesuaikan dengan URL kalian.
- Publish artikel kalian dan selesai.
Cara membuat tombol demo dan download berwarna - warni yang keren di blogger
- Silahkan masuk ke blog kalian lalu pilih tema dan edit html
- Salin kode di bawah ini dan letakan di atas kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> - Lanjut sekarang salin kode di bawah ini dan letakan di atas kode </style> atau ]]></b:skin>
/* model flat ui 2 */
.button2{float:center;list-style:none;text-align:center;width:250px;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:#3498db;display:block;color:#fff !important;font-weight:500;font-size:14px;text-align:center;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:200px;margin:auto;overflow:hidden}
.button2 li a.download{background:#e74c3c}
.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-animaton: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)}} - Simpan tema kalian
Sekarang cara untuk memanggilnya
- Silahkan masuk postingan kalian lalu pilih tampilan html
- salin kode di bawah ini dan letakan ke dalam artikel kalian
<div class="text-align:center;"> <ul align="center" class="button2"> <li style="text-align: center;"><a class="demo" href="https://www.telatngoding.com/" target="_blank">Demo</a></li> <li style="text-align: center;"><a class="download" href="https://www.telatngoding.com/" target="_blank">Download</a></li> </ul>
Untuk yang saya tandai dengan warna kuning silahkan sesuaikan dengan URL kalian.
- Publish artikel kalian dan selesai.
Cara membuat tombol demo, download, dan buy now yang responsive di blogger
- Silahkan masuk ke blog kalian lalu pilih tema dan edit html
- Salin kode di bawah ini dan letakan di atas kode </head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'/> - Lanjut sekarang salin kode di bawah ini dan letakan di atas kode </style> atau ]]></b:skin>
#btn-keren {margin: 10px auto;
text-align: center;}
#btn-keren br {display: none;}
.btn-keren1, .btn-keren2, .btn-keren3 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 50px;background: #fdfdfd;border: 2px solid #009688;margin: 10px;transition: .5s}
.btn-keren2 {border: 2px solid #3f51b5;}
.btn-keren3 {border: 2px solid #d83500;}
.btn-keren1:hover {background-color: #009688;}
.btn-keren2:hover {background-color: #3f51b5;}
.btn-keren3:hover {background-color: #d83500;}
.btn-keren1:hover span.circle, .btn-keren2:hover span.circle2, .btn-keren3:hover span.circle3 {left: 100%;margin-left: -45px;background-color: #fdfdfd;}
.btn-keren1:hover span.circle{color: #009688;}
.btn-keren2:hover span.circle2 {color: #3f51b5;}
.btn-keren3:hover span.circle3 {color: #d83500;}
.btn-keren1:hover span.title, .btn-keren2:hover span.title2, .btn-keren3:hover span.title3 {left: 40px;opacity: 0;}
.btn-keren1:hover span.title-hover, .btn-keren2:hover span.title-hover2, .btn-keren3:hover span.title-hover3 {opacity: 1;left: 40px;}
.btn-keren1 span.circle, .btn-keren2 span.circle2, .btn-keren3 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%;}
.btn-keren2 span.circle2 {background-color: #3f51b5;}
.btn-keren3 span.circle3 {background-color: #d83500;}
.btn-keren1 span.title,.btn-keren1 span.title-hover, .btn-keren2 span.title2,.btn-keren2 span.title-hover2,.btn-keren3 span.title3, .btn-keren3 span.title-hover3 {position: absolute;left: 90px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #009688;transition: .5s;}
.btn-keren2 span.title2,.btn-keren2 span.title-hover2 {color: #3f51b5;left: 80px;}
.btn-keren3 span.title3,.btn-keren3 span.title-hover3 {color: #d83500;left: 80px;}
.btn-keren1 span.title-hover, .btn-keren2 span.title-hover2, .btn-keren3 span.title-hover3 {left: 80px;opacity: 0;}
.btn-keren1 span.title-hover, .btn-keren2 span.title-hover2, .btn-keren3 span.title-hover3 {
color: #fff;
} - Simpan tema kalian
Sekarang cara untuk memanggilnya
- Silahkan masuk postingan kalian lalu pilih tampilan html
- salin kode di bawah ini dan letakan ke dalam artikel kalian
<div id="btn-keren"> <a href="#" class="btn-keren1" target="_blank"> <span class="circle"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M21,14H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10L8,21V22H16V21L14,18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z" /> </svg></span> <span class="title">Demo</span> <span class="title-hover">Click here</span> </a> <a href="#" class="btn-keren2" target="_blank"> <span class="circle2"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /> </svg></span> <span class="title2">Download</span> <span class="title-hover2">Click here</span> </a> <a href="#" class="btn-keren3" target="_blank"> <span class="circle3"><svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z" /> </svg></span> <span class="title3">Buy Now</span> <span class="title-hover3">Click here</span> </a> </div>
Untuk yang saya tandai dengan warna kuning silahkan sesuaikan dengan URL kalian.
- Publish artikel kalian dan selesai.
Bagaimana sangat bagus bukan beberapa tombol demo dan download yang bagikan, buat kalian yang mau membuat tombol demo dan download silahkan pilih salah satunya sesaui kebutuhan kalian.
Kalian juga bisa mengedit CSS pada kode tersebut untuk merubah warna maupun posisinya karena kode yang saya bagikan bersifat open source.
Sekian dulu artikel tentang Cara Membuat Tombol Demo, Download, dan Buy Now di Blogger Dengan Mudah semoga bermanfaat dan terimakasih sudah mampir.