Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 :

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 «

9 komentar:

  1. pak dhe, niku kode css kaliyan javascipt nyisipaken teng pundi??

    BalasHapus
  2. Semua kode: Kode css, javascript maupun xHTML-nya langsung disimpan lewat penambahan widget (Login --> Dasbor --> Elemen Laman --> KLIK Tambah Gadget --> pastekan KODE --> KLIK Simpan)

    gubhug reyot

    BalasHapus
  3. Pak sampun kulo cobi koq mboten saget, niku wonten tulisanE "Harap Perbaiki kesalahan pada form ini"
    niku pripun??

    BalasHapus
  4. Barusan tak coba langsung jadi, lho !
    Nih klo mau lihat buka :
    http://bramastyanta1.blogspot.com

    Mungkin box widgetnya blom di kasih judul, ya?!
    Pas di atas box yang di isi kode khan ada kolom untuk judul! Kasih saja tanda titik nggak usah pakai kata ndak apa2.

    gubhug reyot

    BalasHapus
  5. Bro kalo mau cuma ditampilin di halaman home aja?tambahin script apa yah??

    BalasHapus
  6. Kereen banget sob blog kamu..



    pengen belajar banyak neh sama kamu


    salam blogger
    BLOGNYA ANAK GAPTEK

    BalasHapus
  7. tukeran link yu gan..
    http://gema-tkj1.blogspot.com

    BalasHapus

 
GR | Edited by | gubhug reyot