Cara Membuat Modal Download Box

Cara Membuat Modal Download Box

Cara Membuat Modal Download Box - Bagi sobat yang mengelola situs berbagi gratis seperti aplikasi Android, Film, Anime dan lain sebagainya pasti tidak asing dengan yang namanya Download Box. Mengelola dan mengatur tombol unduh semearik mungkin menjadi pilihan untuk mendapatkan kunjungan dari banyak pengunjung. Contoh dari download box sendiri biasanya bisa ditemukan di situs-situs Anime atau Perfilman Gratis yang seperti Samehadaku.tv, Oplover, Mynime.xyz dan situs fanshare lainnya. Setiap situs memiliki keunikan dalam mengelola tombol unduhnya masing-masing.


Pada kesempatan kali ini saya akan membagikan tutorial yang sangan mudah yakni membuat box unduhan dengan gaya modal on click, download box akan ditampilkan setelah sobat mengklik tombol pemicunya seperti contoh dibawah ini:



Gimana tertarik untuk membuatnya? berikut cara memasangnya dan ikuti langkah-langkahnya.

Cara Membuat Download Box dengan Modal on Click

Langkah Awal sobat harus menyimpan kode CSS pada tag <style> atau diatas kode </b:skin>.


<style>
.modal-blank-screen{position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0.5);z-index:-1;transition:.5s;opacity:0}
.modal-blank-screen.active{opacity:1;z-index:999999999}
.modal-box{position:absolute;width:100%;max-width:400px;top:50%;left:50%;background-color:#fff;transform:translate(-50%,-50%)}
.modal-content{box-sizing:border-box;position:relative}
.modal-header{text-align:center}
.closeBtn{position:absolute;color:#fff;width:30px;height:30px;right:0;top:0;z-index:1}
.closeBtn::before{content:"";position:absolute;top:50%;left:50%;height:3px;width:50%;background:#fff;border-radius:2px;cursor:pointer;transform:translate(-50%,-50%) rotate(45deg)}
.closeBtn::after{content:"";position:absolute;top:50%;left:50%;height:3px;width:50%;background:#fff;border-radius:2px;cursor:pointer;transform:translate(-50%,-50%) rotate(-45deg)}
.downloader{position:relative;box-shadow:0 2px 5px rgba(0,0,0,0.5);border-radius:3px}
.downloader h4{display:block;text-align:center;margin:0;padding:10px 0;background:#444;color:#fff;font-family:monospace}
.downloader ul{margin:0;padding:24px;list-style:none;}
.downloader li{list-style:none}
.downloader > ul > li > a{display:inline-block;width:48%;text-align:center;box-sizing:border-box;line-height:32px;margin-bottom:10px;background:#444;margin:1%;color:#fff;text-decoration:none;border-radius:3px;transition:.5s;font-family:monospace;box-shadow:0 2px 5px rgba(0,0,0,0.5)}
.downloader > ul > li > a:hover{background:#888}
</style>

selanjutnya, menempelkan kode Javascript untuk memunculkan modal boxnya tepat diatas tag </body>


<script>
function openModal(open) {
 document.getElementsByClassName('modal-blank-screen')[0].classList.add('active')
}
function closeBtn(close) {
 document.getElementsByClassName('modal-blank-screen')[0].classList.remove('active')
}
</script>

Setelah pemasangan Javascript dan CSS diatas jangan lupa untuk menyimpannya.

Jika sudah selesai, sobat tinggal membuat struktur kode HTML download boxnya seperti berikut ini:


<!-- Modal Box by Codepelajar.com -->
<div class="modal-blank-screen" onclick="closeBtn()">
    <div class="modal-box">
        <div class="modal-content">
            <!-- Tombol Close-->
                <span class="closeBtn" onclick="closeBtn()"></span>
            <div class="downloader">
                <h4>Download Box</h4>
                <ul>
                    <li><a href="#">Google Drive</a><a href="#">Uptobox</a></li>
                    <li><a href="#">Mediafiles</a><a href="#">Uptocrott</a></li>
                    <li><a href="#">AceFiles</a><a href="#">Dropbox</a></li>
                    <li><a href="#">Upfiles</a><a href="#">DownAce</a></li>
                    <li><a href="#">Mega</a><a href="#">Meowdrive</a></li>
                    <li><a href="#">Tusfiles</a><a href="#">Github</a></li>
                    <li><a href="#">Mirror 1</a><a href="#">Mirror 2</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Ganti tanda "#" dengan link download yang ingin sobat isikan. Langkah terakhir sobat tinggal membuat pemicunya dengan menambahkan attribut onclick="openModal()" pada tombol download pemicunya seperti demonstrasi diatas.

<ul class="button"><li><a href="#" onclick="openModal()" class="download"></a></li></ul>

Demikian artikel tutorial yang bisa saya bagikan untuk sobat. Bila ada pertanyaan atau kebingungan seputar pemasangannya bisa dengan berkomentar dibawah. Jika artikel ini dapat membantu mohon untuk membagikannya melalui tombol share dibawah. Terima kasih sampai di tutorial Codepelajar berikutnya.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel