Cara Menciptakan Tombol Download Keren Di Blog


Views:
BY
0 COMMENTS

Cara Membuat Tombol Download Keren di Blog-Halo,kali ini saya akan membagikan sedikit perihal tutorial blogging yakni bagaimana cara menciptakan tombol download di blog.Tombol download biasanya dipakai untuk situs download apk atau software.Tombol download yang keren niscaya akan menarik perhatian pengunjung untuk mengunjungi situs kau misalnya menyerupai ini.
Bagi kau yang sedang mencari bagaimana cara menciptakan tombol download menyerupai diatas,saya akan memperlihatkan tutorialnya sebagai berikut:

1.Tentunya kau harus login ke akun blogger kamu

2.Masuk ke menu Template dan klik Edit HTML dan cari instruksi </head>

3.Copy dan pastekan instruksi berikut sempurna diatas instruksi </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}}

 sumber(mastamvan.blogspot.com)

Ubah URL Gambar Sesuai logo aplikasi yang ingin kau upload.
copy link dan buat instruksi gres menyerupai ini:
icon-app span.NAMA_ICON {
  background-image:url('LINK_ICON');
}

4.ganti NAMA ICON sesuai yang akan kau upload dan jangan di kasih spasi

5.Klik simpan

Cara Memasukkan HTML kedalam postingan

1.Masuk ke postingan yang akan kau pasang tombol download

2.Pilih mode HTML kemudian copy paste instruksi berikut

<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>
  •  COC ganti dengan nama aplikasi yang terdaftar dalam CSS tadi
  • Clash Of Clans ubah dengan aplikasi yang akan kau upload
  • android sesuaikan dengan sistem operasi aplikasi yang akan kau upload
  • 9.24.1 ganti dengan versi aplikasi yang akan kau upload
  • tanda # ganti dengan link download milik kalian
 Selesai sekian dan terimakasih.

Tombol download diatas menyerupai dengan tombol download di Jalantikus.com dan instruksi diatas saya ambil di blog mastamvan.blogspot.com

0 comments:

Post a Comment