banner buat website sendiri percuma

Panduan 1: Download program membuat website | Panduan 2: Panduan mencari webhosting, memilih nama domain | Panduan 3: Muat naik Fail | Panduan 4: Daftarkan Url Anda

Panduan untuk edit skrip kotak drop-in (sebenarnya)

Jangan lupa mendapatkan 20 templat minisite percuma professional dengan 10 daripadanya dilengkapi dengan kotak drop down

seperti ini

Download perisian html editor Kompozer untuk edit Minisite anda itu.


Pelajari cara buat efek drop down menu 'Baik Punya' untuk website atau blog anda!

Untuk mengedit templat minisite itu, anda hanya perlukan perisian html editor seperti kompozer, nvu, frontpage dan lain-lain. Ianya semudah membuka fail minisite itu menggunakan perisian html yang anda gunakan. Sila download perisian html editor kompozer di kanan atas sana, sekiranya masih tidak ada html editor. Ianya amat mudah dan tidak memerlukan panduan.

Panduan edit kotak drop-down dibawah hanyalah diharapkan dapat memudahkan dan menjimatkan masa anda. Juga semua panduan adalah hasil percubaan saya sendiri sahaja. Kalau ade yang salah sila buat tak tahu saja hehe. Jadi skrip in boleh digunakan pada laman web lainnya juga, sekiranya mahu. Hanya gunakan skrip drop-in dan kod borang yang saya berikan pada anda itu, copy dan paste kan kedalam laman web anda pada bahagian yang ditunjukkan dibawah.

Jadi setelah anda muat turun pakej templat minisite, sila ekstrak fail templatminisite.zip itu dahulu. Terdapat 10 templat didalamnya dan pilih salah satu yang anda mahu edit.

grafik66 

Klik-kanan pada fail index dan pilih edit (yang selalunya akan dibuka menggunakan notepad). Mudah sangat :)

Skrip drop-in ini telah dimasukkan kebahagian sesudah tag <HEAD> pada fail itu. Dibawah adalah skripnya, dan panduan edit untuk mendapatkan kotak drop down mengikut kehendak anda. Sila cari ia didalam fail laman minisite itu, dan anda perlu edit NOMBOR sahaja pada skrip itu. Ianya amat mudah untuk dijumpai, dan amat mudah untuk diedit.

 

<script language="JavaScript1.2">

// Anda akan melihat skrip ini pada fail index minisite anda (bermula dari <script..  dan berakhir dengan... </script>)
// sila klik-kanan pada fail index itu dan pilih edit
// dan edit ia mengikut panduan ini sehingga anda puas hati!

var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"
var bouncelimit=32       //(no.32- untuk had lantunan kotak itu- boleh ubah ia, save dan lihat kesannya)
var direction="up"
function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits    //(no.250- alternatif utk melambatkan kotak itu jatuh kedalam laman- cuba 3000)
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)  //(no.50- kelajuan kotak tu jatuh kebawah 300 seperti bertingkat-tingkat jatuhnya- cuba ubah)
}
function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<150+scroll_top)  //(utk kedudukan kotak itu setelah jatuh dari atas kebawah- cuba jgn tak cuba)
crossobj.top=parseInt(crossobj.top)+40+calunits  //(boleh kelajuan, kedudukan kotak pun akan berubah kalau adjust lebih sangat)
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)}  //(yang ni untuk cara lantunan kotak itu- sila ubah dan lihat kesannya :)
}
function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)   //(kalau anda letak lebih dari 8, kotak tu akan terus melantun-lantun)
bouncelimit+=8   //(lagi rendah nilainya, lagi banyak lantunan sebelum ia berhenti- berdasarkan percubaan saya je)
bouncelimit=bouncelimit*-1  //(lebih dari satu akan jadi pelik)
if (bouncelimit==0){
clearInterval(bouncestart)}
}
function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}
function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
window.onload=initbox
</script>
20 Templat Minisite Professional Percuma
Koleksi Opt-in Box Bergrafik
pakej bina laman web sendiri professional

 

 

 

OK. Itulah sahaja untuk bahagian skrip yang boleh saya beri tahu.  Setelah anda puas hati dengan cara kotak itu jatuh, tibalah masanya untuk anda memasukkan kandungan pula yntuk kotak drop-in itu.
Sekarang kita pergi ke bahagian kod html - yang menjadi sebahagian dari skrip drop down ini - yang telah dimasukkan pada bahagian akhir sekali dalam tag <BODY> dalam minisite anda itu. Ia Boleh juga dimasukkan pada sesudah tag </BODY> pada minisite anda itu sebenarnya. Sila lihat ia pada bahagian BAWAH SEKALI dalam laman anda itu.
Dan dibawah ini adalah kodnya dan panduan edit.

<div id="dropin" style="position: absolute; visibility: hidden; left:200px; top:100px; width:500px; height:300px;
background-color: #F5F5F5">
<div align="right"><a href="#" onClick="dismissbox();return false"><img src="images/closebox.gif"/></a></div>
<!--- edit dibahagian bawah ini sahaja  untuk kandungan dalam kotak drop down //--->

DISINILAH BAHAGIAN YANG BOLEH ANDA EDIT. SAMADA MASUKKAN TEKS BIASA SEPERTI INI, GAMBAR (MENGGUNAKAN HTML TAG), DAN KOD HTML LAINNYA SEPERTI KOD BORANG YANG DIBERI, DLL. BOLEHLAH ANDA COPY DAN PASTE KOD2 ITU KE BAHAGIAN INI SAHAJA. ANDA BOLEH LIHAT BAHAGIAN INI DIDALAM LAMAN MINISITE ANDA DI BAWAH SEKALI. DAN EDIT IA. MUDAH KAN? ;-)

<!--- edit dibahagian atas itu sahaja untuk kandungan dalam kotak drop down //--->
</div>
 
Jadi kalau anda lihat diatas, adalah bahagian yang perlu anda edit dalam laman minisite anda itu, untuk kandungan dalam kotak drop down. Bermakna semua perkataan berwarna biru pada skrip drop sown ini tidak perlu diubah kecuali yang perlu sahaja.

 Ubah saiz kotak drop down.

Lihat pada kod html diatas, iaitu pada  width:500px; height:300px; .Hanya nombor itu sahaja yang perlu anda adjust untuk saiz kotak.

 Ubah warna kotak

Lihat pada kod html diatas, iaitu pada  background-color: #F5F5F5 . Hanya ubah kod warna  #F5F5F5 itu, kepada kod warna yang anda mahu.
Dapatkan kod warna ini pada perisian html editor pun ada. Cth: #FFFF00 adalah warna kuning, #FFFFFF  warna putih , #000000  warna hitam. Ataupun padam sahaja kod warna itu dan masukkan  red , atau blue , green , yellow dan warna-warna lain dalam bahasa inggeris. Contohnya: background-color: blue ;">

Kedudukan kotak dari kiri

Dan  left:200px; pada kod html itu ialah kedudukan kotak drop down itu dari kiri laman. Sekiranya nilai  0 , kotak akan jatuh kebahagian kiri sekali di minisite anda. Silalah cuba untuk membiasakan diri.

Tamat.

1. Disini ada contoh borang opt-in simple yang boleh anda masukkan kedalam kotak drop down itu untuk percubaan. Malahan anda boleh membuat atau memasukkan borang bergrafik yang lebih cantik sekiranya anda expert dalam bidang ni! Dibawah ini contoh kod nya.

Contoh Borang Pertama (*Saya beri bersama-sama dengan templat minisite yg anda download. Sila gunakan yang itu sahaja )

 

<form target="_blank" method="post"
 action="masukkan url skrip pemproses borang disini"
 name="borang">
  <div id=""><div
 style="text-align: center; font-weight: bold; color: rgb(204, 0, 0); text-decoration: underline;"
 class="optinhead"><big>Dapatkan 20 Templat Minisite
Premium Professional Secara Percuma!</big></div>
  <div style="text-align: center; color: rgb(0, 0, 153);"></div>
  <div style="text-align: center; color: rgb(0, 0, 153);"
 class="optintext">Ya! 10 daripada minisite ini dilengkapi
dengan kotak drop down sama seperti yang anda lihat&nbsp;ini. Anda
boleh memasukkan teks biasa, borang atau apa-apa kod html lainnya pada
kotak drop down ini! Bagus kan? ;)<br />
Hanya masukkan maklumat anda dibawah dan mula <span
 style="font-weight: bold;">Muat Turun Hari Ini Juga!</span></div><br>
  <div style="text-align: center;"></div>
  <div style="text-align: center;" class="optinform">
  <div class="txtField"><input name="name"
 class="name_field" value="Masukkan Nama Anda"
 onfocus="if(this.value == 'Masukkan Nama Anda'){ this.value = ''; this.style.color= '#1a1a1a'; }"
 onblur="if(this.value == ''){ this.value = 'Masukkan Nama Anda'; this.style.color= '#818181'; }"
 type="text" /></div>
  <div class="txtField"><input name="email"
 class="email_field" value="Masukkan Email Anda"
 onfocus="if(this.value == 'Masukkan Email Anda'){ this.value = ''; this.style.color= '#1a1a1a'; }"
 onblur="if(this.value == ''){ this.value = 'Masukkan Email Anda'; this.style.color= '#818181'; }" /></div>
  <div class="txtField"><input name="submit"
 value="submit" class="" type="submit" /></div>
  </div>
  <div style="text-align: center;"></div>
  <div style="text-align: center;" class="optinlgl"><span
 style="color: red;">**</span> Sila lihat email anda
dua kali. Email anda tidak akan dijual atau disewa pada mana-mana pihak.</div>
  </div>
</form>

 

(teks bewarna merah itu boleh anda edit) Dan ia akan kelihatan seperti dibawah.

Dapatkan 20 Templat Minisite Premium Professional Secara Percuma!
Ya! 10 daripada minisite ini dilengkapi dengan kotak drop down sama seperti yang anda lihat ini. Anda boleh memasukkan teks biasa, borang atau apa-apa kod html lainnya pada kotak drop down ini! Bagus kan? ;)
Hanya masukkan maklumat anda dibawah dan mula Muat Turun Hari Ini Juga!

** Sila lihat email anda dua kali. Email anda tidak akan dijual atau disewa pada mana-mana pihak.
 

2. Atau ambil ruang kotak borangnya sahaja. Dan masukkan teks anda sendiri.

(*Ada saya beri bersama-sama dengan templat minisite yg anda download. Ianya sama cantik dan sama padan)

 

<form target="_blank" method="post"
 action="masukkan url skrip pemproses borang disini"
 name="borang"><div id="">
  <div style="text-align: center;" class="optinform">
  <div style="text-align: center;" class="txtField"><input
 name="name" class="name_field" value="Masukkan Nama Anda"
 onfocus="if(this.value == 'Masukkan Nama Anda'){ this.value = ''; this.style.color= '#1a1a1a'; }"
 onblur="if(this.value == ''){ this.value = 'Masukkan Nama Anda'; this.style.color= '#818181'; }"
 type="text" /></div>
  <div class="txtField"><input name="email"
 class="email_field" value="Masukkan Email Anda"
 onfocus="if(this.value == 'Masukkan Email Anda'){ this.value = ''; this.style.color= '#1a1a1a'; }"
 onblur="if(this.value == ''){ this.value = 'Masukkan Email Anda'; this.style.color= '#818181'; }" /></div>
  <div class="txtField"><input name="submit"
 value="submit" class="" type="submit" /></div>
  </div>
 </form>
 

Jadilah ia seperti dibawah


 

Anda boleh masukkan teks tanpa tag html pun sebagai tambahan ruang borang itu. Tetapi sekiranya anda mahu teks anda itu berada ditengah-tengah kotak drop down, hanya masukkan tag ini

<div style="text-align: center;"> Teks anda disini </div>

Sekiranya anda mahu teks itu berada diatas sekali, masukkan nya pada bahagian atas pada kod borang tadi.

Sekiranya anda mahu buat perenggan baru bagi teks berikutnya, masukkan tag  <br> .

Jadinya,  <div style="text-align: center;"> Teks anda disini <br>Terima Kasih. Datang lagi.</div>

Dan keseluruhan kandungan kotak drop down anda ;

 

 <div style="text-align: center;"> Teks anda disini <br>Terima Kasih. Datang lagi</div>
<form target="_blank" method="post"
 action="masukkan url skrip pemproses borang disini"
 name="borang"><div id="">
  <div style="text-align: center;" class="optinform">
  <div style="text-align: center;" class="txtField"><input
 name="name" class="name_field" value="Masukkan Nama Anda"
 onfocus="if(this.value == 'Masukkan Nama Anda'){ this.value = ''; this.style.color= '#1a1a1a'; }"
 onblur="if(this.value == ''){ this.value = 'Masukkan Nama Anda'; this.style.color= '#818181'; }"
 type="text" /></div>
  <div class="txtField"><input name="email"
 class="email_field" value="Masukkan Email Anda"
 onfocus="if(this.value == 'Masukkan Email Anda'){ this.value = ''; this.style.color= '#1a1a1a'; }"
 onblur="if(this.value == ''){ this.value = 'Masukkan Email Anda'; this.style.color= '#818181'; }" /></div>
  <div class="txtField"><input name="submit"
 value="submit" class="" type="submit" /></div>
  </div>
 </form>

Copy dan paste kod itu, dan jadinya seperti dibawah.

Teks anda disini
Terima Kasih. Datang lagi
 

4. Jadi apa yang perlu anda buat, mungkin masukkan sedikit gambar dan tukar warna kotak mengikut panduan diberi. *Dibawah ini satu lagi contoh yang skrip nya turut saya berikan dengan pakej templat minisite itu. Saya gabungkan dengan kod borang diaras. Saya yakin anda tahu bahagian mana yang boleh anda edit. (Yang bewarna merah)

<!--- edit bahagian bawah ini sahaja untuk kandungan kotak drop down //-->

<span class="Apple-style-span"
 style="border-collapse: collapse; font-family: arial,sans-serif;">
<p style="line-height: 1.2; margin-top: 0px; margin-bottom: 19px;"><span
 style="font-family: 'Times New Roman',Times,serif;"><img
 alt="" src="./images/eboxtemplat.gif"
 style="width: 170px; height: 207px; float: left;" hspace="6" /></span></p>
</span></span><span style="color: red;">Dapatkan 20 Templat Minisite Professional secara Percuma dengan 10
daripadanya dilengkapi dengan Kotak Drop Down sama seperti yang anda
lihat ini!</span><br />
<br />
<span class="Apple-converted-space"></div>
&nbsp;<span class="Apple-converted-space">

<form target="_blank" method="post"
 action="masukkan url skrip pemproses borang disini"
 name="borang"><div id="">
  <div style="text-align: center;" class="optinform">
  <div style="text-align: center;" class="txtField"><input
 name="name" class="name_field" value="Masukkan Nama Anda"
 onfocus="if(this.value == 'Masukkan Nama Anda'){ this.value = ''; this.style.color= '#1a1a1a'; }"
 onblur="if(this.value == ''){ this.value = 'Masukkan Nama Anda'; this.style.color= '#818181'; }"
 type="text" /></div>
  <div class="txtField"><input name="email"
 class="email_field" value="Masukkan Email Anda"
 onfocus="if(this.value == 'Masukkan Email Anda'){ this.value = ''; this.style.color= '#1a1a1a'; }"
 onblur="if(this.value == ''){ this.value = 'Masukkan Email Anda'; this.style.color= '#818181'; }" /></div>
  <div class="txtField"><input name="submit"
 value="submit" class="" type="submit" /></div>
  </div>
 </form>

</span></span>
<br />
</span></span>
<div style="text-align: center;"><span
 class="Apple-style-span"
 style="border-collapse: collapse; font-family: arial,sans-serif;"><big><span
 style="font-weight: bold; text-decoration: underline; color: black;">Dapatkannya
Sekarang!</span></big></span></span></div>
</span>
</div>

<!--- edit bahagian atas itu sahaja untuk kandungan kotak drop down //-->

 

Gantikan ./images/eboxtemplat.gif  itu kepada url imej atau gambar anda. Dan tentukan saiz gambar pada nombor dibawah url itu.  width: 170px; height: 207px

Gantikan teks bewarna merah itu kepada teks anda. Tentukan warna teks pada kod warna(red)dibelakangnya.

Dan akan jadi seperti dibawah ini,

Dapatkan 20 Templat Minisite Professional secara Percuma dengan 10 daripadanya dilengkapi dengan Kotak Drop Down sama seperti yang anda lihat ini!

 


Dapatkannya Sekarang!
 

Ini bermakna gambar anda itu perlu diletakkan didalam folder images. Dan beri juga perhatian pada jenis gambar itu ( jpg , gif, dll)  Contohnya : src="./images/gambarsayamasamuda2dulu.jpg"

www.membuatlamanwebsendiri.com
[close/tutup]