Cara Membuat Download Box Keren di Blogger

March 14, 2020

Tutorial

Kali ini gw bakal share cara buat box download keren untuk blog kalian. Oke langsung aja ke tutorialnya.
1. Buka blog kalian, pergi ke tema lalu pilih Edit HTML
2. Cari tag </head> pastekan ini di atasnya

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIC3h2eN9DgFoG5z5AzXJNaTy6tTkdY1Ugv8SrIb_pyJr20JNQce7Zrd3-gRJAJGmw0SM4d0msDvL_xhUXjJuM9Ik5lKvlEfTtUQCRt58FS3mP3rpvQwL0UBk3gM2UOIUI07w8R0VN4oii/s1600/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:#69b344}#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:#52ada2}#box-download .link-download a:nth-child(2){background:#e54b49;margin:0}.link-alternative{position:relative;display:block;font-size:11px;padding:0.909090909090909em 0 0}.link-alternative:before{content:&#39;Alternative:&#39;}.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(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0n_Ljl3BHKkit972YWF4DaErcIOYJtuifV066Tfgvojb5MWV4zlOvT6h67gwW7fcXMPdmhACnb6bB9C3Qom8umQRA8FkMrXVtNHl5G6o27YaCTflWS-5_LO1DW_Kudb9GqFLlAP4FxS-S/s1600/download.png&#39;)  
}
.icon-app span.fb {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyEzzJ0Iuae9kRIF3pMbs7QXKHGf9_9F1spzFFyfxDqGk4e7QOp3rLcTgsvslJT6Z1PLrUQ7OSLOl6jGvI9_vtCNEdLAdg2kfR0Uqc_ccfY-m1mPl8ZlvULd2QaBScQizTIJ6GF6xSRno/s1600/pasang+html+box.jpg);
}
</style>

3. Setelah itu save.

NOTE.

ICON APP : Icon untuk app ini, nanti akan ditampilkan pada tombol downloadnya, kalian bisa menambah atau menggantinya icon lainnya sesuai keinginan anda, dengan cara:

Upload gambar yang ingin dijadikan icon
Copy linknya dan bikin css baru seperti :


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

Untuk nama icon jangan kasih spasi dan jangan ada yg sama, nanti bentrok
4. Tambahkan code ini pada postingan untuk memanggil box download.


<div id="box-download">
  <div class="box-cover">
    <div class="icon-app">
      <span class="fb"></span>
    </div>
    <div class="box-title">
      <span class="app-title">Facebook</span>
      <span class="app-version">231.0.0.39.113</span>
      <span class="label-grup"><span class="tag-os android"></span> <a href="https://www.blogger.com/blogger.g?blogID=5225780329097995340#">Aplikasi Android</a></span>
      <span class="label-grup"><span class="tag-os mac"></span> <a href="https://www.blogger.com/blogger.g?blogID=5225780329097995340#">Aplikasi iOS</a></span>
    </div>
  </div>
  <div class="link-download">
    <a href="https://play.google.com/store/apps/details?id=com.facebook.katana&amp;hl=in">Google Play</a>
    <a href="https://apps.apple.com/id/app/facebook/id284882215">App Store</a>
</div>

NOTE.

FB : Ganti dengan nama icon yang sudah ada didaftar pada css
Facebook : Ganti dengan nama aplikasi
231.0.0.39.113 : Ganti dengan versi aplikasi
Android dan Mac : Sesuaikan dengan sistem operasi, kalian bisa menggantinya dengan windows, mac dan blackberry
# (Tanda Pagar) : Ganti dengan link download kalian