Beragam Macam Text Area

Siang bloggers :*

Hari ini, aku mau share tentang bagaimana cara membuat beragam macam text area.

Oke, langsung aja berikut caranyaaa :

1. Membuat Text Area Sederhana

Scriptnya :

<div align="center">
<textarea name="code" rows="2" cols=35">
Contoh Text Area Sederhana
</textarea></div>

Hasilnya :

Contoh Text Area Sederhana

2. Membuat Seluruh Isi Text Area Terblok ketika diklik

Scriptnya :

<div align="center">
<textarea rows="2" cols="35" onclick="this.focus(); this.select();">
Coba klik disini !
Teks secara otomatis terblok semua
</textarea></div>

Hasilnya :

Coba klik disini ! Teks secara otomatis terblok semua

3. Membuat Seluruh Text Area Terblok dengan Menggunakan Tombol

Scriptnya :

<div><form name="copy">
<div align="center">
<p align="center">
<textarea style="width:200px; height:50px" name="txt" rows="100" wrap="VIRTUAL" cols="55">
Coba Tekan "Click to Block" yang terletak di bawah text area !
Teks secara otomatis terblok semua
</textarea></p></div> <div align="center"> <input onclick="javascript:this.form.txt.focus(); this.form.txt.select();" type="button" value="Copy All"> </div> </div> </form>

Hasilnya :

Coba Tekan "Click to Block" yang terletak di bawah text area ! Teks secara otomatis terblok semua

4. Membuat Seluruh Text Area Terblok ketika Ditunjuk oleh Kursor

Scriptnya :

<div><form name="copy">
<div align="center" style="margin-bottom:0pt; margin-top:0pt">
<textarea cols="55" rows="100" name="txt" onmouseover="this.form.txt.select()" style="height:70px; width:200px;">
Teks otomatis di ter-blok ketika ditunjuk oleh kursor
</textarea></div></form>
</div>

Hasilnya :

Teks otomatis di ter-blok ketika ditunjuk oleh kursor

5. Membuat Text Area dengan Border
Scriptnya :

<div align="center">
<textarea cols="35" rows="2" style="border:3px dotted red">
Text Area dengan border
</textarea></div>

Hasilnya :

Text Area dengan border

6. Membuat Text Area Tidak Bisa di Hapus

Scriptnya :

<div align="center">
<textarea rows="2" cols="35" onclick="this.focus(); this.select();" readonly="">
Teks tidak bisa dihapus
</textarea></div>

Hasilnya :

Teks tidak bisa dihapus

Well, sekian beberapa contoh text area yang saya ketahui hehe

Please leave a comment, I'll really appreciate that :) Thanks for reading~ 

Read More

Pengertian NavBar atau Navigation Bar

Aku rasa sebagian besar dari kalian yang udah biasa ngeblog pasti paham la yah tentang apa itu navigation bar atau yang biasa kita sebut NavBar.

Lucu kan, kalo ada orang yang ngakunya blogger tapi nggak tau NavBar *tepok jidat x__x

Beruntungnya bagi kalian yang masih pemula, yaaa bisa aku toleransi lah hehe

Oke, berikut penjelasan mengenai apa itu NavBar :))

Contoh Tampilan NavBar

NavBar atau Navigation Bar adalah sebuah balok navigasi yang terletak di bagian atas halaman blog. Bentuknya kecil memanjang secara horizontal. NavBar berfungsi baik bagi pemilik atau pengunjungnya untuk melakukan hal-hal tertentu yang masih terkait dengan navigasi blog. Melalui NarBar, pemilik dan pengunjung dapat melakukan pencarian blog, menjadi followers blog, membuat navigasi ke blog lain, melaporkan penyalahgunaan blog, membuat entri (postingan) baru, mendesain template, sign in atau sign out blog, dan sebagainya.

Nah, setelah tau apa itu NavBar, rasanya kurang pol kalo belom ngejelasin menu-menu dari NavBar itu sendiri hehe

Well, berikut beberapa menu yang terdapat pada NavBar serta fungsinya :

Berfungsi untuk mengarahkan kita ke Dasbor Blogger (jika dalam keadaan sign in).

Berfungsi untuk membantu kita mencari blog lain

Berfungsi untuk membagikan (share) blog kita

Berfungsi untuk membagikan (share) blog kita ke media lain seperti Facebook dan Twitter. Selain itu menu ini juga berfungsi untuk melaporkan penyalahgunaan blog

Berfungsi untuk mengarahkan kita ke blog lain secara random (acak), terutama ke blog yang baru saja di update isinya

Berfungsi untuk membuat blog baru. Bagi yang telah mempunyai blog, menu ini akan muncul ketika kita belum sign in blogger (kondisi sign out).

Kebalikan dari menu sebelumnya, fitur ini akan muncul ketika kita berada dalam kondisi sign in blogger. Fitur ini juga menandakan e-mail yang sedang kita gunakan untuk sign in blogger.

Berfungsi untuk sign in blogger

Berfungsi untuk sign out blogger


Berfungsi untuk membuat entri (postingan) baru

Berfungsi untuk mengedit template blog

Menu ini muncul ketika kita sedang berada di halaman blogger lain dan dalam kondisi sign in. Fungsinya untuk mengarahkan kita ke Dasbor Blogger (beranda blogger) atau https://www.blogger.com/home

Nah, itulah sekilas mengenai fungsi-fungsi dari adanya NarBar pada halaman blog.

Meski demikian, nggak semua blogger menganggap keberadaan NavBar itu penting. Mereka lebih milih menghilangkan NavBar-nya, yaa mungkin karena mereka merasa adanya NavBar mengurangi nilai keren dari blognya hehe

Makanya, jangan heran kalo pas lagi buka blog orang, terus kalian nggak nemu NavBar di halaman bloggernya.

Contoh Tampilan Halaman Blog tanpa NavBar

Bagi kalian yang pengen join dalam kasta Anti NavBar, caranya menghilangkannya bisa kalian cek disini.

Oke, sekian dari saya.

Semoga bermanfaat bagi yang benar-benar ingin memanfaatkan haha :D

akhir kata, Thanks for reading :)))

Read More

Cara Menghilangkan atau AutoHide NavBar

Oke, setelah nge-share mengenai apa itu NavBar, sekarang yuk kita lanjut mengenai cara menghilangkan atau nge-AutoHide NavBar pada halaman blog.

Bagi kalian yang belom tau apa itu NavBar, kalian bisa baca disini.

Well, pertama-tama kita coba buat menghilangkan NavBar-nya dulu yah. Gini caranyaaaa :

• Masuk ke halaman Dasbor Blogger masing-masing.
• Setelah halaman Dasbor Blogger muncul, klik pada bagian Opsi lainnya, kemudian klik Tata Letak seperti pada gambar.

• Selanjutnya, lihat pada kotak Navbar, terdapat pilihan Edit yang terletak di pojok kanan bawah kotak. Klik Edit, kemudian akan muncul kotak dialog Konfigurasi Navbar

• Untuk menghilangkan NavBar, kita hanya perlu meng-klik button Off yang terletak di bagian kiri bawah kotak dialog. Kemudian, klik Simpan dan kotak dialog Konfigurasi Navbar akan tertutup secara otomatis setelah proses penyimpanan tadi selesai.
• Setelah itu, klik Simpan Setelan. Tunggu hingga proses penyimpanan selesai.
• Hasil perubahan dapat kita lihat dengan cara klik Lihat blog.

Gimana ? Nggak susah* amat kan ? hehee

Kalo suatu saat kalian berubah pikiran untuk menampilkan NavBar lagi, tinggal ulangi aja step by step di atas. Bedanya, kalo pengen menghilangkan kita klik button Off, kalo untuk menampilkan kita pilih dulu tampilan NavBar mana yang mau kita pake, klik button-nya dan lanjut sampai step terakhir.

Selain bisa dihilangkan, NavBar juga bisa kita AutoHide.

Gimana caranya ? Ini diaaaaa :

• Pastikan NavBar kita nggak dalam posisi Off.
• Setelah masuk ke halaman Dasbor Blogger, klik pada bagian Opsi lainnya, kemudian klik Template seperti pada gambar.

• Setelah itu, klik Edit HTML seperti tampak pada gambar.

• Kemudian, tekan Ctrl+F lalu ketik ]]></b:skin> untuk memudahkan pencarian kode.
• Copy kode teks berikut.
#navbar-iframe { opacity:0.0; filter:alpha(Opacity=0) } #navbar-iframe:hover { opacity:1.0; filter:alpha(Opacity=100,FinishedOpacity=100)


• Kemudian paste kode teks tersebut di atas baris kode ]]></b:skin> seperti pada gambar.

• Setelah itu klik Simpan template. Tunggu hingga proses penyimpanan selesai.
• Hasil perubahan dapat kita lihat dengan cara klik Lihat blog.

Okeeee, selesai :D

Pada AutoHide, NavBar kita bakalan nggak kelihatan. Tapi ketika kita arahkan kursor ke bagian atas halaman, taraaaaaa !! Muncul lah dia si NavBar hehe

Well, sekian tutorial dari aku.
Good luck bagi kalian yang pengen nyoba :D
Akhir kata, semoga bermanfaat :)
Thanks for reading :)))

Read More

Ciri-Ciri Tampilan Website yang Buruk

Gnite bloggers :)
Hari ini aku pengen nge-share mengenai gimana ciri-ciri tampilan website yang buruk. Hal yang paling mendasar banget, terutama bagi kalian yang baru terjun ke dunia blogger *termasuklah aku hehe
Oke, langsung aja. Check this out !

1. Desain Secara Umum

• Loading Page yang memakan waktu lama.
• Halaman pertama (beranda/home) tidak pas dalam browser standar, yaitu 800 x 600 pixel.
• Frame yang harus digeser (scroll) menyamping.
• Tidak ada fokus tema atau terlalu banyak fokus tema dalam satu halaman tersebut.
• Pemilihan warna yang tidak cocok antara satu sama lain.
• Peletakkan teks, paragraf, gambar dan sebagainya berantakan.
• Halaman tampak bagus ketika dibuka di satu browser, tapi berantakan jika dibuka di browser lain.
• Tombol navigasi menjadi satu-satunya daya tarik.

2. Desain Background (Latar Belakang)

• Kombinasi antara teks dan background yang membuat tulisan jadi sulit dibaca.
• Background terlalu ramai, misalnya menggunakan gambar format .gif animasi sehingga membuat tulisan tidak jelas.
• Pemilihan warna yang terlalu standar, atau terlalu banyak warna yang bertabrakan sehingga menyakitkan mata.

3. Penggunaan Teks

• Jenis font yang digunakan sulit dibaca.
• Menggunakan font dengan size yang terlalu kecil ataupun terlalu besar.
• Teks terlalu panjang dan menembus batas kanan halaman.
• Seluruh paragraf ditulis dengan huruf BESAR, cetak tebal, ataupun cetak miring.
• Menggunakan garis bawah pada teks yang bukan link, sehingga akan membingungkan pengunjung.

4. Pemberian Link

• Link yang tidak berubah warna atau tidak bergaris bawah ketika ditunjuk.
• Link yang ketika di klik akan membuka web browser baru, muncul iklan, atau hal-hal tidak jelas lainnya.
• Link yang menghubungankan pengunjung ke halaman yang tidak sesuai atau tanpa tujuan (broken link).

5. Pemuatan Gambar

• Gambar yang dimuat terlalu besar, sehingga memperlambat loading page.
• Gambar yang digunakan tidak ada hubungannya dengan tema situs atau postingan blog.
• Ukuran gambar thumbnail yang digunakan sama besar dengan gambar aslinya.
• Gambar yang hilang atau rusak (muncul tanda x kecil berwarna merah).

6. Pemuatan Tabel

• Tabel yang digunakan tidak menggunakan border.
• Border yang digunakan terlalu tebal.

7. Menggunakan Objek Blinking (Berkedip) dan Animasi

• Menggunakan animasi yang tidak berhenti.
• Menggunakan objek yang mengikuti kemanapun kursor bergerak.
• Menggunakan segala jenis objek berkedip, khususnya teks.

8. Sampah (Junk)

• Memuat iklan yang tidak penting, terutama iklan yang mengandung nilai pornografi atau kekerasan.
• Memuat widget yang tidak terlalu penting, sehingga hanya memperlambat loading page.
• Pengunjung harus melakukan scroll kiri-kanan.

Berikut adalah contoh tampilan website yang kurang baik

Contoh Tampilan Website yang Buruk

Sumpah ! Buat nunggu ini website selesai loading page aja tuh lama bingit -____-
Gambarnya entah kemana-mana, animasinya nggak berenti-berenti, udah gitu kita musti scroll kiri-kanan buat ngeliat isi ini website.
Dari pada musti nunggu lama, langsung aja aku stop loading pagenya, dengan senang hati :))
Saran aku cuma satu buat kalian, "Jangan pernah mencoba untuk membuka website tersebut !!"

So, begitulah sekilas mengenai ciri-ciri tampilan website yang kurang baik.
Meskipun kayaknya sepele, tapi kalo menurut aku pribadi sih ini hal yang penting.
Ibarat kata pepatah, "Dari mata turun ke hati".
Kebayangkan, kalo pas pertama pengunjung ngeliat tampilan website kita jelek, bahkan sampai bikin pengunjung risih, terus dimana daya tarik dari website kita ?

Well, sekian ciri-ciri mengenai website yang buruk. Untuk ciri-ciri mengenai website yang baik bisa kalian lihat disini.
Semoga bermanfaat :)) Thanks for reading~

Read More

Ciri-Ciri Tampilan Website yang Baik

Hello bloggers :)
Pada postingan ini, aku mau nge-share mengenai ciri-ciri tampilan website yang baik itu gimana.

"Lah, emang penting yah ?"

Ya penting lah. Terutama bagi kalian yang belom bisa ngebedain mana yang "keren" dan mana yang... ah sudahlah. Mending langsung aja deh kita bongkar ciri-ciri tampilan website yang baik, oke ? Here is it !

1. Desain Secara Umum

• Loading page yang tidak memakan waktu lama
• Halaman pertama (beranda/home) pas dalam browser standar, yaitu 800 x 600 pixel.
• Meletakkan teks, paragraf, gambar, dan sebagainya dengan rapi.
• Setiap halaman tampak sebagai bagian dari situs tersebut.
• Menggunakan pilihan warna yang sesuai dan tidak berlebihan.

2. Pengggunaan Teks

• Jenis font yang digunakan mudah dibaca (menggunakan font standar).
• Menggunakan font size yang cukup besar untuk dibaca, tapi tetap tidak terlalu besar.
• Pemilihan warna font tidak sama atau bertabrakan dengan background, sehingga tulisan mudah dibaca.
• Menggunakan kalimat yang mudah dimengerti, sehingga pengunjung mendapat informasi yang jelas.

3. Pemberian Link

• Link berubah warna atau bergaris bawah ketika ditunjuk.
• Link menghubungkan pengunjungnya ke halaman yang sesuai.

4. Pemuatan Gambar

• Setiap gambar memiliki keterangan.
• Setiap link gambar memiliki link teks yang jelas.
• Gambar dan latar belakang menggunakan warna yang mampu ditampilkan browser (browser-safe colors)

5. Navigasi

• Menggunakan tombol dan navigation bar yang mudah dipahami penggunanya.
• Navigasi konsistem di seluruh situs.
• Menggunakan tombol dan navigation bar yang memberi petunjuk pada pengunjung sedang berada di halaman mereka serta halaman apa yang sedang mereka lihat.

Berikut adalah contoh tampilan website yang baik:

Contoh Tampilan Website yang Baik

Dari screen capture di atas, aku rasa kalian udah pada nggak asing dengan ni website.
Terutama bagi kalian yang doyan jual beli online. But, it still not a commercial break -__-
Menurut penilaian aku, dari segi tampilan website ini sudah cukup baik.
Tiap-tiap elemennya udah tersusun rapi, meski aku rasa tampilannya terbilang sederhana.
But, it's fine lah, daripada website yang nggak jelas isinya apa dengan tampilannya yang bikin sakit mata.

Well, that's all i wanna share :)
Semoga postingan ini dapat bermanfaat bagi yang ingin memanfaatkan hehe.
Buat kalian yang masih suka salah mengartikan makna "gaul", recommed banget nih haha :D
Untuk ciri-ciri tampilan website yang kurang baik, bisa kalian lihat disini.

Akhir kata saya ucapkan makasih.
Thanks for reading :))

Read More