Membuat Text Area

Apa itu text area?. Untuk memudahkan anda memahami apa itu text area, silahkan alihkan perhatian anda ke kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah kotak yang di dalamnya berisi text kode-kode HTML, itulah yang di sebut text area. Nah dengan melihat contoh tadi, maka dapat kita katakan bahwa Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML 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="6" cols="20">  Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p>
 
Sebagai contoh :  
 

<span style="color: rgb(114, 45, 50);"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </span>

Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya.

Cols="20", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya.

Text Area dengan memakai HighLight

Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :  

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></div></form>
 
Sebagai contoh : 

<span style="color: rgb(114, 45, 50);">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</span>

 

Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan yang kedua adalah elemen kode untuk membuat text area.

Elemen tombol highlight All : 
1. <div align="center"> ---- kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.
2. <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> ---- kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.
3. Value="Highlight All" --- kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.

Contoh text area yang memakai tombol highlight diatas, memuat skript untuk melindungi dari right click para pengunjung. skript ini di pakai apabila anda tidak ingin tulisan-tulisan anda di copy paste oleh pengunjung. bagi yang berminat silahkan copy lalu pasang pada kode HTML anda antara kode dan selamat mencoba.
 

Continue Reading »

Menghilangkan langgan entri atom

Pada Blogspot banyak tampilan yang kadang-kadang tidak disukai kemunculannya. Seperti tampilan Langgan : entri (atom) atau Subsribe :to post (atom) yang letaknya dibawah postingan.
Sebenarnya penampilan itu memiliki fungsi tersendiri yaitu agar pengunjung bisa dengan mudah menemukan alamat feed anda. Tetapi tulisan tersebut menjadi tidak penting lagi jika anda sudah menggunakan layanan feed dari Feedburner.
Anda ingin menghilangkan tampilan tulisan itu.caranya!!!

    * Sign ke Blogger.
    * Pilih Tata Letak.
    * Pilih Edit HTML.
    * Back up template dulu, untuk menjaga jika terjadi kegagalan.
    * Beri tanda centang pada Expand Widget Template.
    * Cari kode seperti dibawah ini :

      <div class='feed-links'>
      <data:feedLinksMsg/>
      <b:loop values='data:links' var='f'>
      <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
      </b:loop>
      </div>


    * Hapus/delete kode diatas.
    * Klik tombol Simpan Template.
    * Lihat Blog anda sekarang

Continue Reading »

Membuat Read More

kali ini saya ingin berbagi pengetahuan cara membuat Read More pada blogger baru...

Caranya:

    * Login ke blogger.com, pilih blog yang pengen kamu edit, klik link Layout kemudian masuk ke Edit HTML
    * Untuk bisa ngedit template secara keseluruhan, kamu harus centang/tandai/aktifkan Expand Widget Templates
    * Masukkan kode berikut sebelum tag </head> atau tepat sesudah kode } ]]></b:skin> seperti ini:

      <style>
      <b:if cond='data:blog.pageType == "item"'>
         span.fullpost {display:inline;}
      <b:else/>
         span.fullpost {display:none;}
      </b:if>
      </style>

    * Selanjutnya mengatur supaya postingan terpotong, cari kode <p><data:post.body/></p> dalam template kamu dan tambahkan kode berikut tepat dibawahnya:

      <b:if cond='data:blog.pageType != "item"'>
      <a expr:href='data:post.url'> Read More..</a>
      </b:if>

    * Nah supaya terpotong, setiap kali kamu posting, klik pada bagian posting dimana kamu pengen tulisan Read More.. muncul, dan ketik <span class="fullpost"> sisa postingan sampai selesai </span>. Untuk menmbahkan kode ini, ketika posting kamu harus dalam mode Edit HTML bukan Compose

      Contoh penulisan posting:

          sebenarnya tulisa ini masih panjang, jadi saya potong di sini untuk mempersingkat postingan ini. <span class="fullpost"> Dan ini adalah sisa postingan saya yang akan saya sembunyikan dan hanya muncul pada saat post page atau link read more.. diklik </span>

Continue Reading »

Cara Membuat Float Image (Gambar Melayang)

 
Bagi anda yang mw membuat float image(gambar melayang) Langkah Pertama
Anda harus lakukan ialah masuk ke blogger lalu pilih Layout terus Edit HTML
 
Langkah Kedua
Cari kode ]]></b:skin> kalau sudah ketemu copy kode dibawah ini dan Anda taruh di atas kode tadi.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Langkah Ketiga
Anda juga bisa ngedit kode diatas tadi, mungkin Anda ingin mengganti posisi gambar tersebut ke kanan atau kekiri, kalau Anda ingin memindakahkan tinggal ganti tulisan left ke right, dan bisa juga di pindah keatas bottom ke top.
Langkah Keempat
Cari kode </body> kalau sudah ketemu copy kode dibawah ini taruh kode copyan Anda tadi paste diatas kode </body>.

&lt;div id=&quot;trik_pojok&quot;&gt;
&lt;a href=&quot;http://www.hpfblog.co.cc&quot;&gt;
&lt;img src=&quot;http://i937.photobucket.com/albums/ad218/hafriz_higgs/Untitled-1-1.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;
&lt;/div&gt;

Langkah Kelima
Ganti http://penchenk.blogspot.com dengan alamat blog Anda dan kalau Anda ingin mengganti gambarnya cari saja kode http://i499.photobucket.com/albums/rr358/penchenk87/2vbsy6q.gif dan ganti url gambar yang Anda ingin kan.
Langkah Keenam
Jangan Lupa disimpan dan lihat hasilnya.

Continue Reading »

Mudah membuat kotak informasi menarik di web/blog

salah satu cara agar tampilan website/blog lebih menarik dan informatif adalah dengan menambahkan CSS (Cascading Style Sheet). Tetapi kali ini tidak akan dibahas apa itu CSS, tetapi langsung menerapkan dan mencoba untuk membuat kota informasi, peringatan, atau sejenisnya dalam sebuah tulisan di web/blog dengan salah satu fungsi/kode CSS.

Sekaligus ini menjelaskan (menjawab) pertanyaan salah satu pengunjung, tentang bagaimana cara menambahkan kotak informasi/peringatan penting, seperti di beberapa artikel ebsoft.

Hal ini bisa kita lakukan dengan kode (tag) HTML div. DIV merupakan kode HTML yang akan menghasilkan blok paragraf, biasa saya istilahkan dengan Box. Karena dengan menuliskan paragraf atau kalimat diantara tag <div>....</div>, maka kalimat/paragraf tersebut akan tampil dalam box yang bisa kita atur tampilannya. Untuk memudahkannya, berikut berbagai contoh dan penggunaan tag DIV.
color dan background

Kode 1
<div style="color:red;background:yellow;"> ... </div>

Perhatikan bagian setelah style. bagian itulah yang menentukan tampilan box dengan menggunakan DIV. Kode diatas menggunakan 2 atribut, yaitu color dan background. Color akan menentukan warna text dan background menentukan warna latar. Perhatikan pula penulisan tanda titik dua dan titik koma.

Atribut warna bisa diisi dengan tulisan seperti : black, blue,green, yellow, red, white dan lainnya. Bisa juga dengan menggunakan kode Heksadesimal, misalnya #FFFFFF untuk putih #0000FF untuk biru dan lainnya. Untuk mempermudah memilih warna terbaik, bisa menggunakan program gratis ColorPic
border

Pada kotax/box sebelumnya, warna kuning terlihat tanpa garis tepi. Akan lebih menarik jika kita meambahkan garis tepi di sekelilingnya. Hal ini bisa dilakukan dengan menambahkan atribut border. Contohnya sebagai berikut:

kode 2
<div style="color:blue;background:#EBF3FB;border:1px solid #AACCEE;"> ... </div>

Penjelasan nilai setelah border adalah sebagai berikut : 1px menandakan ketebalan garis ( 1 pixel merupakan satu garis tipis), solid merupakan bentuk atau rupa garis dan #AACCEE merupakan warna garis. Masing-masing dipisahkan dengan tanda spasi.

Untuk bentuk (style) border selain solid, juga bisa bernilai none, hidden, dotted, dashed, double, groove, ridge, inset, outset dan inherit. Contoh masing-masing bisa dilihat tutorial CSS border
padding dan margin

Pada box sebelumnya tulisan dalam kotak terlihat terlalu rapat dengan garis tepi (baik kiri, atas, kanan atau bawah). Agar tampilan lebih indah, maka tulisan bisa dibuat agar mempunyai jarak dengan garis tepi (lebih menjorok kedalam). Hal ini bisa kita lakukan dengan menambahkan atribut padding. Berikut contohnya :

kode 3
<div style="color:#990099;background:#ADE4AD;border:2px dashed #006600;padding:5px;margin:10px;"> ... </div>

Nilai padding:5px, berarti tulisan dalam box masuk kedalam sepanjang 5 pixel (1 pixel adalah satu garis tipis). Sebenarnya nilainya bisa diisi lebih detail misalnya padding:2px 3px 4px 5px, yang berarti jarak dari garis atas 2 pixel, dari kanan 3 pixel, bawah 4 pixel dan kanan 5pixel. Urutannya dari atas-kanan-bawah-kiri.

Untuk margin hampir sama dengan padding, hanya saja untuk margin menentukan jarak kotak ke area diluarnya (dari garis tepi keluar, mulai atas-kanan-bawah-kiri). Pada contoh tampilan diatas (yang berwarna hijau), tampak box posisinya menjorok kedalam. Karena margin:10px, maka posisi box sejauh 10 pixel dari atas, kanan, bawah dan kiri. Pengisian juga bisa dilakukan seperti padding
width (lebar box)

Dengan kode-kode seperti diatas, maka panjang box akan selebar konten atau area yang tersedia. Untuk membatasi lebar kotak, kita bisa menggunakan atribut width. Berikut contohnya:

kode 4
<div style="color:#FFFFFF;background:#FFD4AA;border:2px dotted #FF2A00;padding:5px;margin:5px;width:300px;"> ... </div>

properti width akan mengatur dan membatasi ukuran box. pada contoh di atas, nilainya adalah 300 pixel. Sebenarnya masih banyak atribut lain yang bisa disertakan, tetapi sementara 6 atribut diatas sudah cukup untuk membuat tulisan lebih informatif (dengan pemilihan warna yang tepat tentunya).

kode 1

...

kode 2

...

kode 3

...

kode 4

...




Continue Reading »