Cara Mengubah Gaya Tombol Download di Blog

Cara Membuat Tombol Download Menarik

Renovasi Otak: Membuat Tombol Download Menarik di Blogger - Bagi blog yang berisi tentang berbagi file, pasti menyediakan link download pada artikel yang dibuat. Untuk membuat link tersebut menjadi menarik, alangkah baiknya kalian menggantinya dengan tombol download berikut agar terlihat lebih profesional.

Baca Juga: Cara Mengubah Desain Table dengan CSS

Pada kesempatan kali ini, admin akan berbagi tutorial membuat tombol download elegan dengan css. Dengan tampilan yang simple dan keren, pastinya akan membuat pelanggan setia anda tertarik untuk mendownloadnya.
Untuk tutorial membuatnya, kalian tinggal ikuti langkah demi langkah dibawah ini.

Cara Membuat Tombol Download Keren dan Menarik

  • Login ke akun Blogger kalian
  • Masuk ke menu  Template  ➤  Edit HTML 

  • Letakkan kode CSS dibawah ini tepat DIATAS kode ]]></b:skin> atau </style>
    /* DOWNLOAD BUTTON */
    .dlbutton br {display: none !important;}
    
    .dlbutton {
    margin: 0px auto;
    width: 200px;
    position: relative;
    z-index: 1;
    }
    .dlbutton a {
    color: white !important;
    display: block;
    width: 200px;
    height: 50px;
    background: #00897B;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font: 17px/50px Helvetica, Verdana, sans-serif;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&amp;amp;#39;#00b7ea&amp;amp;#39;, endColorstr=&amp;amp;#39;#009ec3&amp;amp;#39;,GradientType=0 );
    }
    .dlbutton a, .slide {
    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    }
    .slide {
    position: absolute;
    z-index: -1;
    display: block;
    margin: -50px 0 0 10px;
    width: 180px;
    height: 40px;
    background: #444;
    color: #fff;
    text-align: center;
    font: 12px/45px Helvetica, Verdana, sans-serif;
    -webkit-transition: margin 0.5s ease;
    -moz-transition: margin 0.5s ease;
    -ms-transition: margin 0.5s ease;
    -o-transition: margin 0.5s ease;
    transition: margin 0.5s ease;
    }
    .dlbutton:hover .bottom {
    margin: -10px 0 0 10px;
    }
    .dlbutton:hover .top {
    margin: -80px 0 0 10px;
    line-height: 35px;
    }
    .dlbutton a:active {
    background: #004D40;
    background: -moz-linear-gradient(top,  #00695C 36%, #0e6578 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00695C), color-stop(100%,#0e6578));
    background: -webkit-linear-gradient(top,  #00695C 36%,#0e6578 100%);
    background: -o-linear-gradient(top,  #00695C 36%,#0e6578 100%);
    background: -ms-linear-gradient(top,  #00695C 36%,#0e6578 100%);
    background: linear-gradient(top,  #4DB6AC 36%,#0e6578 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&amp;amp;#39;#00695C&amp;amp;#39;, endColorstr=&amp;amp;#39;black&amp;amp;#39;,GradientType=0 );
    }
    .dlbutton:active .bottom {
    margin: -20px 0 0 10px;
    }
    .dlbutton:active .top {
    margin: -70px 0 0 10px;
    }
    

  • Sampai disini tombol download sudah bisa dipakai. Untuk cara memakainya gunakan kode dibawah ini:
    <div class="dlbutton">
    <a href="https://renovasi-otak.blogspot.com" target="_blank">Download</a><br />
    <div class="slide top">Aplikasi</div>
    <div class="slide bottom">Size : 40 MB</div>
    </div>
    

Hasilnya akan seperti ini:
Download
Aplikasi
Size : 40 MB

Cukup mudah bukan? ya, itulah cara membuat tombol download menarik. Semoga bermanfaat.
Nando
Anda di sini hanya untuk persinggahan yang singkat. Jangan terburu, jangan khawatir. Yakinlah bahwa Anda menghirup wangi bunga sepanjang perjalanan.

Luangkan sedikit waktu Anda untuk membagikan "Cara Mengubah Gaya Tombol Download di Blog" kepada teman-teman Anda. Hanya dengan menekan Tombol Sosial Media di bawah ini:

Related Posts

Post a Comment

Berlangganan Gratis!

Daftarkan email anda untuk mendapatkan pemberitahuan setiap update artikel terbaru, dan jangan lupa untuk IKUTI Blog kami