Hallo,sobat Blog IDTemplatez ,Sudah lama saya nggak Update Postingan,Tentu saya mempunyai alasan tersendiri Mengenai Hal Tersebut Mulai dari kesibukan pribadi hingga Kehilangan Semangat Untuk Posting,Oke Pada kesempatan Kali ini saya akan Kembali membahas tentang Modal Download Box,Fitur Ini sangatlah penting Bagi sobat Yang mengelola Situs Bertemakan download Anime,Musik atau Sebagainya.
Lalu Bagaimana Cara membuat Modal download Box ??
Caranya Cukup mudah,Tinggal kalian ikuti Tutorial ini dengan seksama dan Praktekan,Saya yakin Anda Pasti Bisa,Untuk Contohnya Silahkan Lihat Di Bawah :
Cara membuat Download Box degan Modal Button On Click
1.Sobat Pasang Kode CSS Ini di bagian :
</b:skin> atau <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}
ul {list-style: none};
2.Selanjutnya Pasang Kode Javascript Ini Tepat di atas Kode
</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>3.Setelah Javascript Dan CSS Berhasil Terpasang,Jangan Lupa Untuk menyimpanya.
4.Terakhir Pasang HTML Di Bawah Ini , Untuk penempatan Sesuai Selera.
<html>
<head>
</head>
<body>
<ul class="button"><li><a href="#" onclick="openModal()" class="download">SHOW</a></li></ul>
<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>Menu</h4>
<ul>
<li><a href="#">ELECTRONIC</a><a href="#">ENTERTAIMENT</a></li>
<li><a href="#">MUSIC</a><a href="#">CSS</a></li>
<li><a href="#">FILE</a><a href="#">HTML</a></li>
<li><a href="#">OS</a><a href="#">JAVASCRIPT</a></li>
<li><a href="#">APK</a><a href="#">PHP</a></li>
<li><a href="#">HACKING</a><a href="#">RUBY</a></li>
<li><a href="#">TUTORIAL</a><a href="#">ANGULAR</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Assalamu'alakum Wr.wb
Source : https://www.codepelajar.com/2018/08/cara-membuat-modal-download-box.html/
2 Komentar
Terimakasih Telah Berkunjung Di Blog Ini ,Dan Patuhi Peraturan Di blog ini
(1) Bertanya Sesuai dengan Topik
(2) Dilarang menaruh Link Aktiv Yang mengarah ke situs (Judi,Porno,Sara)
(3) Gunakan Tata bahasa yang baik Jika berkomentar
(4) Hargailah Komentar/Pendapat Orang
:: Komentar Kalian saya Tunggu::
Subscribe to:
Post Comments (Atom)
Assalamualaikum. Wr, Wb
ReplyDeletepermisi bro ,saya admin codepelajar.com menegaskan, untuk penggunaan thumbnail dari situs kita itu "dilarang" dan udah ada kebijakannya ya, cek Kebijakan dan Privasi Codepelajar.com
Jadi dimohon untuk segera mengganti thumbnailnya ya begitu pun postingan yang lainnya.. :D,
trimakasih..
Oke Gan,Thanks Buat Infonya
ReplyDelete