Attribute Marquee (Text Berjalan)

Sudah tahukan bagaimana membuat text berjalan dengan marquee? Kalau belum coba lihat post sebelumnnya Cara Membuat Text Berjalan dengan Marquee.

Sekarang apa saja sih attribute dari marquee? yuk disimak.

Attribute "direction" untuk mengubah arah gerak text

Default arah untuk marquee adalah ke kiri seperti contoh dibawah ini yang tanpa menggunakan atribut "direction::
<span style="color: black; font-family: Arial; font-size: 14;"><marquee bgcolor="#FFFFBF">Tulis Text (warna biru) yang diinginkan di sini</marquee></span> 

Hasilnya akan menjadi seperti :
Tulis Text (warna biru) yang diinginkan di sini


Untuk mengubah arah gerak tulisan kita membutuhkan atribut "direction" perhatikan kode berikut :

• Mengubah arah gerak tulisan ke kanan

<span style="color: black; font-family: Arial; font-size: 14;"><marquee bgcolor="#FFFFBF" direction="right">Tulis Text (warna biru) yang diinginkan di sini</marquee></span> 

Hasilnya seperti dibawah ini:

Tulis Text (warna biru) yang diinginkan di sini

• Mengubah arah gerak tulisan ke atas

<span style="color: black; font-family: Arial; font-size: 14;"><marquee bgcolor="#FFFFBF" direction="up">Tulis Text (warna biru) yang diinginkan di sini</marquee></span>

Hasilnya seperti dibawah ini :

Tulis Text (warna biru) yang diinginkan di sini

• Mengubah arah gerak tulisan ke bawah

<span style="color: black; font-family: Arial; font-size: 14;"><marquee bgcolor="#FFFFBF" direction="down">Tulis Text (warna biru) yang diinginkan di sini</marquee></span>

Hasilnya seperti dibawah ini :

Tulis Text (warna biru) yang diinginkan di sini

Read more

Cara Membuat Text Berjalan Dengan Menggunakan Marquee

Pernahkah anda melihat blog dengan tulisan berjalan seperti di bawah ini?

Cara Membuat Text Berjalan dengan Menggunakan Marquee di pojok-ruang.blogspot.com 

Pasti pernah kan? Cara membuatnya ternyata tidak susah lho.
Caranya :

<marquee>Tulis Text yang diinginkan di sini</marquee>

Hasilnya seperti di bawah ini :

Tulis Text yang dikehendaki di sini


Sekarang kita coba memodifikasi kode marquee diatas (emangnya sepeda motor apa!?)

Untuk mengganti warna, jenis dan ukuran font bisa dengan cara :

<span style="color: blue; font-family: Arial; font-size: 20;"><marquee>Contoh Text Warna Biru</marquee></span>

Hasilnya :
Contoh Text Warna Biru

Ubahlah color, font-family dan font-size seperti yang dikehendaki.

Untuk memberi background pada tulisan berjalan :

<span style="color: red; font-family: Arial;"><marquee bgcolor="#FFFFBF">Contoh Text Warna Merah Dengan Background</marquee></span>

Hasilnya :
Contoh Text Warna Merah Dengan Background

Anda dapat menyesuaikan warna bgcolor. Untuk daftar bgcolor bisa dilihat di sini.

Untuk membuat tulisan berjalan ke arah yang diinginkan dan attribute lainnya bisa dilihat di sini

Read more

Cara Membuat Text Area dengan Tombol Select All

Untuk beberapa orang mungkin istilah Text Area masih dirasa asing (seperti saya ini yang baru tahu. hehehe..). Kalau kita jalan-jalan di web dan blog, terutama blog yang memberikan tutorial HTML, dsb ada kotak yang memuat kode-kode HTML. Jadi Text Area ini digunakan untuk menampilkan kode-kode HTML atau kode lainnya (bahasa kerennya script) dalam bentuk text. Biasanya kalau kita langsung mengetikkan kode HTML tanpa adanya text area, kode tersebut akan diterjemahkan oleh browser dan ditampilkan hasilnya, padahal mungkin sebenarnya kita ingin menampilkan kode mentahan HTMLnya. Tapi text area gak cuma dibuat menampilkan kode HTML lho. Kita juga bisa memuat tulisan pada text area. Seperti apakah text area itu? Mari kta lihat contoh text area :

Contoh Text Area

itulah yang dinamakan Text Area. Cara membuatnya sangat mudah. Silakan mengcopy kode berikut

<p align="center"><textarea name="code" rows="2" cols="15"> Ketik yang ingin ditampilkan di sini </textarea></p>

Hasilnya menjadi :

Ketik yang ingin ditampilkan di sini

Selain itu, Text Area juga dapat dilengkapi dengan Tombol yang dengan otomatis memblok semua tulisan yang terdapat dalam text area. Caranya dengan kode berikut :

<div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Select All" type="button"> </span></div><p align="center"><textarea style="width: 200px; height: 80px;" name="txt" rows="5" wrap="VIRTUAL" cols="50" readonly="">ganti tulisan ini dengan yang ingin ditampilkan dalam text area</textarea></p></form></div>

Hasilnya Menjadi :

ganti tulisan ini dengan yang ingin ditampilkan dalam text area

Keterangan :

1. div align="center" yang pertama menunjukkan posisi tombol, bisa diubah menjadi right untuk posisi tombol di kanan atau left untuk posisi tombol di kiri.
2. input onclick="javascript:this.form.txt.focus();this.form.txt.select();" adalah kode yang memuat perintah block all. Jadi untuk amannya tulisan ini tidak perlu diubah-ubah.
3. Yang diblok hijau (value="Select All") adalah nama tombolnya, bisa diganti sesuai selera masing-masing
4. div align="center" yang kedua menunjukkan posisi kotak textarea, yang sama seperti yg pertama dapat diubah ke kanan atau ke kiri.
5. style="height: 80 px width: 200px;" adalah tinggi dan lebar kotak textarea, bisa diubah sesuai selera (height = tinggi; width = lebar)Kalau isi di dalam textarea lebih besar daripada kotaknya, akan muncul scroll secara otomatis
6. readonly="" adalah kode untuk mengunci agar tulisan dalam textarea tidak dapat diubah. Kode ini penting terutama untuk textarea berisi kode script agar pembaca tidak dapat dengan tidak sengaja mengubah isi dalam kotak textarea. Tapi tenang saja kalau isi kotak sudah di-copy dan di-paste di tempat lain, kode tersebut bisa diubah. Coba deh bedakan sendiri dengan textarea yang standard di atas yang tidak memakai script ini. Sudah tahu kan bedanya?

Read more

Cara Mudah Mengatasi Error "... "zx" must end with the ';' delimiter." Pada Saat Cek Validasi Feedburner

Banyak teman-teman yang sangat bermurah hati untuk memberikan template blogger dengan gratis. Sehingga untuk orang seperti saya yang gak punya pengetahuan soal desain template apalagi ubek-ubek HTML, template yang dibagikan secara gratis oleh teman-teman sangat bermanfaat sekali. Seperti template blog Pojok Ruang ini, saya mendapatkannya dari maskolis yang baik hati. Melihat-lihat template yang dipakai para suhu, sedikit demi sedikit ingin melengkapi blog milik sendiri juga. Salah satunya fitur FEEDBURNER. Apa itu Feedburner? Bisa dicari detailnya di mbah google. Karena saat ini saya belum sepenuhnya mengerti. Cara mendaftarnya? Silakan lihat disini.
Back to topik. Saat mendaftarkan blog kita di Feedburner ada pesan bahwa blog saya tidak valid. Yah saya cek kevalidannya deh di link yang tersedia dan muncullah sumpah serapah :
"The URL does not appear to reference a valid XML file. We encountered the following problem: Error on line .. : The reference to entity "zx" must end with the ';' delimiter."
Lalu dibawahnya juga disajikan HTML blog kita. Ada yang diblok warna kuning, tapi setelah bolak balik saya lihat dengan kode HTML di blog kok gak sama. Saya juga gak ngerti apa maksudnya tuh error gimana mau membetulkannya coba.
Setelah saya search sana sini, ternyata banyak juga teman-teman yang mengalami hal serupa, tapi saya tidak menemukan jawabannya (mugnkin nyarinya kurang giat ya). Jalan kesana kemari ternyata nemu caranya dari teman di Luar yang saya lupa linknya (gomene). pada intinya caranya ternyata cukup mudah.
Caranya:

1. PENTING : Back up template dulu. Bagi yang belum tahu caranya disini
2. Pilih template simple yang disediakan oleh blogger
3. Lalu daftarkan lagi blog ke Feedburner

FOILA!!!! Blognya gak disumpah serapahin lagi dah sama Feedburner.
Setelah berhasil, restore template yang telah di-backup sebelumnya.
Semoga cara ini juga bisa mengatasi error yang dialami ya

Read more

Cara Membuat Text Berjalan Pada Tab Bar

 

Setelah kita mengubah Icon pada address bar, kita juga dapat membuat tulisan pada Tab Bar menjadi bergerak. Caranya ternyata sangat mudah yaitu :

1. Buka TEMPLATE > EDIT HTML
2. Cari kode <head>
3. Copy dan paste kode berikut dibawahnya :
   
   <script language='JavaScript'>var txt=&quot;Welcome To Pojok ruang &quot;;
   var kecepatan=120;var segarkan=null;function bergerak() { document.title=txt;
   txt=txt.substring(1,txt.length)+txt.charAt(0);
   segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}bergerak();
   </script>
4. Ubah tulisan merah sesuai selera masing-masing
5. Jangan Lupa untuk Save Template

Read more

Cara mengubah Icon Blog Pada Address Bar

Kalau kita membuat blog menggunakan blogspot, icon standar pada address bar atau tab bar browser kita adalah icon dari blogger itu sendiri seperti gambar dibawah

Nah, pingin rasanya menggantinya dengan icon kita sendiri agar berbeda dari yang lain. Caranya ternyata cukup mudah. Pastikan dulu anda punya icon yang diinginkan. Bisa membuat sendiri atau mencari di google. Kalau sudah menentukan pilihan icon mana yang mau digunakan, jangan lupa rezise gambar dan pastikan ukurannya adalah 24x24 pixel sampai dengan 32x32 pixel. Tentu saja tahu kan cara untuk me-resize gambar? bagi yang belum cari tahu di sini. 

Ok. Kalau icon sudah siap, upload di photobucket atau web sejenis. Kalau saya sih pakai picasa web milik google. Setelah selesai upload, mari kita ubah tampilan icon blog kita dengan cara :

• Masuk ke TEMPALATE > Edit HTML
• Cari kode </head> (pakai ctrl+f untuk mencari agar lebih mudah)
• Lalu paste kode : <link href='http://pojok-ruang.blogspot.com/icon.gif' rel='SHORTCUT ICON'/> diatas kode </head> yang kita cari tadi
• Tulisan warna merah dapat diganti dengan icon anda.

Contoh bila menggunakan picasaweb: 

1. Klik pada gambar icon yang sudah diupload,  
2. Link to this photo 
3. Copy kode didalam kotak embed image
4. Lalu copy alamat yang terdapat pada img src < ........  img src="http://bla..bla..bla.jpeg/gif/png" ......... >
5. Paste ke kode dengan tulisan merah diatas (menggantikan 'http://pojok-ruang.blogspot.com/icon.gif')

Lihat Juga:
Cara Membuat Text Berjalan di Tab Bar Browser

Read more

Postingan Pertama

Coba posting ah......

Sudah lama pengen punya blog, pengen tambah-tambah penghasilan. Lihat sana, lihat sini. Baca sana, baca sini tapi gak mulai-mulai. Bingung mau nulis apa. Gak mau sama template yang standard biasa-biasa aja. Ngeliat HTML malah pusing 7 keliling karena gak ngerti nih bahasa planet dari mana coba. Lama kelamaan terkubur dah keinginan punya blog.

Sampe akhirnya niat mau buka toko online. Yah, karena gak pede bakal berhasil, bikin dah yang gratisan. Eh balik lagi deh di blogspot. Keinginan lama jadi tergali lagi. Cari bahan-bahan buat ngerti bahasa HTML sampe cari-cari template yang gratisan. Ketemu punya orang-orang dermawan yang baik hati yang membagikan secara gratis. Tapi yah, namanya juga gratisan pasti banyak yang ga sesuai. Niatnya pengen bisa langsung connect sana sini, tapi masih keterbatasan pengetahuan. Jadi yah ngubek-ngubek aja si HTML. Lama kelamaan jadi mulai mengerti penulisan HTML, tapi ya gitu deh. Kalau ada kelasnya, aku ini masih terbilang anak TK. baca aja belum becus. Hahaha.. Tapi sangat menarik sekali buat menambah ilmu.

Satu yang pasti. Untuk orang yang tergolong malas seperti aku (mungkin juga buat yang gak malas), kalau mau belajar sesuatu, terutama yang baru sama sekali buat anda yang penting :

1. Tertarik - yah... sedikit ketertarikan sudah cukup, tapi gak berhenti sampai di sini aja.
2. Niat - Ini agak susah buat orang-orang malas seperti diriku ini. Biasanya niat besar saat di awal-awal saja, lama kelamaan jadi malas, apalagi kalau masih harus beraktifitas yang lainnya.
3. Tujuan - Ini nih pemompa yang terbesar. Tentukan tujuan yah proyek kecil-kecilan dulu. Yang terpenting berhubungan dengan kebutuhan kalian. Kalau kalian gak butuh, rasa malas akan menyerang lho. Waspadalah. Waspadalah.
4. Doa - Kalau bilang dengan istilah keren "Last but not least". Percayalah Doa itu penting lho. Saat down, malas, berdoalah.

Dengan hal-hal penting diatas, aku tidak menjamin kalian akan berhasil. Karena yang terpenting adalah dirimu sendiri, tentukan sendiri cara terbaik untuk membuat dirimu berhasil. Karena cara 1 orang dengan yang lain berbeda. Tentukan cara terbaik untuk dirimu.

Read more