Cara Membuat Teks Area

Posting kali ini adalah cara membuat teks area, Apa itu teks area? 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 lebih memahamkan lagi lihat contohnya dibawah ini:

Silahkan kalian letakkan code HTML atau text yang anda inginkan berada dalam kotak areanya disini

Nah Sudah lihatkan! sekarang untuk membuat teks area silahkan Copy kode script dibawah ini :

<p align="center"><textarea name="code" rows="6" cols="20"> Letakkan code HTML atau text yang anda inginkan berada dalam kotak areanya disini

Keterangan :
 rows= menunjukkan tinggi text area, cols menunjukkan lebar dari text area. Silahkan sesuaikan sendiri dengan keinginan anda!

Selain cara diatas ada cara lain lagi untuk membuat text area, yaitu text area dengan memakai hightlight Maksudnya text area yang kita buat dilengkapi tombol highlight, yang sekali klik semua text area terblok jadi memudahkan pengunjung untuk mengcopynya. Cara membuat text area dengan hightlight? copy kode teks dibawah ini :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Hightlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Letakkan code HTML atau text yang anda inginkan berada dalam kotak areanya disin

Keterangan:

<div align="center"> : kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika kalian 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.

<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 kalian jangan merubah tulisan ini.

Value="Highlight All" : kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika kalian ingin merubah tulisan ini silahkan ganti dengan kata yang kalian inginkan.

<p align="center"> : ini menunjukan bahwa text area akan berada di tengah, nah jika kalian ingin text area kalian berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.

<text style="WIDTH: 300px">: kata "WIDTH:300px" menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika kalian ingin memperpendek atau memperpanjang lebar text area, kalian tinggal menggantinya dengan angka yang kalian inginkan. misal: "WIDTH:500px;"

HEIGHT: 144px : angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika kalian ingin merubahnya tinggal ganti angka tersebut dengan angka yang kalian inginkan. Misal : HEIGHT:160px.

Selesai, Selamatv mencoba semoga bermanfaat!

Cara Memasang Widget Tanggal Hijriah Di Blog

Hy sobat kali ini saya akan berbagi cara tentanng bagaimana Cara Memasang Widget Tanggal Hijriah Di Blog. Salah satu contoh seperti di blog saya ini yang saya tempatkan di pojok kanan bawah, bagaimana apakah kalian tertarik atau tidak, jika tidak juga tidak apa-apa karna saya hanya ingin berbagi ilmu, jika kalian tertarik mari ikuti tutorial ini sampai selesai,

langsung saja gini nih caranya :

1. kunjungi web ini http://www.al-habib.info/ atau bisa Klik Disini
2. Kalo sudah klik tulisan Islamic Calendar seperti gambar di bawah ini 

 . 

3. Jika sudah pilihlah jam yang kalian sukai di bawah tulisan Flash Calendar Gallery 
4. Jika sudah sesuai klik Get this Widget

5. Kalo sudah kalian pikih saja watna yang kalian inginkan & rubah Width: dan Height: sesuai yang kalian butuhkan jika sudah klik Get the embed code for your blog/web site.

6. Lalu klik code for other websites
7. Kemudian copy kode yang muncul
8. Setelah itu LOGIN ke blog anda>>>klik dasbor>>>Rancangan>>>Klik Elemen Halaman
9. Tambah badget>>>klik HTML/Javascript dan paste pada konten yang tersedia
10. Simpan dan liat hasilny

Selesai Mudah Bukan?

Mudah - mudahan bermanfaat

Selamat mencoba, semoga berhasil

Cara memasang flash ke blog

Sobat blogger kali ini saya akan memposting bagamana cara memasang flash pada blog. Yaitu file yg ber extensi .swf kemudian upload file tempat hosting, misalnya shareswf.com dan tempat hosting lainnya. Kemudian registrasi ( free) dan upload flash yg di inginkan lalu copy easy link dan paste ke html. Flash tersebut dapat menjadi hiasan untuk blog kalin atau bisa sebagai banner. OK langsung saja sobat bloger kita ke TKP hehe... :
Login blogger kemudian masuk ke tata letak / Layout Lalu tambag gadget pilh HTML/java script Kemudian paste kode dibawah ini :

<embed src="http://www.123-banner.com/bannertmp/123-banner_com_1952843.swf" quality="high" bgcolor="white" width="500" height="100" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>

Atau  

<embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="flashplayer" src="http://www.shareswf.com/media/games/swf/23973.swf" quality="high" width="430" height="380" swliveconnect="true" wmode="transparent" allowscriptaccess="samedomain" /></embed><div style="font:normal 11px", face="Verdana, Arial, Helvetica, sans-serif">Uploaded on <a href="http://www.shareswf.com/game/23973/" target="_blank">ShareSWF.com</a> by <a href="http://www.shareswf.com/user/amir9/games/public" target="_blank">amirhidayat</a> | <a href="http://www.shareswf.com/upload/" target="_blank">Upload your own Flash Animation</a>   

CONTOH :



 

Uploaded on ShareSWF.com by amirhidayat | Upload your own Flash Animation

Ganti tulisan http://www.123-banner.com/bannertmp/123-banner_com_1952843.swf atau http://www.shareswf.com/media/games/swf/23973.swf  dengan file flash kalian yang sudah di upload di hosting
Ganti white" width="500" height="100" atau width="430" height="380 dengan ukuran flash kalian

Semoga Bermanfaat!

Cara Membuat Menu Tab Navigator Horizontal

Nah sobat blogger kali ini judul posting saya adalah Cara Membuat Menu Tab Navigator Horizontal. Mungkin kalian bertanya - tanya apa itu Menu Tab Navigator Horizontal. Menu Tab Navigator Horizontal itu seperti gambar di bawah ini :

 

Nah sudah taukan sobat blogger, ok langsung saja :
1. Langkah pertama :

• Login Blogger
• Masuk ke Template >> Edit Html 
• Kemudian cari kode ]]></b:skin> 
• Lalu  letakan kode di bawah ini di atas kode  ]]></b:skin>  

Kode script

menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #DF0101;} .menuhorisontal ul{margin:1; padding:0; padding-left:0px; font:20px Arial; list-style-type:none} .menuhorisontal li{display:inline; margin:0} .menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:9px; padding:4px 4px 4px 4px; color:#DF0101; background:#F8E0EC;} .menuhorisontal li a:hover{color:#8A0808; background:#FBEFF5}

Jika sudah nanti hasilnya akan seperti gambar diatas.

keterangan untuk angka margin, padding, font dan huruf bisa anda sesuaikan selera begitu pula dengan warna huruf dan backgroundnya. Untuk kode warna bisa lihat disini

• Simpan template 

2. Langkah Kedua

• Klik tata letak tambah gadget >> pilih HTML/javascript dan masukan kode di bawah ini diatas header atau di bawahnya.
• kode script :

 <div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">

<div class="menuhorisontal">

<li>

<a href="http://amirhidayat93.blogspot.com">HOME</a>

<a href="http://amirhidayat93.blogspot.com" target="_blank">Folder</a>

<a href="http://amirhidayat93.blogspot.com" target="_blank">item 1</a>

<a href="http://amirhidayat93.blogspot.com" target="_blank">Item 2</a>

<a href="http://amirhidayat93.blogspot.com" target="_blank">Item 3</a>

<a href="http://amirhidayat93.blogspot.com" target="_blank">Item 4</a>

<a href="http://amirhidayat93.blogspot.com" target="_blank">Sumber</a>

</li></div></div>

Keterangan :Untuk URL silahkan sobat ganti, begitu juga dangan background  kode warna bisa lihat disini

Semoga bermanfaat!

Daftar Kode Warna

Silahkan kalian klik warna yang kalian inginkan, nanti akan muncul kode warnanya dibawahnya

Kode warna yang terpilih :

SEMOGA BERMANFAAT!

Cara Membuat Link Berwarna Pelangi

Ingin membuat link pada blog anda berkedip dan berwarna pelangi ketika tersentuh pointer? Caranya sangat mudah

Dalam keadaan loggin,
Masuk pada menu template,
Klik Edit HTML,
Cari kode <head>,
Kemudian copy code berikut dan paste tepat dibawah code tadi

Kode Script

<script language='javascript' src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/LinkPelangi.js'/>.

Terakhir simpan template.
Selamat mencoba!

Cara membuat spoiler

Posting saya kali ini adalah...Cara membuat spoiler. Apa kalian tau sobat blogger apa itu spoiler. Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler. Dibawah ini adalah kode dan contoh spoiler :


kode spoiler:

<div><div style="margin: 5px;">

<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tentang bla..bla.bla.. </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">

<div style="display: none;">

isi spoiler...

</div></div></div></div>

kode di atas akan menjadi seperti ini :

Contoh Spoiler

iSI Spoiler.....bla...bla...bla....

Langkah selanjutnya COPY kode diatas buat entri baru masukan html.


SEMOGA BERMANFAAT