Cara Membuat dan Memasang Floating PopUp Box: Panduan BloGGeR

Setelah beberapa waktu dalam Panduan BloGGeR dan tutorial BloGGeR dan Panduan BlogDETIK ini tidak menghadirkan DEMO, kali ini kita akan menampilkan sebuah demo "Floating PopUp Box" yang memang tidak boleh tidak harus melalui sebuah demo di luar blog. Ya ..., karena bila digunakan di blog ini tentunya akan semakin menambah beban blog yang harus ditanggung. Penggunaan gambar animasi yang cukup besar ditengah posting menumpuk tentunya akan membuat loading menjadi manggut-manggut seperti orang sudah pikun.

Seperti namanya, Floating PopUp Box, dia akan selalu melayang-layang mengikuti pergerakan cursor/mouse kearah vertikal. Ketika cursor menjelajah halaman blog ke bawah, maka diapun akan mengikuti ke bawah. Demikian pula sebaliknya ketika cursor bergerak ke atas. Box spesial ini dapat dimanfaatkan untuk menempatkan/memuat iklan, gambar/photo/banner/kata sambutan kepada pengunjung blog dan banyak hal lain yang yang mungkin sampeyan inginkan. Karena sifatnya merupakan pelengkap blog yang secara sengaja ditampilkan di setiap halaman blog di tempat strategis, untuk menjaga supaya penampilan blog tidak terganggu, maka floating popup box ini juga dilengkapi dengan sebuah controll untuk menghilangkan box dari halaman blog. Supaya lebih nyentrik dan bergaya, bagian ini (close) kita design dengan memanfaatkan blink effect dan efek marquee. Untuk lebih jelasnya silahkan sampeyan KLIK link demo berikut :

D E M O

Langkah Pertama (I) :

1. Login To BloGGeR/Login ke BloGGeR : Tulis "User Name/Alamat Email" dan "Password/Sandi".


2. Dasboard/Dasbor : Setelah login dan sampeyan masuk di halaman "Dasbor" silahkan KLIK link "Layout/Tata Letak/Rancangan".


3. Layot/Tata Letak/Rancangan : Pertama masuk ke halaman Tata Letak, sampeyan memasuki "Page Elemen/Elemen Laman". Tambahkan Widget ini di salah satu bagian untuk penambahan widget dengan cara KLIK kolom bertuliskan "Add Gadget/Tambah Gadget" (yang bergaris putus-putus).


4. Mengkonfigurasi HTML/JavaScript : Copy seluruh kode CSS, xHTML dan Javascriptdan simpan dalam box yang tersedia.


5. SAVE/Simpan : KLIK "SAVE/Simpan".


6. Open Blog/Buka Blog : Buka blog untuk melihat hasilnya.

Langkah Kedua (II) :

1. Buka Javascript : Bukalah javascript : "http://h1.ripway.com/gubhugreyot/javascript/bgsGR_FloatingPoPupBox.js". Dalam javascript inilah semua teks tertuliskan berikut teks link, title link dan gambar yang terlihat di box. Ganti seluruhnya sesuai dengan apa yang sampeyan harap untuk ditampilkan.


2. Buat Padat/rapat : Seluruh kode html dalam javascript di atas harus dibuat dalam bentuk rapat tanpa spasi.


3. Image/Gambar : Gambar/Image berukuran maximal width=269pixel atau 269px. Gambar bisa berbentuk animasi gif seperti dalam demo atau berupa gambar biasa (statis). Bila memungkinkan akan lebih bagus saat digunakan gambar animasi gif.


4. Perubahan ukuran teks, warna dan jenisnya bisa dilakukan dengan merubah kode html di dalamnya.


5. Upload Javascript : Bila perubahan telah selesai dilakukan, silahkan upload javascript di Javascript hosting kemudian gunakan sebagai pengganti javascript yang sebelumnya telah aku sediakan di atas (http://h1.ripway.com/gubhugreyot/javascript/bgsGR_FloatingPoPupBox.js).


6. xHTML : Ganti juga beberapa teks dan link yang terdapat di xHTML.

Kode CSS, xHTML dan Javascript Floating PopUp Box :

<style type="text/css">
#bgsGRfloatingPopUpBox{
       position:absolute;
       visibility: hidden;
       width: 291px;
       z-index: 100;
       padding:5px;
       background-color: #222222;
       border: 2px solid blue;
       -moz-border-radius:20px;
       border-radius:20px;
       -webkit-border-radius:20px;
       -goog-ms-border-radius:20px;
       -moz-box-shadow: -5px -5px 5px #333;
       -webkit-box-shadow: -5px -5px 5px #333;
       -goog-ms-box-shadow: -5px -5px 5px #333;
       box-shadow: -5px -5px 5px #777;
       margin:0 auto 10px;
       float:left;
       color:#fab965;
       text-align:left;
       font-size: 12px;
       font-family: Verdana;
       }
#bgsGRfloatingPopUpBox a{
       color:#9cdbfc; 
       font-weight:bold;
       padding:0 6px;
       text-align:left;
       text-decoration:none;
       }
#bgsGRfloatingPopUpBox a:hover{
       color:#FFFF00;
       text-decoration:underline;
       }
</style>

<script src="http://stashbox.org/931594/FloatingPoPupBox.bgsGRmasterPress.js" type="text/javascript"></script>

<script type="text/javascript">
var persistclose=0
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>

<div id="bgsGRfloatingPopUpBox">
<p><a href="http://gubhugreyot.blogdetik.com/" title="Dapatkan jutaan ular cobra mematikan!">Ayo ..., rame-rame nonton bareng Piala Dunia 2010 - Afrika Selatan! Berhadiah .....</a>
</p>
<script src="http://h1.ripway.com/gubhugreyot/javascript/bgsGR_FloatingPoPupBox.js" type="text/javascript"></script>
<marquee behavior="alternate" direction="left"><div style="text-align:center;width:60px;border:2px solid blue;padding:2px 10px 2px 4px;"><a href="" onclick="closebar(); return false"><span style="font-weight:bolder;font-family:Times New Roman;font-size:18px;color:red;"><blink>[Close]</blink></span></a></div></marquee> 
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «