Cara Simple Membuat Download Box Seperti Jalan Tikus

Cara Simple Membuat Download Box Seperti Jalan Tikus - Bagi sobat yang mempunyai blog download apk tentunya pasti beringinan membuat tombol download pada blog sobat yang responsif Biar pengunjung merasa nyaman berada di blog sobat dan mendapat kan keinginan yang pengunjung ingin kan tentunya apk game, sosial media dll.

Tombol Download ini seperti Jalan Tikus yang terkenal akan kontennya yang menarik dan super benerkan??..Nah Tombol Download ini memiliki 2 tombol download inti yang memiliki warna yang berdeda, juga memiliki link alternatif dan gambar icon untuk menambah keunikan biar pengunjung blog sobat tau apa si yang mau didownload.

Baca Juga : Cara Membuat Download Box di Blogger

Kenapa harus membuat tombol yang seperti ini bang?? kenapa nggak yang biasa aja kan blog download??..Oke saya balik tanya blog sobat ingin terlihat biasa-biasa saja atau terlihat menarik??
pastinya menarik ya kan?? tombol ini terlihat responsif juga jika sobat membuka dalam mode smartphone atau mobile device dengan menggunakan tombol download ini akan ada nilai tersendiri bagi pengunjung blog sobat pastinya.

Oke jika sobat berkeinginan langsung saja ...

Cara Simple Membuat Download Box Seperti Jalan Tikus

Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML kemudian copy kode CSS dibawah ini dan pastekan tepat diatas kode </head> atau &lt;/head&gt;

<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.buka-lapak {
  background-image:url('https://1.bp.blogspot.com/-pBACrc1TIJ8/W4YmXB5ng0I/AAAAAAAAAno/7Ach-C2I8jI6y4dQZ_HOCEBX-chhts-HQCLcBGAs/s1600/bukalapak.png')  
}
.icon-app span.tamago {
  background-image:url('https://3.bp.blogspot.com/-EbEh5T41gK0/W4YcPEJ4AcI/AAAAAAAAAk0/L43EVEx2viwFAousOyEz3bNgnjTWmPL8QCLcBGAs/s1600/tamago.png');
}
.icon-app span.xx1lite {
  background-image:url('https://1.bp.blogspot.com/-9JzjWUqwnHI/W4YgVpyitdI/AAAAAAAAAmM/NzEHN6OeYlIAHJ7FEK2j4AvSVXJ7J6ZlQCLcBGAs/s1600/xx1lite.png')
}
.icon-app span.googleplay {
  background-image:url('https://4.bp.blogspot.com/-adMyV2Ce2VA/W4YjYsmNXcI/AAAAAAAAAmk/sSHuJI9Kne0Nto62fT8CRKZRN83SfvwugCLcBGAs/s1600/googleplay.png')
}
</style>

Pada kode yang tercetak warna biru bisa diganti dengan nama apk yang sobat ingin share, dan pada kode yang tercetak warna merah bisa diganti dengan link url gambar icon apk yang sobat ingin share.

Jika sobat ingin menambahkan nama dan icon pada kode CSS

.icon-app span.NAMA_ICON {
  background-image:url('LINK_ICON');
}

Jika sudah Klik simpan pada tema.

cara memasang pada postingan blog sobat.

Masuk dalam postingan sobat kemudian pilih mode HTML bukan Compose copy kode dibawah ini

<div id='box-download'>
<div class='box-cover'>
  <div class='icon-app'>
    <span class='buka-lapak'/>
  </div>
  <div class='box-title'>
   <span class='app-title'>Buka Lapak</span>
   <span class='app-version'>v3.5.7</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>

CATATAN GUYS
buka-lapak : nama icon yang sudah sobat namai dalam kode CSS sebelumnya
Buka Lapak : nama apknya
v3.5.7 : Versi berapa apknya
Android : os aplikasi tersebut misalkan support diandroid atau ios

Jika sudah Klik publikasikan.

Baca Juga : Cara Membuat Note Box Berwarna di Blog

Oke sekian yang bisa saya jelaskan tentang Cara Simple Membuat Download Box Seperti Jalan Tikus Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.