Cara membuat jendela pop up di html

Question

Cara Membuat Link Pop Up

Kalian pasti sudah mengetahui link biasa jika di klik akan langsung menuju halaman yang ada pada link tersebut. Ada juga link yang akan membuka page baru ketika di klik. Sedangkan pada tutorial kali ini, akan kita buat link yang bersifat pop up.

Baca juga : Tips Meningkatkan Traffik Blog Melalui Situs Traffic Exchange

Bagaimana Link Pop Up itu?

Link pop up merupakan link yang ketika diklik akan membuka link di jendela baru / Open Link In New Window. Namun, link pop up ini dapat kita atur sendiri ukuran window nya, bisa lebih besar atau kecil. Ada yang mengatakan bila link yang di buat dengan Open In New Tab atau halaman baru akan lebih SEO, nah bagaimana dengan link yang membuka jendela baru? menurut saya lebih SEO juga.

Cara Membuat Link Pop Up

Perbedaan Link Standar, Link Open in New Page, dan Link Pop Up

Link Standar

<a href="http://wajahilmu.blogspot.com/">Link Standar</a>

Hasil : Link Standar

Link Open in New Page

<a href="http://wajahilmu.blogspot.com/" target="_blank">Link Open in New Page</a>

Hasil : Link Open in New Page

Link Pop Up

<a href='http://wajahilmu.blogspot.com/' onclick='window.open(&apos;&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>Link Pop Up</a>

Hasil : Link Pop Up

Anda bisa mengubah ukuran jendela baru yang di buka menggunakan pop up link dengan mengatur ukuran width dan height. Bila ingin membuat link lebih SEO, gunakanlah title/judul dan alt/deskripsi pada link tercebut. Contohnya

<a href="http://wajahilmu.blogspot.com/" title="Opick Weblog" alt="Opick Weblog - Get Communication Info, Tutorial Blog and My Story" target="_blank">Link SEO</a>

Hasil : Link SEO

Saya rasa sekian tutorial kali ini tentang Cara Mudah Membuat Link Pop Up. Semoga dapat bermanfaat bagi para blogger di seluruh dunia. Sempatkan berkomentar sebelum menerapkan cara di atas agar admin terus termotivasi untuk update artikel di Opick Weblog. Selamat mencoba dan terima kasih atas kunjungannya.

Hai sahabat Antoni Semuanya, kali ini saya akan membagikan sebuah tutorial yang saat ini saya gunakan pada tombol Tulis Artikel yang ada pada menu di blog ini. baiklah kali ini saya akan mengajarkan kepada teman-teman bagaimana caranya membuat Tombol Jendela Pop Up menggunakan HTML dan CSS.

Jendela Pop Up adalah jendela yang muncul secara otomatis dan tiba-tiba di depan layar aplikasi kita atau saat kita membuka website seseorang atau menekan tombol tertentu, Fungsi jendela Pop Up sendiri adalah untuk menyampaikan pesen yang berada di website kita atau website seseorang sebelum kita membuka halaman-halaman lain yang ada di website tersebut. Biasanya jendela Pop Up di buat dengan bantuan Plugin jQuery , tetapi semakin berkembangnya teknologi CSS jendela POP Up juga bisa di buat menggunakan CSS. Baiklah kita langsung saja praktek kan ya teman-teman.

Pertama buatlah file HTML nya seperti di bawah ini :

<body>
<div id="button"><a href="#popup">pesan</a></div>
<div id="popup">
<div class="indow">
<a href="#" class="close-button" title="close">X</a>
<h2> Selamat Datang Di Website Saya</h2>
</div>
</div>
</body>

Lalu teman-teman save dan lihat hasilnya. Masih belum jadi apa-apa kan teman-teman. Sekarang kita buat CSS nya seperti di bawah ini.
Pertama kita buat CSS nya untuk Button Pesannya seperti di bawah ini :

/* Tombol Button Pesan */
#button {margin : 5% auto;width: 100px; text-align: center;}
#button a {
width : 100px;
height : 30px;
vertical-align : middle;
background-color : #F00;
color : #fff;
text-decoration : none;
padding : 10px;
border-radius : 5px;
border : 1px solid transparent;
}

Berikutnya CSS untuk tampilan jendela Pop Up nya di bawah ini :

/* Jendela Pop Up */
#popup {
width : 100%;
height : 100%;
position : fixed;
background : rgba(0,0,0,.7);
top : 0;
left : 0;
z-index : 9999;
visibility : hidden;
}
#window {
width : 400px;
height : 100px;
background : #fff;
position : relative;
padding : 10px;
text-align : center;
margin : 15% auto;
}

Bisa di lihat CSS yang di atas terdapat Property CSS visibility: hidden; fungsinya adalah untuk menyembunyikan jendela Pop Up nya. Setelah itu kita buat CSS untuk Button Close nya.
Berikut ini CSS untuk Button Close nya :

/* Buton Close */
.close-button {
width : 6%;
height : 20%;
line-height : 23px;
background : #000;
border-radius : 50%;
border : 3px solid #fff;
display : block;
text-align : center;
color: #fff;
text-decoration: none;
position : absolute;
top : -10px;
right : -10px;

Nah setelah semua CSS nya di buat tambahkan CSS di bawah ini untuk memunculkan jendela Pop Up nya saat kita klik Button Pesan :

/* Memunculkan Jendela Pop Up */
#popup:target {
visibility: visible;
}

Itulah Untuk membuat Jendela Pop Up, Fungsi Property CSS visibility: visible; di atas adalah untuk memunculkan jendela Pop Up saat kita klik Button Pesannya.

Sedang kan jika ingin membuat tombol seperti punya saya yg di tombol Tulis Artikel maka Kita melakukan Sedikit Modifikasi pada link di Menu seperti link menu ini :

<li><div id='button'><a href='#popup'><i class='fa fa-pencil'/> Tulis Artikel</a></div></li>

Bisa di lihat dari kode <div id='button'> di atas bahwa yang kita panggil adalah id='button' sedang kan untuk menuju ke atau memunculkan Pop Up nya sendiri adalah <a href='#popup'> kode tersebut berfungsi menampilkan jendela pop up.

Sudah jadi deh jendela Pop Up nya mudahkan teman-teman bisa memahami penjelasan saya ini jika merasa kurang paham boleh di tanyaka pada kolom komentar. Sekian dulu tutorial dari saya selamat mencoba. Terima Kasih....

WASALAM, JAYA SELALU PARA BLOGGER AND KEPP SMILE. salam jomblo 😅