Minggu, 01 Februari 2009

Membuat Tex Area (3 Macam)



Text Area Biasa


Biasanya text area di gunakan untuk menyimpan kode-kode Html/Javascript ataupun text lainnya agar bisa di copy oleh para pengunjung.

Untuk membuat text area, silahkan anda Copy kode di bawah ini :


<p align="center"><textarea name="code" rows="5" cols="20" readonly>

Aku Orang yang ganteng,kaya,mobilku banyak,istriku banyak,cantik-cantik,orang pada ngiri ama aku karena aku terlalu tampan!! :)

</textarea></p>


Keterangan :
rows="6", menunjukan tinggi dari text area.
Cols="20", menunjukan lebar dari text area.

Hasilnya akan seperti di bawah ini :



Text Area dengan memakai HighLight /Select



Highlight
atau Select All,yaitu dimana saat kita tekan tombol Select All,maka kode dalam text area akan otomatis terblok semua.

Untuk kodenya,copy paste di bawah ini :

<div>
<form name="Select All code">
<p align="left" style="margin-top: 0; margin-bottom: 0"><textarea style="width: 184; height: 120" name="txt" rows="100" wrap="VIRTUAL" cols="55" readonly>

Aku Orang yang ganteng,kaya,mobilku banyak,istriku banyak,cantik-cantik,orang pada ngiri ama aku karena aku terlalu tampan!! :)

</textarea></p>
</div>
<p align="left" style="margin-top: 0; margin-bottom: 0">

<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All">


Contoh hasilnya :




Yang berperan penting untuk highlightnya sebenarnya hanya pada kode


<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()">


jadi,jangan sampai dirubah ya :)



Text Area Select Otomatis



Anda pasti pernah khan mengunjungi suatu situs yang memberikan sebuah kode html,seperti kode Adsense,dll.

Ya,kode akan terblok sendiri,hanya dengan menggerakkan mouse diatas bidang kodenya.


Untuk kode dan contohnya lihat disini

Selamat mencoba :)


Baca Juga Yang Ini..

Menghapus/menghilangkan sebagian Fitur Komentar

Ada cara sederhana yang belum semua orang tahu termasuk saya kemarin,bagaimana,agar salah satu posting,atau sebagian posting,tanpa ada keterangan komentar,sedangkan yang lain masih utuh.

Saya pernah,mengalami,saat aku mau bikin halaman profil tapi koq ada tulisan "komentar (0)" di bawahnya.
Khan ga seru ya?Gmn ya?aku nyoba ngilangin komentar pada edit posting,eh! Koq komentarnya ilang semua!?
Nah!ada solusinya nich,gmn kita bisa menentukan posting mana yang akan kita kasih tulisan komentar sama box komentarnya,dan yang mana posting yang pingin kita kosongin tulisan sekaligus komentarnya.
Coba dech ikutin langkah berikut :


ilustrasi:

menghilangkan komentar blogger.


Klik tulisan Pilihan Posting/Opsi Entri di sudut kiri bawah kotak posting,setelah itu tampil radio button 2 pilihan :


Ijinkan dan Jangan ijinkan.


Anda hanyalah memberi tanda pada radio button di samping tulisan tersebut, jika anda memilih ijinkan,maka kotak komentar nantinya akan muncul dan pembaca postingan tersebut tentu saja bisa memberi komentar.


Nah jika anda tidak menginginkan kotak komentar muncul, maka anda tinggal memilih opsi Jangan diijinkan.


Untuk mengembalikan ke keadaan seperti semula,mulailah dengan langkah yang sama,seperti di atas hanya nantinya akan keluar 3 radio button,tentunya ada 3 pilihan :

Ijinkan,
Jangan ijinkan, tayangkan yang telah ada dan
Jangan ijinkan, sembunyikan yang telah ada.

Tergantung sesuai keinginan anda.

Semoga bermanfaat ya..

Menambah / Meletakkan Element Baru di bawah Header Blog


Kadang kita mengalami kesulitan saat ingin menambahkan elemen baru yang berada persis di bawah Header pada Blog.

Kesulitan itu kadang salah satunya disebabkan oleh template yang sudah di tentukan oleh Blogger,sedangkan kita menginginkan elemen baru yang dapat berada persis di bawah header.

Untuk itu,cobalah trik di bawah ini:

Penting :Backup dulu HTML anda kedalam Notepad,maksudnya jika nanti tidak sesuai dengan keinginan anda,Anda bisa mengembalikan lagi seperti semula.

Pilih tab Edit HTML

Lalu cari kode yang hampir sama dengan kode di bawah ini:


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)'
type='Header'/>
</b:section>
</div>


Jika sudah ketemu,anda hanya merubah kode yang berwarna merah diatas sehingga kode akan menjadi seperti di bawah ini :


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="2" showaddelement="yes">
<b:widget id='Header1' locked='true' title='test (Header)'
type='Header'/>
</b:section>
</div>

Simpan Template,dan lihat hasilnya.

Menghilangkan Navbar pada Blog


Ingin menghapus Navbar punya blogger?bikin ga sedap mata? Ilangin aja yuk!

Letakkan kode di bawah ini di atas kode ]]></b:skin> pada halaman html anda.


#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}


Atau bisa dengan cara lain dengan meletakkan kode di bawah ini tepat di bawah kode <body> :


<style type='text/css'>
#navbar-iframe {display:none;}
</style>


Lalu Simpan Template.


Selesai !

Mudah khan?


Untuk navbar yang akan tampak hanya jika ada mouse diatasnya,seperti navbar pada blog ini,akan saya bahas nanti,meskipun ini hanya akan bekerja baik pada Browser Mozilla Firefox.


Selasa, 27 Januari 2009

Membuat Blogroll


Membuat Blogroll atau Kategori blog yang ingin anda masukkan,baik itu dalam suatu posting maupun halaman html khusus untuk sidebar maupun footer,kadang akan memakan banyak tempat jika kategori terlalu panjang/banyak.

Di sini saya akan coba membuat contoh blogroll yang dapat menghemat tempat/halaman blog kita.

Untuk membuat/menghemat halaman web/blog,kita bisa menggunakan Fungsi scrollbar,dropdown,marquee,dll.


Seperti postingan saya sebelumnya,bagaimana membuat text berjalan,fungsi scrollbar,dropdown maupun marquee.


Tapi nggak ada salahnya jika saya mengulang memberikan kode-kode tersebut di sini (biar lebih ringkas,he..)



  • Untuk kode Dropdown :


<form>
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu>

<option># Dropdown # </option>
<option value="http://pelajaran-blog.blogspot.com">Contoh 1</option>
<option value="http://pelajaran-blog.blogspot.com">Contoh 2</option>
<option value="http://pelajaran-blog.blogspot.com">Contoh 3</option>
<option value="http://pelajaran-blog.blogspot.com">Contoh 4</option>
<option value="http://pelajaran-blog.blogspot.com">Contoh 5</option>
</select>
</form>


Hasilnya seperti di bawah ini :




  • Untuk kode Marquee :


<marquee onmouseover="this.stop()"
onmouseout="this.start()" scrollamount="2"
direction="up" width="100%" height="200"
>
<a href="http://pelajaran-blog.blogspot.com"
target="_blank">Contoh 1</a><br/><br/>
<a href="http://pelajaran-blog.blogspot.com"
target="_blank">Contoh 2</a><br/><br/>
<a href="http://pelajaran-blog.blogspot.com"
target="_blank">Contoh 3</a><br/><br/>
<a href="http://pelajaran-blog.blogspot.com"
target="_blank">Contoh 4</a><br/><br/>
<a href="http://pelajaran-blog.blogspot.com"
target="_blank">Contoh 5</a><br/><br/>
</marquee>


Hasilnya akan seperti di bawah ini :




  • Untuk kode Marquee dalam tabel/kotak :


<table border="2"
width="155" height="130" cellpadding="2">
<tr>
<td align="left">
<marquee onmouseover="this.stop()" onmouseout="this.start()"
scrollamount="2" direction="up" width="100%"
height="200">
<a href="http://pelajaran-blog.blogspot.com"
target="_blank">Contoh 1</a>
<br/><br/>
<a href="http://pelajaran-blog.blogspot.com"
target="_blank">Contoh 2</a>
<br/><br/>
<a href="http://pelajaran-blog.blogspot.com"

target="_blank">Contoh 3</a>
<br/><br/>
<a href="http://pelajaran-blog.blogspot.com"
target="_blank">Contoh 4</a>
<br/><br/>
<a href="http://pelajaran-blog.blogspot.com"
target="_blank">Contoh 5</a>
<br/><br/>

</marquee>
</td>
</tr>
</table>


Hasilnya seperti di bawah ini :


Anda coba dulu baru tahu hasilnya :) duk ! PR..

Gimana? pilih yang mana? selamat mencoba ya!

Membuat Menu Drop Down


Untuk membuat menu dropdown,selain membuat situs lebih rapi,juga sambil belajar yuk!

Untuk kodenya copy paste kode di bawah ini :


<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu><option value=0 selected>KATA YANG PERTAMA MUNCUL</option>
<option value="ISI ALAMAT YANG DI TUJU">ISI TEXT YANG INGIN DI TAMPILKAN</option>
</select></form>


Contoh penggunaan kode :

<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu>
<option>Link</option>
<option value="http://www.youtube.com">Youtube</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.google.com">Google</option>
</select></form>

Yang hasilnya nanti akan seperti di bawah ini :



Sangat Mudah khan?
Selamat mencoba ya..!!

Baca Juga Yang Ini..

Membuat tempat kode script / html


Seperti yang pernah saya posting beberapa waktu yang lalu,hanya kali ini menggunakan kode yang sangat sederhana.seperti saat ingin memposting suatu blog,dan ingin menyampaikan kode kepada pengunjung,biasanya kita mengalami kesulitan.

Misalnya kesalahan yang terjadi karena hasil kode seperti penulisan tanda <head> atau <tabel> akan berbeda hasilnya saat posting telah di publikasikan,bahkan tidak akan muncul pada artikel yang telah di publikasikan.

Untuk itu,penulisan tanda-tanda/karakter seperti <,>,",&,dll harus dituliskan dengan notasi yang berbeda.Untuk menandai/membuat bidang atau tempat untuk kode(hanya bersifat hiasan saja),copy paste kode di bawah ini :


<table border="0"width="361"><tr><td bgcolor="#E0E0E0"
width="353"> Kode anda Disini</td></tr></table>


Bagian "Kode anda Disini" yang berwarna hijau diatas,untuk area,artikel yang ingin anda posting.

Sedangkan,jika anda ingin menyampaikan/memposting suatu kode html/javascript,tetap di area yang berwarna hijau diatas(jika ingin kode berada dalam sebuah tabel),
dengan catatan:karakter dari kode yang ingin anda sampaikan,di ubah dalam sebuah notasi.Untuk lebih jelasnya lihat Ilustrasi di bawah ini :

Jika saya ingin menuliskan <head> pada artikel saya,maka pada saat memposting saya akan menuliskan sebuah kode :

&lt;head&gt;

Notasi yang tercetak tebal di atas (&lt; dan &gt; ),saat posting terpublikasikan,akan tampil menjadi karakter < dan >.

Untuk lebih jelasnya soal notasinya anda bisa baca di sini.

Sudah jelas khan ?
Untuk simbol atau karakter yang lain seperti; $,#,*,dll bisa anda tuliskan seperti biasanya.

Baca Juga Yang Ini..