inspirasi islam: Tips Blogging

Selasa, 30 April 2013

Cara Membuat Text Area pada Postingan Blog

Assalamu'alaikum...
alhamdulillah masih bisa posting hehehhe.... pada postingan kalo ini admin mau berbagi cara untuk membuat teks area pada postingan blog. langsung aja nih >>>

pilih dulu tab HTML untuk mengcopy-paste kode HTML di bawah

A. Teks area sederhana

Kodenya :

<p align="center"><textarea name="code" rows="6" cols="20"> contoh memasukan kata atau code HTML pada text Area di Artikel Indonesia </textarea></p>

Hasilnya >>>

Keterangan :
dengan kode di atas maka tampilan teks area seperti di bawah ini. angka 6 berarti jumlah baris, 35 menunjukkan lebar form teks area.
Teks yang berwarna merah muda dapat diubah sesuai keinginan.

B. Teks Area dengan Select copy all
Kodenya :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Copy All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">contoh memasukan kata atau code HTML pada text Area di Artikel Indonesia</textarea></p></div></form>

Hasilnya >>>

Keterangan :

Teks yang berwarna merah muda dapat diubah sesuai keinginan.

C. Membuat Teks area dengan scroll
Kodenya :

<div align="center">
<div style="border: 2px solid lightblue; height: 80px; margin-left: 30px; overflow: auto; padding: 3px; text-align: justify; width: 300px;">
Ini adalah contoh Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenisjustify (rata kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas sebesar 300px.</div>
</div>

Hasilnya >>>

Ini adalah contoh Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenisjustify (rata kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas sebesar 300px.

Keterangan :

Teks yang berwarna merah muda dapat diubah sesuai keinginan.

D. Scroll Text Area + Select Copy All
Kodenya :

<div align="center">
<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Copy All" /> </div>
<div align="center">
</div>
<div align="center">
</div>
<div style="border: 2px solid lightblue; height: 80px; margin-left: 30px; overflow: auto; padding: 3px; text-align: justify; width: 300px;">
Ini adalah contoh Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenisjustify (rata kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas sebesar 300px.</div>
</form>
</div>

Hasilnya >>>

Keterangan :

Teks yang berwarna merah muda dapat diubah sesuai keinginan.

Semoga bermanfaat ya, kalo ada yang kurang jelas comment aja.
dan jangan lupa follow alfatihmedia untuk terus dapet info dan tips-tips menarik, seee yaaaaaaaaaa :)

Cara Membuat Spoiler pada Postingan Blog

Spoiler adalah sebuah fitur dalam blog fungsi utamanya adalah menyembunyikan teks, kode, kalimat atau gambar. Fungsi nya mirip dengan text area yaitu menghemat halaman posting agar tidak terlalu memanjang ke bawah. Saya yakin sobat sudah sering melihat di forum-forum bentuk sebuah spoiler, yaitu jika kita mengklik misalnya "show" atau "hide" atau "close" maka kita bisa melihat gambar / tulisan yang tersembunyi namun bisa dimunculkan.

Spoiler sering kali dipasang pada sebuah halaman posting, namun ada juga yang memasukkan nya ke dalam sidebar atau footer untuk menyembunyikan widget tertentu. Pada tutorial ini kita akan ikuti cara membuat spoiler dengan isi tulisan dan spoiler dengan isi gambar di posting blogspot.

A. Membuat spoiler dengan isi teks

Klik Show Untuk Membuka Spoiler

Berikut kode spoiler di atas:

<div style="margin-bottom: 2px;">Klik Show Untuk Membuka Spoiler
<div style="margin-top: 5px; text-align: center;"><input value="Show" style="margin-top: 5px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"> </div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">Memasang spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks </div></div></div>

Keterangan;

Klik show untuk membuka bla bla bla bisa sobat ganti termasuk Show
Sedangkan kode berwarna biru adalah isi dari spoiler dengan teks.

B. Memasang spoiler dengan isi image atau gambar

Spoiler :

Kode spoiler untuk isi gambar di atas;

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">
<img src="http://i1286.photobucket.com/albums/a610/Dede_Alfatih/30c57dab-1818-45ca-a4c9-cc37b4a965c0_zps9adf795b.jpg" border="0" alt="Post spoiler">
</div>
</div>
</div>

Perhatikan cara memasang kode url gambar dengan teks warna biru. Ganti
http://i1286.photobucket.com/albums/a610/Dede_Alfatih/30c57dab-1818-45ca-a4c9-cc37b4a965c0_zps9adf795b.jpg dengan alamat gambar sobat sendiri yang sudah dihost misalnya milik saya ini di google code.

Bagaimana cara memasangnya di posting blog? Saat menulis artikel masuk ke menu HTML bukan compose (lihat kiri atas) kemudian masukkan kode-kode diatas.

Nah bagaimana Sobat blogger. Ternyata cukup mudah bukan membuat spoiler di postingan blog. Silakan dicoba.