CARA MEMBUAT KODE HTML DI DALAM TEXT AREA

Posted by Sonin Sabtu, 29 Desember 2012 9 komentar
Cara Memasukkan Kode Html ke dalam Text Area (bentuk kotak) Dalam memasukkan kode html pada text area, barangkali anda pernah mengalami, atau selalu mengalami kegagalan karena kode atau teks yang dimasukkan tidak bisa tampak alias kosong. Karena itu pada postingan kali ini saya akan sedikit berbisik kepada anda agar anda bisa menampilkan kode html atau teks pada test area yang anda buat. Pertama, Kode HTML yang ingin di masukkan kedalam Text Area syaratnya ubah dulu menjadi HTML Encode. Untuk merubahnya langkah-langkahnya sebagai berrikut: 1. Copy code HTML kemudian masukkan ke HTML Encode 2. Pastekan atau tempelkan code HTML yang sudah di copy ke dalam kotak Encode input text 3. Klik tombol Encode tunggu sejenak sampai proses loading selesai 4. Berikutnya copy kode yang terrdapat pada kotak Encoded Output dan pastekan kepostingan sobat menggunakan Text Area. Kedua, Untuk kode Text Area anda bisa menggunakan berbagai bentuk kode text area dibawah ini.



Kode Text Area Biasa

<textarea rows="30" cols="6">
 Letakkan kode atau tulisan Anda disini Coy
 </textarea>

Hasilnya;

 

Kode Text Area Plus Tombol All Copy

<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">
 <textarea cols="15" name="txt" rows="50" style="height: 100px; width: 350px;" wrap="VIRTUAL">
Letakkan kode atau tulisan Anda disini Coy
 </textarea>
 </div>
 </form>
 </div>

Hasilnya seperti dibawah ini 

Untuk memperindah text area anda, maka saudara bias menambahkan kode seperti dibawah ini, biar lebih kreen asal jangan kerempeng, heehee,

Contoh I


<textarea cols="30" name="code" rows="6" 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;"> Letakkan kode atau tulisan Anda disini Coy </textarea>

Hasilnya akan jadi seperti ini


 Contoh 2

<textarea cols="30" name="code" rows="6" 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;"> Letakkan kode atau tulisan Anda disini Coy </textarea>

Hasilnya;
 

Contoh 3


<textarea name="code" rows="3" cols="20" style="background:#BFFAFF; color:#FF0000; border-bottom: 4px solid #40FF1F; border-right: 4px solid #40FF1F; border-top: 4px solid #FFE900; border-left: 4px solid #FFE900; line-height:1.5em; padding:5px; -moz-border-radius:10px;"> Letakkan kode atau tulisan Anda disini Coy </textarea>

Hasilnya;

 

Contoh 4

<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;">ISI Letakkan kode atau tulisan Anda disini Coy </textarea>

Hasilnya;



Demikianlah cara membuat kode text area dan contoh-contoh bentuk text area.
Catatan untuk merubah dan ukuran dan warna bisa anda modifikasi dengan cara mengedit kode-kode di atas,, sebab kkode di atas cuma sebatas contoh yang insyaAllah bermanfaat bagi para pengunjung blog ini, terutama yang belum tau dan atau bagi pengunjunng yang sudah lupa.


Baca Selengkapnya ....

CARA MEMASANG KODE HTML WARNA PADA BLOG

Posted by Sonin Jumat, 28 Desember 2012 1 komentar
Cara memasang widget kode html warna adalah melalui langkah-langkah berikut: 1. Pertama terlebih dahulu Login ke akun Blogger Anda. 2. Pada halaman Dasbor, silakan pilih blog Anda. 3. selanjutnya pada halaman overview blog Anda, silakan pilih templates. 4. dan Pilih edit HTML dan pilih Proceed dan jangan lupa centang Expands Widget template, agar jika terjadi kesalahan anda bisa kembali pada template sebelumnya 5. Copy Script di bawah ini dan paste di atas kode </head>
 

6. Kemudian setelah di Paste jangan lupa simpan template anda 
7. berikutnya silahkan paste kode dibawah ini, pada postingan baru anda lalu paste pada areal Edit HTML.

Maka Akan muncul Tampilannya sebagai berikut:
Kode warna yang terpilih :
ATAU COPY KODE DI BAWAH INI


MAKA KODE DI ATAS YANG ANDA PASTE AKAN BERBENTUK SEBAGAI BERIKUT;
Indah Bukan, jika indah dan bermanfaat bagi anda silahkan praktekkan,,,

Baca Selengkapnya ....

CARA MENAMPILKAN PHOTO DI PENCARIAN GOOGLE

Posted by Sonin Jumat, 30 November 2012 0 komentar
CARA MENAMPILKAN PHOTO DI PENCARIAN GOOGLE

Menampilkan Photo di pencarian Google, merupakan salah satu daya tarik bagi para Netter untuk mengklik postingan kita, kenapa bergitu?. Jawabannya tentu karena dengan tampilnya photo ketika di lihat para netter ketika melakkan research pada google, maka netter bisa penasaran, barangkali karena terlihat ada penampakan he,hee,hee,,, atau bisa juga karena dia melihat photo yang tampil itu semakin memperkuat keyakinan dirinya pada konten yang kita posting.

Baiklah langsung saja, akan saya beritahukan cara-caranya walaupun sebelumnya saya juga sama seperti anda, karena sifat keingintahuan dan penasaaran maka mencari langkah-langkah untuk menampilkan foto pada google risearch  Adapun caranya adalah sebagai berikut:

A.    Sebelumnya Hubungkan dulu Profil Google Plus anda dengan blog anda.

Bagaimana cara menghubungkannya?

·         Ganti profil blog dengan profil google plus anda. kalau belum punya google plus silahkan buat dulu di sini Google Plus

Cara mengganti Profil blog dengan profil google plus

1)      Masuk ke dasbor blog anda

2)      klik gambar seperti roda Delman di pojok kanan atas

3)      Lalu pilih Terhubung ke Google+

4)      Centang kotak kecil di bawah lalu Klik "BERALIH SEKARANG JUGA"

5)      Bila diminta sign in/masuk silakan anda masuk dengan email dan pasword anda.

6)      Lalu muncul halaman "Tambahkan blog ke profil anda" centang kotak kecil di samping nama-nama blog anda untuk memilih blog mana sajakah yang ditampilkan di profil google+ kemudian klik Tambahkan Blog.

7)      Maka jika caranya benar dan tidak ada permasalahan pada google plus anda mana sekarang blog anda sudah terhubung dengan Google Plus

·         Setelah langkah-langkah di atas sudah selesai selanjutnya anda tinggal menunggu google mengindeks halaman-halaman blog anda. Untuk pengindekan biasanya membutuhkan waktu yang lama untuk menampilkan foto pada suatu artikel yang sudah di Publikasikan. Akan tetapi bila anda langsung posting artikel baru maka foto andalan anda akan turut terpampang di pencarian google

B.     Kemudian yang tidak kalah pentingan dalam melakukan penampakan pada pencarian google supaya photo anda selalu tampil di search engine bersamaan postingan anda, maka dianjurkan untuk pasang juga profil kamu di blog, adapun caranya sebagai adalah:

1)      Masuk ke Tata Letak

2)      Pilih Tambah Gadget

3)      Pilih Profil  blog anda

C.    Atau Cara Lain

Langkah-langkahnya sebagai berikut:

Langkah Pertama, Anda ke halaman profile Google Plus (+), setelah itu edit profil, upload foto yang mau anda tampilkan (ingat harus foto) karena Google bisa mendeteksinya, selain foto tidak akan tampil.

Langkah Kedua, Masukkan alamat blog Blogspot kamu di bagian Contributor To di profil google plus anda lalu klik bagian itu.

Lankah Ketiga, Klik tulisan di sebelah Contributor To, lalu masukan nama dan alamat blog blogspot anda. Kemudian simpan. Lalu done editing.

Langkah Keempat, Masuk ke  profil blogger anda (login ke blogger.com lalu edit profil). Saat didalam blogger kamu lihat pojok kanan atas ada nama kamu, sebelahnya ada tanda panah kebawah lalu d klik, kemudian klik Blogger Profile.

Langkah Kelima, Lalu dibagian General, anda masukkan Link Url Google di bagian HomePage URL. Lalu simpan profil (save profile).

Langkah Ketujuh, Pada langkah ini anda diperkenankan untuk melakukan tes, apakah berhasil atau tidak. Caranya kamu menuju halaman Google Rich Snippet test, dan masukan alamat Blogspot kamu lalu klik Preview. Jika hasilnya sudah menunjukkan ada gambar artinya usaha anda sudah berhasil. Tinggal tunggu beberapa waktu (seminggu, dua minggu atau lebih).

Akan tetapi jika anda ingin mempercepat agar tampilan gambar lebih cepat muncul di pencarian google. Maka silahkan masukan kode html Google plus di bawah ini sebelum kode penutup ini: </head>

<link rel="author" href="https://plus.google.com/116454191360608679396/posts"/>

Silahkan anda paste kode html di atas, selanjutnya jangan lupa ganti angka yang tebal di atas ganti dengan nomor URL google plus anda. dan jangan lupa simpan.

Selamat Mencoba

Baca Selengkapnya ....

Cara membuat Translate (terjemahan) pada blog

Posted by Sonin Kamis, 22 November 2012 2 komentar

CARA MEMBUAT  TRANSLATE DENGAN IKON BENDERA

Terjemahan untuk blog atau website sangatlah dibutuhkan, sebab translate/terjemahan adalah merupakan salah satu alat komunikasi dalam menjelajahi Dunia Lunamaya, eh maaf dunia maya maksudnya. Kenapa demikian??? Ingat bahwa yang menggunakan internet tidak cuma satu orang, satu keluarga dan satu Negara saja melainkan dari berbagai penjuru dunia. Mengingat bukan dari satu suku, bangsa saja maka dibutuhkan terjemahannya. Kemudian harus kita sadari bahwa tidak semua orang menguasai lebih satu bahasa selain bahasa tanah airnya, walaupun sudah ada bahasa yang dijadikan bahasa pemersatu yaitu bahasa inggris, tapi ingat walaupun merasa sudah mahir berbahasa inggris tapi dalam memahami teks biasanya masih mengalami kelemahan-kelemahan dalam pada kata-kata tertentu, dan ketika mengalami kelemahan tersebut tentunya membutuhkan suatu kamus.
Kamus memang salah satu alat bantu untuk menerjemahkan suatu bahasa tapi ingat hal ini sangat banyak sekali kelemahaannya dan memboroskan waktu untuk menerjemahkan teks atau artikel yang ada pada postingan blog. Karena kedua pokok inilah penulis tertarik untuk memberikan langkah-langkah mentraslate blog atau website.
Adapun langkah-langkah membuat translate pada blogspot dan website adalah sebagai berikut:
1.      Masuk ke akun blogger anda setelah loading internet selesai
2.      Arahkan kursor moese anda pada tata letak
3.      tambah gadget atau add gadget
4.      pilih HTML/javascript
5.      Copy dan masukan script dibawah ini ke HTML anda

<style> .translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; padding-left:0px; } .translate:hover img { filter:alpha(opacity=50); -moz-opacity: 0.50; opacity: 0.50; border:0; } </style> <div style="text-align:center"> <a class="translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeCuydreKEQuc8_H1buBcNQfUEcnl7_KS_CDxoC0kS0Z2EheaSntUVeHinoNaSVvJnF2eLAvqJhO1qJm0h-VYwO4zrbVvh3Cf1-_Gfigu81FZwD_Rdd2ZGN_9-GPb2G43mW-hYnJecbu2l/s144/uk-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHvxGzka8Dt8lcjDot6h_A8-vL9vaKXUWltrae5QVCAUsaprcBl_IkzL2hE1t909wfPFvzNJo-VRtzANpz0xJVgOORHtjnIzkq2ZtQ5alvWZjbztwO7FkIceoioAcOP5IyKsxu6vk8XTkY/s144/france-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigbLyBLK1NuGxDwS_ozsjEGPk3aD8RovNUm75ZYmkvBjB09wzdZw3X9x6S7GRylWeoQ2Gs97D-QpC3Jx0jHyO5f1JCPyOrNGAasmJGKgwxwYVSXGUjbQxMjdtFYVG6WAOCWEDwekIxqdVq/s144/german-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_IOXZxWMGTpg9AkRYY9WRtcRArk4A1G0kRjwRBEaJKsaLHSEQ2qFDyOv4cIRcuuRD9ZC9Y6MOnSI8x_nAouqaoacJB7XSg4sZB2tPKucxSQLBCOUMImSydx8otdN8Ct8XvaqqGP1IzEO4/s144/spain-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdZPSjHY0oOqKjTnpBm9zGbAa0nkXdzpk8C6I4B7JpyJ-ISDJOhmA4foYuy8CQmQ6rwBbUQO6raz_jexUJI2CW6onPNDhdZVkhNsgNv3B2BcX14NGHt3MD6h6bOj069lHexzkdnw_WpcBx/s144/italy-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTPMOD1h2LDV0bA8wnqfaPYeBQCLRp-1iFB51XzfpDBehNvRU-gULulSt575fijuzOhDTExA80So0CjK7ZVSrAf6AD_-w6C2LaVZVQucz3JUULhThzwVGNFatqF5YzkPEXr-zK4wknJUVQ/s144/dutch-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <br/><br/> <a class="translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0szRZIdCiAOu8eSXjVnVUooEh5Ev5qo0A9Nzh37FbPmMWdnjPPfhXryon1Or7fnbqXxzScmKwvNWE8RJkMbzthUDYKDoQ4Rza2P6wSgsYdA4_NQrh2NDcPa416E6yvpL0zryi5QcuugAN/s144/russian-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Brazil" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Brazil" border="0" align="absbottom" title="Brazilian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNH9eiO4WIAr9W5H-ihS8UfPzDziZs9Y6RIdW2kRwYxOxc5pJcROw5kd_zGuL-2lR5kGqqV0_85y2qM7QSgLKK-ZgO37BlbyvpQS7KGHHKUQ6RU7MepHZXp2OMvhVy0QQTQuSW5Nh8A5ny/s144/brazil-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyu7F2OHQLGuTJV47V_TdH7F_YGdJU5J8LL1Hte-1wzSZAwxJBkp8DvFxitFL9Tz-lK2-4c95uqiwZejkimlAe70ZQwANz-CI9q81obFWl5eDwKE8KxCZ_6TJMxX1ZDjgBIAZZ6zt3bjjh/s144/japan-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggi_E_vqc9jvMO2aK4PIGEJgw0SmaUpmgnuLjPfJhM2OvuVA8EBX1fjxn0q8BtiQ-2h_TWCqbX2Gou8K8-2zRJ6LKgkErsEj0rsbZoVVobJfCsOzapkimaCs5Nyq-WKgI2mDjprL3dUS-i/s144/korean-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhix7DWCNu0OiXiqOtb4wz2ITvpuouBvxbrbY4HninlYa_oUbQ3PM2S4TJ8oWHLcCNrajRb64IMDIFk2DsnrGEQauQf5gh_emF94AVdLptA8JLwcAlDbU-Q7_HgkbTMVfdplfGP5dbC0TlM/s144/arab-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Irk1wQb2tRR5E_qw7wHoInpQxUY0O5GUdk17jQXmhjp-2WsoAr5Co7nPb7WRLGNrcfX8IH6hUqfVpzh1ahWplofFqf7ckumELYbp7LuKJPA5FgkQ19Spd34p3AUOuNC6Elfh2UNmNd_5/s144/china-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <div style="font-size:9px; padding:8px 0px 0px 0px"> <a <a href="http://soninkomputer.blogspot.com/2012/11/cara-membuat-translate-terjemahan-pada.html" title="translate widget"/>pasang di blog anda</a>


6.      Setelah kode HTML diatas sudah dimasukkan, maka langkah selanjutnya adalah menyimpan kode html di atas dengan cara klik icon simpan pada gatget

Baca Selengkapnya ....

Popular Posts

Ilmu Blog dan SEO| Desain of DUNIA KOMPUTER.
Estimated worth website
Copyright © 2012 - Dunia Komputer - Desain by Sonin