Cara Membuat Textarea

Textarea diperlukan dalam pembuatan blog atau website saat membuat text atau tulisan di dalam box. Hasil penulisan text di dalam Textarea tersebut akan ditulis tanpa merubah ukuran dari texarea itu sendiri (sebelumnya char width (cols) dan rows didefinisikan terlebih dahulu). Apabila text yang ditulis melebihi kapasitas ukuran textarea, maka textarea tersebut akan otomatis membuat scrollbar di sebelah kanan.



Dalam text area, penulisan kode HTML, CSS, atau script lain dapat ditulis tanpa perlu menggunakan entitas HTML atau dengan kata lain seluruh text, kode, dan script yang ditulis pada textarea akan tampil apa adanya setelah diposting.




Para blogger biasanya menggunakan textarea sebagai tempat untuk menyimpan kode HTML, CSS, atau script yang lain misalnya url download, script tukar link, script banner exchange, dan lain-lain. Berikut ini akan saya jelaskan cara membuat textarea pada blog jika suatu saat dibutuhkan untuk menempatkan atau menyimpan kode HTML. Cols berfungsi untuk mendefinisikan jumlah karakter ke samping yang akan ditampilkan pada textarea, Rows berfungsi untuk mendefinisikan jumlah baris pada textarea.



Contoh 1 : Penulisan text di dalam textarea dengan ukuran char width 30 dan jumlah baris 4 :




Penulisan kode HTML :

<textarea cols="30" rows="4">Tulisan ini ada di dalam textarea </textarea>

Tampilan setelah diposting :

Tulisan ini ada di dalam textarea




Contoh 2 : Penulisan text di dalam textarea dengan ukuran char width 30 dan jumlah baris 4 tetapi tulisan melebihi kapasitas textarea:



Penulisan kode HTML :

<textarea cols="30" rows="4">Tulisan ini ada di dalam textarea dengan ukuran char width 30 dan jumlah baris 4, perhatikan penulisan ini akan melebihi batas textarea sehingga secara otomatis akan tampil scrollbar di sebelah kanan. Untuk membaca sisa text yang tidak terlihat bisa dengan menggeser scrollbar tersebut.</textarea>

Tampilan setelah diposting :

Tulisan ini ada di dalam textarea dengan ukuran char width 30 dan jumlah baris 4, perhatikan penulisan ini akan melebihi batas textarea sehingga secara otomatis akan tampil scrollbar di sebelah kanan. Untuk membaca sisa text yang tidak terlihat bisa dengan menggeser scrollbar tersebut.





Contoh 3 : Penulisan text di dalam textarea dengan ukuran char
width 30 dan jumlah baris 4 dengan status readonly sehingga text yag berada di dalam textarea tidak bisa diedit setelah diposting.




Penulisan kode HTML :

<textarea cols="30" rows="4" readonly="readonly">Contoh penulisan text di dalam text area dengan status readonly, sehingga tulisan tidak bisa di-edit yg hasilnya seperti ini bla bla bla bla bla bla bla. bla.</textarea>

Tampilan setelah diposting :

Contoh penulisan text di dalam text area dengan status readonly, sehingga tulisan tidak bisa di-edit yg hasilnya seperti ini bla bla bla bla bla bla bla. bla.






Contoh 4 : Penulisan kode html di dalam textarea dengan ukuran char width 30 dan jumlah baris 4 dengan status text readonly untuk mencegah pengeditan setelah diposting:



Penulisan kode HTML :

<textarea cols="30" rows="4" readonly="readonly"> <a target="_blank" href="http://blogbelajarblogger.blogspot.com/"> <img border="0" alt="BELAJAR BLOGGER" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx_yN7_TAefol1_g9YfRK6qLLYNz1xyhvNNcxPe5x3F2Prn90PRhIWEglnaS23iuzqe4WhZG22oa0gACJDQPKEtA7CxuMth1SUzcKosHsgF4-zyD9y-uZJTchQOvUXEgg91d07zPTSqSyi/s1600/BELAJARBLOGGERWITH_ARDI.png" title="BELAJAR BLOGGER"/>< /a> </textarea>

Tampilan setelah diposting :

<a target="_blank" href="http://blogbelajarblogger.blogspot.com/"><img border="0" alt="BELAJAR BLOGGER" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx_yN7_TAefol1_g9YfRK6qLLYNz1xyhvNNcxPe5x3F2Prn90PRhIWEglnaS23iuzqe4WhZG22oa0gACJDQPKEtA7CxuMth1SUzcKosHsgF4-zyD9y-uZJTchQOvUXEgg91d07zPTSqSyi/s1600/BELAJARBLOGGERWITH_ARDI.png" title="BELAJAR BLOGGER"/></a>





Kode HTML pada contoh 4, jika tidak menggunakan textarea dapat juga ditulis dengan menggunakan entitas HTML seperti di bawah:



Penulisan kode HTML :

<p>&lt;a target=&quot;_blank&quot; href=&quot; http://blogbelajarblogger.blogspot.com/&quot;&gt; &lt;img border=&quot;0&quot; alt=&quot; Link Sukses&quot; src=&quot; https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx_yN7_TAefol1_g9YfRK6qLLYNz1xyhvNNcxPe5x3F2Prn90PRhIWEglnaS23iuzqe4WhZG22oa0gACJDQPKEtA7CxuMth1SUzcKosHsgF4-zyD9y-uZJTchQOvUXEgg91d07zPTSqSyi/s1600/BELAJARBLOGGERWITH_ARDI.png&quot; title=&quot; BELAJAR BLOGGER&quot;/&gt;&lt;/a&gt; </p>




Tampilan setelah diposting :

<a target="_blank" href = "http://blogbelajarblogger.blogspot.com/"> <img border="0" alt="Link Sukses" src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx_yN7_TAefol1_g9YfRK6qLLYNz1xyhvNNcxPe5x3F2Prn90PRhIWEglnaS23iuzqe4WhZG22oa0gACJDQPKEtA7CxuMth1SUzcKosHsgF4-zyD9y-uZJTchQOvUXEgg91d07zPTSqSyi/s1600/BELAJARBLOGGERWITH_ARDI.png" title="BELAJAR BLOGGER"/></a>



Pada contoh 1 dan contoh 2, tulisan di dalam textarea masih bisa diedit, tetapi pada contoh berikutnya, tulisan di dalam textarea tidak bisa diedit (readonly).

Tambahan....textarea dengan background warna

Dengan sedikit modifikasi, Textarea ini dapat mengahasilkan bentuk yang lumayan cukup bagus dan mungkin disini yang membedakannya. Jika teman-teman tertarik untuk membuatnya, silahkan Copy Codescriptnya yang berada di dalam Textarea tersebut sesuai pilihan teman-teman.

Contoh Textarea Standar

<textarea cols="25" rows="3"> Contoh Textarea standar yang belum di modifikasi... </textarea>

• Contoh Textarea dengan Background Warna 1:

<textarea cols="20" name="code" rows="3" style="-moz-border-radius: 7px 7px 7px 7px; background: none repeat scroll 0% 0% rgb(251, 239, 255); border-color: rgb(202, 61, 217); border-style: solid; border-width: 1px 1px 1px 20px; color: #ca3dd9; line-height: 1.5em; padding: 5px;"> Contoh Textarea dengan Background Warna 1 </textarea>

• Contoh Textarea dengan Background Warna 2:

<textarea cols="20" name="code" rows="3" style="-moz-border-radius: 5px 5px 5px 5px; background: none repeat scroll 0% 0% rgb(0, 0, 0); border: 2px inset rgb(204, 204, 204); color: white; line-height: 1.5em; padding: 0pt 7px;"> Contoh Textarea dengan Background Warna 2 </textarea>

• Contoh Textarea dengan Background Warna 3:

<textarea cols="20" name="code" rows="3" style="-moz-border-radius: 10px 10px 10px 10px; background: none repeat scroll 0% 0% rgb(191, 250, 255); border-color: rgb(255, 233, 0) rgb(64, 255, 31) rgb(64, 255, 31) rgb(255, 233, 0); border-style: solid; border-width: 4px; color: red; line-height: 1.5em; padding: 5px;"> Contoh Textarea dengan Background Warna 3 </textarea>

• Contoh Textarea dengan Background Warna 4:

<textarea cols="20" name="code" rows="3" style="-moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; background: none repeat scroll 0% 0% rgb(255, 218, 175); border: 2px ridge rgb(127, 69, 0); color: #7f4500; line-height: 1.5em; padding: 5px;"> Contoh Textarea dengan Background Warna 4 </textarea>

• Contoh Textarea dengan Background Warna 5:

<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(218, 255, 191); border: 2px dashed rgb(41, 95, 0); color: #295f00; line-height: 1.5em; padding: 5px;"> Contoh Textarea dengan Background Warna 5 </textarea>

• Contoh Textarea dengan Background Warna 6:

<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(239, 0, 144); border: 3px dotted rgb(255, 239, 249); color: #ffeff9; line-height: 1.5em; padding: 5px;"> Contoh Textarea dengan Background Warna 6 </textarea>

• Contoh Textarea dengan Background Warna 7:

<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(255, 0, 10); color: white; line-height: 1.5em; padding: 5px;"> Contoh Textarea dengan Background Warna 7 </textarea>

Mohon koreksi teman-teman jika saya salah memberikan informasi mengenai textarea di atas. Semoga bermanfaat.


sumber:

04.23 | 1 komentar | Read More

Tips Mengganti Tulisan Posting Baru, Posting Lama, dan Home dengan GAMBAR / Kata unik

Terkadang seorang blogger yang memiliki sebuah blog yang dibangun dengan Blogspot, ingin merubah tulisan Posting Lama dengan kalimat atau gambar sendiri, merubah tulisan posting baru degan kalimat atau gambar sendiri, merubah tulisan home dengan kalimat atau gambar sendiri.

Tentu saja masing-masing merka memiliki alasan tersendiri. Namun kebanyakan beralasan untuk mempercantik tampilan (kalau perubahan tersebut menggunakan gambar) dan untuk mempermudah pengertian yang lebih tepat (kalau perubahan tersebut mengunakan kalimat).

Persiapan :

1. Sebelum melakukan perubahan, sebaiknya back-up terlebih dahulu template Anda sebagai antisipasi kalau-kalau terjadi error.
2. Gunakan Ctrl+F untuk memudahkan pencarian Kode HTML
3. Siapkan 3 gambar kalau perubahan akan menggunakan gambar kemudain upload gambar tersebut ke Picasa Album atau ke tempat lain misalnya photobucket.com, imageshack.com, tinypic.com, dan sebaginya.
4. Catat seriap URL dari gambar yang bersangkutan. 

1. Mengganti Tulisan Posting Lama

1. Login ke blogger.com atau draft.blogger.com 
2. Buka Tab Layout atau Tata Lelak atau Design
3. Pilih Tab Edit HTML kemudian tandai Expand Widget Templates.
4. Sebaiknya Back Up Dulu dengan cara meng-copas semua kode dalam kotak Editor pada Notepad atau dengan cara Anda sendiri.
5. Cari kode : <data:olderPageTitle/>  (gunakan Ctrl+F untuk memudahkan pencarian).
6. Ganti kode tersebut dengan tulisan Anda misalnya "Sebelumnya>>" tanpa tanda kutip, kalau dengan gambar ganti dengan kode <img src="URL gambar"/>
7. Click Save Template lalu lihat hasilnya.

2. Mengganti Tulisan Posting  Baru

1. Login ke blogger.com atau draft.blogger.com.
2. Buka Tab Layout atau Tata Lelak atau Design.
3. Pilih Tab Edit HTML kemudian tandai Expand Widget Templates.
4. Sebaiknya Back Up Dulu dengan cara meng-copas semua kode dalam kotak Editor pada Notepad atau dengan cara Anda sendiri.
5. Cari kode : <data:newerPageTitle/> (gunakan Ctrl+F untuk memudahkan pencarian).
6. Ganti kode tersebut dengan tulisan Anda misalnya "<<Sesudahnya" tanpa tanda kutip, kalau dengan gambar ganti dengan kode <img src="URL gambar"/>
7. Click Save Template lalu lihat hasilnya.

3. Mengganti Tulisan Home

1. Login ke blogger.com atau draft.blogger.com.
2. Buka Tab Layout atau Tata Lelak atau Design.
3. Pilih Tab Edit HTML kemudian tandai Expand Widget Templates.
4. Sebaiknya Back Up Dulu dengan cara meng-copas semua kode dalam kotak Editor pada Notepad atau dengan cara Anda sendiri.
5. Cari kode : <data:homeMsg/>  (gunakan Ctrl+F untuk memudahkan pencarian).
6. Ganti kode tersebut dengan tulisan Anda misalnya "Beranda" tanpa tanda kutip, kalau dengan gambar ganti dengan kode  <img src="URL gambar"/> (ada dua kode yang sama, dua-duanya harus diganti)
7. Click Save Template lalu lihat hasilnya.

Selamat mencoba, semoga bermanfaat.

03.32 | 1 komentar | Read More

Judul Blog Berjalan / bergerak

Belajar blogGer , NAH...sesuai dengan judul yang diatas aku ardi menerangkan sedikit ilmu yang ardi dapatkan dari pengalaman dari pengalaman . jika anda belum faham ardi  akan menerangkan dulu.

Judul blog berjalan?

judul blog kita terlihat berjalan di title bar browser anda untuk lebih mempercantik blog kita dan blog kita telihat menarik jika dikunjungi oleh orang lain :D 

contohnya klik di sini

Gimana pengen tau caranya?

Ardi akan kasih tau caranya . ni......!!!

1. Login ke blogger kemudian ke menu Layout ---> Edit HTML
2. Cari kode/script
   
   
   
   <title><data:blog.pageTitle/></title>
   
   
   
   
3. Ganti kode diatas dengan
   
   
   <b:include data='blog' name='all-head-content'/>
   
   <script language='JavaScript'>
   var txt="<data:blog.pageTitle/>";
   var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
   txt=txt.substring(1,txt.length)+txt.charAt(0);
   segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
   </script>
   
   
   

Catatan
text yang berwarna merah diatas adalah merupakan kecepatan pergerakanya jika kamu tambah angkanya maka pergerakanya akan lambat dan jika mengurangi angka maka pergerakanya akan semakin cepat

04.05 | 2 komentar | Read More