Cara Simple Menciptakan Download Box Menyerupai Jalan Tikus

Cara Simple Membuat Download Box Seperti Jalan Tikus - Bagi sahabat yang mempunyai blog download apk tentunya niscaya beringinan menciptakan tombol download pada blog sahabat yang responsif Biar pengunjung merasa nyaman berada di blog sahabat dan menerima kan harapan yang pengunjung ingin kan tentunya apk game, sosial media dll.

Tombol Download ini ibarat Jalan Tikus yang populer akan kontennya yang menarik dan super benerkan??..Nah Tombol Download ini mempunyai 2 tombol download inti yang mempunyai warna yang berdeda, juga mempunyai link alternatif dan gambar icon untuk menambah keunikan agar pengunjung blog sahabat tau apa si yang mau didownload.

Baca Juga : Cara Membuat Download Box di Blogger

Kenapa harus menciptakan tombol yang ibarat ini bang?? kenapa nggak yang biasa aja kan blog download??..Oke aku balik tanya blog sahabat ingin terlihat biasa-biasa saja atau terlihat menarik??
pastinya menarik ya kan?? tombol ini terlihat responsif juga kalau sahabat membuka dalam mode smartphone atau mobile device dengan memakai tombol download ini akan ada nilai tersendiri bagi pengunjung blog sahabat pastinya.

Oke kalau sahabat berkeinginan eksklusif saja ...

Cara Simple Membuat Download Box Seperti Jalan Tikus

Pertama sahabat masuk terlebih dahulu ke Blogger > Tema > Edit HTML lalu copy instruksi CSS dibawah ini dan pastekan sempurna diatas instruksi </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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRrbCwsnIcH-vDZ5snkcMHp4saUi09euuvohqP7in_F6NKm6QPwZnArPOsLMXHROfTLsO09mgMqI74INFYhCaX0XN5OUgAXRxnLW9rLXXnUcTI6RyckVeWjSo8l_ZeCT7M-SENzY6X3CtC/s1600/bukalapak.png')   } .icon-app span.tamago {   background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhchlMEz9m_bUMc-XuqAZ1BWqL2CSiOt4C6gxwuR-umqsUr99TUvTsRPEyKfOhWhL8qA6KxxdtKBiUDG7L095o4akMlDYvMYzUY2kv63qO-2df-t_GJ1SFbfedarfLkShoiajRDh2uY4qj4/s1600/tamago.png'); } .icon-app span.xx1lite {   background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9CGqfs9OAcbRRJ2GHtcoWZqqFQJ2Lq71wPuEvsFBcTObbS8IJC3J3bxXv0vKg1koen-teGkM_E2WXPRFCIHwXiGDBpJuQcexJX3bxVVOIMq5bKV_C-5rpeA1SA-01G_lrSUwoGyADmWLv/s1600/xx1lite.png') } .icon-app span.googleplay {   background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR1Ct_eCZaa-ktNjmG3YuHCBWf4H__Xo5Yo8R1eHjju69tQzoMUnnlmSPXIrwncQ4AEjZjvBozqlgBP35_113RU3DSllBeuhxUmCKpJ1YkuQ-k_PN4aA_DTOO_nOmy0e7KO4-tuls7Evg-/s1600/googleplay.png') } </style>

Pada instruksi yang tercetak warna biru sanggup diganti dengan nama apk yang sahabat ingin share, dan pada instruksi yang tercetak warna merah sanggup diganti dengan link url gambar icon apk yang sahabat ingin share.

Jika sahabat ingin menambahkan nama dan icon pada instruksi 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 sahabat lalu pilih mode HTML bukan Compose copy instruksi 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 sahabat namai dalam instruksi 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 sanggup aku jelaskan tentang Cara Simple Membuat Download Box Seperti Jalan Tikus Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Bagikan Artikel ini