Skip to main content

Recent Disqus

Click Here On Load Disqus

Cara Membuat Tombol Popup Sederhana dengan CSS dan Fungsi Href #

Cara Membuat Tombol Popup Sederhana dengan CSS dan Fungsi Href #
Cara Membuat Tombol Popup Sederhana dengan CSS dan Fungsi Href #
www.azid45.web.id - Cara Membuat Tombol Popup Sederhana dengan CSS dan Fungsi Href #. Pada kesemapatan kali ini saya akan membagikan fungsi href dengan simbol #. Ketika kita membuat fungsi <a href='#'>nama blog</a>, pada simbol # ini seharusnya adalah alamat yang akan di tuju atau link karena masih belum ada yang dituju maka di ganti dengan simbol #.

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.
Reactions
PERHATIAN:Jika anda mendownload di blog ini, maka anda akan di redirect terlebih dahulu ke laman Short Safelink untuk keamanan blog. Oleh karena itu jika terjadi error 404 maka terjadi kesalahan dalam klik di laman redirect atau terjadi refresh laman redirect. Untuk mengatasinya anda bisa mengulang kembali klik file yang akan anda download di blog ini. Dan Jika anda ingin bertanya atau bantuan bisa kontak kami dengan Klik Disini atau nomor berikut 089677337414 - Terima kasih.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui
Buka Komentar
Tutup Komentar