Membuat Pop Up Yang Sederhana

Tentunya Rekan Neter semua sudah pernah melihat yang namanya pop up hanya saja tidak menyadarinya atau mengetahuinya ^_^, Pop Up adalah suatu object yang terus bergerak atau melayang baik itu dalam situs ataupun blog, Pop Up bisa berbentuk apa saja terserah kemauan kita, sudah saja penjelasannya nanti jika terlalu panjang malah males bacanya ^_^. Baik kita lanjutkan proses-prosesnya atau cara-caranya membuat Pop Up.

Membuat Pop Up bisa membutuhkan 3 kode memang ada yang 1 kode pakai PHP tapi malah rumit bisa-bisa
Pada kode kamu isi dengan apa yang ingin kamu tampilkan di pop up
Ada 2 cara pemasangan yang bisa dilakukan pada blogger yaitu:

1. Melalui edit HTML template.

Untuk pemasangan melalui edit template, caranya adalah sebagai berikut:

• Login ke Blogger
• Masuk ke Tata Letak --> Edit HTML
• Copy dan Paste kode CSS di atas kode ]]></b:skin>
• Untuk Kode Javascript, kamu Paste di atas kode </head>
• Untuk kode pemasangan HTMLnya kamu Paste diatas kode </body>
• Simpan template kamu

2. Melalui add gadget seperti biasa.

• Pada Tata Letak --> Elemen Halaman
• Pilih add Gadget
• Pilih Gadget HTML/Javascript
• Nah rumus HTMLnya sebagai berikut:

<style type="text/css">
Kode CSS
</style>
KODE JAVASCRIPT
KODE HTML
*Simpan Gadget

Kode CSS :

#topbar{
position:absolute;
visibility: hidden;
width: 350px;
z-index: 100;
padding:5px;
background-color: #FFFFFF;
border: 1px solid #333333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 auto 10px;
float:left;
color: #505050;
text-align: justify;
font-size: 12px;
font-family: Verdana, serif;
}

 Kode Java Script :

<script src="http://s2.sigmirror.com/files/52659_xu57s/js_pop_up.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=0
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>

 Kode HTML :

 <div id="topbar">
<div align="right"><a href="" onclick="closebar(); return false"><img src="http://mortgage-education.com/Images/Close.png" /></a></div>
&lt;ISI DARI POP UP&gt;

&lt;font face=&quot;arial,sans-serif&quot; color=&quot;#83878c&quot; style=&quot;line-height: 8px; font-size: 9px; text-decoration:underline;&quot;&gt;&lt;a href=&quot;http://www.blogofnurjaya.com&quot; target=&quot;_blank&quot;&gt;Widget by Blog Of Nurjaya&lt;/a&gt;
&lt;/div&gt;

 Tentunya ada kelemahan dan kelebihan pada masing-masing cara pemasangan tapi saya sarankan untuk cara yang pertama membuat waktu reload blog lebih cepat.