Cara Simple Menciptakan Download Box Menyerupai Jalan Tikus

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

Tombol Download ini menyerupai 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 semoga pengunjung blog teman tau apa si yang mau didownload.

Baca Juga : Cara Membuat Download Box di Blogger

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

Oke kalau teman berkeinginan eksklusif saja ...

Cara Simple Membuat Download Box Seperti Jalan Tikus

Pertama teman 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/AVvXsEjctrZACJY-4nzQFf0t1UpbaE8_So1t-v2TyKha_zcdnSTjdS8KdxBD5JGC7dltN2AXfoMwpmFaVvMgiXIdizfxQj19Rv1KE2in4rHzLtS5fEeWrex9bXb2mvxS_cS0osI4mAQQtWsXhTuj/s1600/bukalapak.png')   } .icon-app span.tamago {   background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf57ZyA6teSFe9ec6GDfG1hcMgL80yL8GRqDhlgIneA_By5A93hVqsap2D3iBO-rZaMDIoUeJsaJQGNcBc0i3C0hDOwBNiVvhs1jCAReDm7GxHDhc8KTL53bR8_31FiqaZk2gNvwwbQvjr/s1600/tamago.png'); } .icon-app span.xx1lite {   background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIT8LjhuMzD-zrI741ovANmYJdZjFZ0R7vl8ivdry9wC0PW6TXoSakx8puIPxHiw0Ph7xD_qQi1KK04BJsUyI9bERGeWDf9oNRhdXoJRCcyDckfW3L1q6Z_C42Ss_4KCZK9vvcJkGh4egR/s1600/xx1lite.png') } .icon-app span.googleplay {   background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZPsw4m8hRHefylKgWpW9KZVqlSfoiPOBSlwxNcXCIGOs5TGa_tgg_uMmicdKFyKT4nhTO9mVSgzvoLgOgw0Eknlyh6zpTqqdnhPPBwT6uMtb-7ta4O23JmPRbKQWc_CnOWp0DiJZG6qRo/s1600/googleplay.png') } </style>

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

Jika teman 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 teman 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 teman 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