Cara Membuat Tombol Popup Sederhana dengan CSS dan Fungsi Href #

Tujuan simbol tersebut adalah agar ketika diklik tidak mengarah ke link yang lainnya. Bagaimaana kalo dibiarkan tanpa ada simbol #? umpama saja seperti ini <a href=''>nama link</a>. Tentunya pada postingan google akan mengisi secara otomatis kurang lebih akan menjadi <a href='https://blogger.com=null'>nama link</a> kurang lebih seperti itulah. Jika hal itu terjadi pastinya akan menjadi broken link dan membuat blog Anda tercemar di mata google.
Apakah simbol # pada fungsi href bisa dimanfaatkan? Jawabannya adalah bisa. Untuk memanfaatkan simbol # kita bisa menggunakan kode id untuk mengarahkannya. Kebanyakan fungsi href ini digunakan pada template Landing Page.
Misal pada menu header ada tulisan Download dengan funsi href <a href='#download'>Download</a> dan pada template Landing Page di area footer terdapat area untuk download. Untuk mengarahkan ke area download tersebut kita tinggal buat kode
<div id='download'> <!--pembuka kode--> Area download disini </div><!--penutup kode-->
Fungsi href ini juga bisa digunkan untuk tombol popup. Untuk membuatnya kita butuh kode CSS agar tampilannya lebih menarik dan menjadi popup
Misal saja kita ingin buat popup dengan simbol # dan tulisan popup untuk mengidentitaskan simbol tersebut maka kode CSS-nya seperti ini
Kode CSS Popup
#popup { display:none; visibility: hidden; opacity: 0; position:absolute; margin:0; }
Ketarangan
display:none, opacity:0, dan visibility:hidden adalah kode untuk menyembunyikan konten yang akan dijadikan popup.
Ketika kita klik popup tersebut agar bisa terlihat kita bisa menggunkkan kode CSS berikut
kode CSS target popup
#popup:target{ display:block; visibility:visible; opacity:1; background-color:rgba(0,0,0,0.5); position:fixed!important; display:flex!important; top:0;left:0; right:0; bottom:0; margin:0; width:100%; height:100%; overflow-y:auto; padding:10px 0; z-index:99999999999; -webkit-transition:.2s; -moz-transition:.2s; transition:.2s }
Keterangan
display:block, opacity:0, dan visibility:visible adalah kode untuk menampilkan konten yang akan muncul menjadi popup
untuk kode HTML nya sebagai pemanggil CSS nya adalah seperti ini
<a href='#popup' target='_top'>popup</a>
dan kode HTML targetnya adalah seperti ini
<div id='popup'> <a href='#close'>Tutup popup</a> Isi konten yang akan dijadikan popup </div>
Keterangan
kode <a href='#close'>Tutup popup</a> harus ada, karena jika tidak ada Anda tidak akan bisa menutup isi konten yang Anda buat popup
Contoh penggunaan fungsi href # untuk popup
Kode CSS
#popup {display:none;visibility: hidden;opacity: 0;position:absolute;margin:0;} #popup:target{display:block;visibility:visible;opacity:1;background-color:rgba(0,0,0,0.5);position:fixed!important;display:flex!important;top:0;left:0;right:0;bottom:0;margin:0;width:100%;height:100%;overflow-y:auto;padding:10px 0;z-index:99999999999;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s} .opo-wrap{margin: auto} .opo{display:block;margin:auto;width:550px;max-width:100%;background:#fff;color:#333;padding:20px;overflow:auto;max-height:calc(100vh - 150px)} .close{background:#fff;color:#333;padding:10px;margin:auto;text-align:center;}Keterangan
margin: auto digunakan agar isi konten yang dijadikan popup di posisi tengah kalau secara default akan berada di kiri paling atas. max-height:calc(100vh - 150px) adalah kode yang bertujuan untuk membatasi tinggi isi konten popup, untuk ukuran 150px bisa menyesukaikan. overflow:auto adalah kode agar isi konten saat melebihi batas area layar bisa di scroll.
Kode HTML
<div id='popup'> <div class='opo-wrap'> <div class='close'><a href='#tutup'>Tutup Wae lah</a></div> <div class='opo'>Opo iki Opo iki<br/> Opo iki<br/> Opo iki<br/> Opo iki<br/> <br/> Opo iki<br/> Opo iki<br/> Opo iki<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> Opo iki<br/> Opo iki<br/> Opo iki<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> Opo iki Opo iki <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> Opo iki </div> </div> </div>
Untuk lebih jelasnya terkait kode tersebut Anda bisa melihat demonya dibawah ini
Demikianlah tutorial terkakit Cara Membuat Tombol Popup Sederhana dengan CSS dan Fungsi Href #. Semoga bermanfaat.
NB:
Jangan dibully saya masih pemula, jadi penamaan atau istilah mungkin ada yang salah.
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
contact atau 089677337414 - Terima kasih.