Membuat Link Popup Didalam Tulisan Blog

Membuat Link Popup didalam tulisan blog.
PouUp adalah sebuah jendela munculan ketika kita meng-klik sebuah link didalam tulisan Salah satu contohnya coba anda klik Harga Lantai Kayu, maka akan muncul salah stu website saya tentang jualan lantai kayu pada jendela munculan.
Itulah salah satu jenis PouUp.

Untuk membuat jenis PopUp diatas sangatlah mudah dan sederhana, tidak membutuhkan tambahan kode didalam template, anda tinggal copy kode html dibawah ini, dan pasteukan ke dalam tulisan didalam blog anda, dengan sedikit mengedit URL dan JUDUL.

<a href="MASUKKAN URL DISINI" onclick="window.open('', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">MASUKKAN JUDUL DISINI</a>

Silahkan dicoba.

Ada banyak jenis tutorial membuat Link PopUp didalam tulisan atau posting blog. namun terkadang jenis tutorial PopUp yang muncul tak selalu sesuai dengan apa yang sebenarnya kita cari, atau tak sesuai dengan yang kita inginankan.

Saya sendiri pernah berbulan-bulan browsing dengan berbagai kata kunci tentang Link PopUp, popup
windows, popup posting di blog, untuk mencari sebuah PopUp yang simpel, tidak memberatkan loading, mucul ketika disentuh mouse, bisa memasukkan link dengan jendela yang sama, dan yang terpenting sesuai dengan apa yang saya suka.

Seperti gambar inilah yang saya butuhkan, dan ternyata ini bukanlah popup tapi "tooltip" (Anda boleh cari di Google tentang tooltip.
Tooltip yang saya gunakan ini fungsinya untuk menyembunyikan sebuah keterangan didalam tulisan, boleh diarahkan mous jika dibutuhkan, dan jika tidak, bisa tetap dibiarkan tersebunyi oleh pembaca.
Read More...).

Akhirnya pencarian saya selama berbulan-bulan ditemukan juga didalam sebuah blog di internet yang saya lupa nama blognya, tapi sekarang saya lebih banyak menggunakan Tooltip Tersebut.
Ini dia code script-nya.
Anda boleh coba dengan menempatkan didalam tulisan anda,

<span class="icontandatanya tandatanya"><span class="tooltipblog">INI ADALAH TOOLTIP
<a href="URL">Read More...</a></span></span>

Tapi harap diperhatikan, kode tooltip diatas belum selesai.
Anda harus menambahkan kode css kedalam template html
Copy kode dibawah ini dan paste-kan kedalam teplate anda diatas ]]></b:skin>

.icontandatanya {
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
MozOpacity: 0.;
padding: 0 4px 0 0;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiizW8MccYUFqfo9EGVWDsGsvDrzN2wTwZKPbDqSQk5A72PZPO0nnJKU-tvT4swTzRRptg0n_d21Mjwei0wPLMSNCqz55jZedOfEnS6Ppdsv9RC_F_qIpfmn3Q9yNKPBt1keHAKa7L3ViH/s1600/icontooltip.png')

no-repeat; }
.tooltipblog { display: none; width: 400px; position: absolute; padding: 10px; margin: 4px 0 0 4px; top: 0; left: 6px; border: 3px solid #cc6611; border-radius: 0 8px 8px 8px; background: #bedffe; font-size: 12px; box-shadow: 0 1px 2px -1px #21759B; z-index: 999; }
.tandatanya { color:#000; background-position: 0 0; }
.tandatanya
.tooltipblog { border-color: #cc6611; background-color: #fff; box-shadow-color: #21759B; }
.icontandatanya:hover
.tooltipblog { display: block; }

Coba lihat kembali hasil dari popup tooltip tersebut