Kode-kode dasar HTML

Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.Bagi anda yang belum begitu mengerti HTML,bisa baca disini

Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,meskipun sekarang sudah banyak pembuatan halamanHTML dengan software instant seperti Dreamweaver dll.

---

Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:

Belajar

---

Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :

Belajar

---

Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :

Belajar

---

Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :

Belajar

---

Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :

Belajar

---

Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :

Belajar

---

Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :

<b><i><u>Belajar</u></i></b> hasilnya seperti :

Belajar

---

Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :

Belajar

---

Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span>hasilnya seperti :

Namanya juga hidden..ya..ga keliatan..

---

Membuat Huruf Besar semua (uppercase) gunakan kode :

<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :

BELAJAR

---

Membuat Huruf Small caps gunakan kode:

<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:

Belajar

---

Membuat Huruf Subscribe / kecil di bawah gunakan kode:

<p>4₂</p>hasilnya seperti ini:

4₂

---

Membuat Huruf Superscribe / pangkat gunakan kode:

<p>4²</p> hasilnya seperti ini:

4²

---

Membuat Huruf bergaris atas gunakan kode:

<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:

Belajar mengganti huruf

---

Membuat Huruf bergaris tengah gunakan kode:

<strike>Belajar</strike> hasilnya seperti ini:

Belajar

---

Menentukan jenis huruf gunakan kode:

<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:

Belajar

---

Menentukan ukuran huruf gunakan kode:

<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:

Belajar

---

Menentukan warna huruf gunakan kode:

<p style="color: green; >Belajar</p> hasilnya seperti ini:

Belajar

---

Membuat bullet dot bolong gunakan kode:

<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

• DOT 1


• DOT 2


• DOT 3

---

Membuat bullet dot kotak gunakan kode:

<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Membuat bullet dot bulat gunakan kode:

<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Mengatur posisi bullet gunakan kode:

<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>

---

Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:

<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>

hasilnya seperti ini:

Belajar

---

Membuat tabel border solid gunakan kode:

<table border="1" width="200">
<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>

hasilnya seperti :

Text

---

Membuat tabel border dot gunakan kode:

<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

---

Membuat tabel border dashed gunakan kode:

<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

---

Membuat tabel border groove gunakan kode:

<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

---

Membuat tabel border Ridge gunakan kode:

<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

---

Membuat tabel border Insert gunakan kode:

<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

---

Membuat tabel border Outset gunakan kode:

<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

---

Membuat Tabel Biasa gunakan kode :

<table border="1"width="200"><td>Text</td></table>

hasilnya seperti:

Text

---

Membuat Tabel berwarna gunakan kode :

<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :

Text

Text

---

Membuat Tabel berwarna tak berbingkai gunakan kode :

<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:

Text

Text

---

Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.

Selengkapnya ...

Menghilangkan Sebagian fitur Komentar

Ada cara sederhana yang belum semua orang tahu termasuk saya kemarin,bagaimana,agar salah satu posting,atau sebagian posting,tanpa ada keterangan komentar,sedangkan yang lain masih utuh.

Saya pernah,mengalami,saat aku mau bikin halaman profil tapi koq ada tulisan "komentar (0)" di bawahnya.
Khan ga seru ya?Gmn ya?aku nyoba ngilangin komentar pada edit posting,eh! Koq komentarnya ilang semua!?

Nah!ada solusinya nich,gmn kita bisa menentukan posting mana yang akan kita kasih tulisankomentar sama box komentarnya,dan yang mana posting yang pingin kita kosongin tulisan sekaligus komentarnya.
Coba dech ikutin langkah berikut :

Klik tulisan Pilihan Posting/Opsi Entri di sudut kiri bawah kotak posting,setelah itu tampil radio button 2 pilihan :

Ijinkan dan Jangan ijinkan.

Anda hanyalah memberi tanda pada radio button di samping tulisan tersebut, jika anda memilihijinkan,maka kotak komentar nantinya akan muncul dan pembaca postingan tersebut tentu saja bisa memberi komentar.

Nah jika anda tidak menginginkan kotak komentar muncul, maka anda tinggal memilih opsiJangan diijinkan.

Untuk mengembalikan ke keadaan seperti semula,mulailah dengan langkah yang sama,seperti di atas hanya nantinya akan keluar 3 radio button,tentunya ada 3 pilihan :

Ijinkan,
Jangan ijinkan, tayangkan yang telah ada dan
Jangan ijinkan, sembunyikan yang telah ada.

Tergantung sesuai keinginan anda.

Semoga bermanfaat ya..

Selengkapnya ...

Cara Menampilkan Status Twitter di Blog

Bagaimana Menempatkan Widget Twitter di Blogger?

Bismillah,menampilkan status twitter di blog,bagi kalian yang berminat menampilkannya baik untuk keperluan bisnis online maupun hanya sekedar 'narsis',bisa ikuti langkahnya sebagai berikut:

Pertama,sobat kunjungi https://twitter.com/about/resources/widgets,lihat gambar:

Selanjutnya,klik My Website,lihat gambar:



Selanjutnya sobat klik Profil Widget,nanti akan keluar jendela seperti berikut,dan isilah form dengan nama username dari username twitter yang akan ditampilkan statusnya,misal akun twitter saya sendiri alhaquarius.



Nah,untuk mengatur warna background,jenis text dan warna link dari widget twitter ini,sobat klik tab Appearance,lihat gambar:



Setelah itu sobat klik tombol Finish & Grab Code,lihat gambar:



Dan kini sobat sudah mendapat kode script html yang nantinya kita akan pasang di blog :D,lihat gambar:

Bagaimana Menempatkan Kode Script Twitter Widget di Blog?

Pergi ke Dashboard > Tata Letak > Add New Gadget / Tambah Widget > HTML/Javascript

Setelah itu letakkan kode yang berhasil sobat copy tadi pada widget HTML/Javascript tersebut,dan simpan.

Selengkapnya ...

Cara Pasang File Mp3 di Blog secara Otomatis (Auto Play)

Di blogku Alhaquarius memang gak pake ginian, tapi barangkali ada yang mau coba silahkan, untuk mempercantik blog kamu.

Pertama sobat siapkan dulu file mp3 yang akan diletakkan di blog agar nantinya setiap pengunjung membuka halaman blog sobat bisa langsung dengerin dan ga pake tekan tombol Play.
Letakkan file di folder mana saja (bisa di My Document or yang laen)di kompi kamu,misal nama filenya 'lagu cinta.mp3'

Selanjutnya,sobat kunjungi situs www.toofiles.com dan lakukan Register seperti gambar di bawah ini:

Setelah itu ikuti instruktur aja sob,lihat gambar ya:





Selanjutnya kunjungi email sobat dan lakukan aktivasi disana,lihat gambar ni:





Nah,nanti sobat akan dibawa ke halaman situs www.toofiles.com lagi untuk login ulang disana,setelah sobat berhasil masuk (Log In) sobat klik aja tab 'Home' dan sobat pilih Audio,lihat gambar:





Setelah itu akan tampil halaman seperti dibawah ini sob,cari file yang sudah sobat siapkan tadi lalu klik 'Upload',lihat gambar:





Selanjutnya,setelah proses upload selesai klik aja gan link untuk menampilkan kode html-nya,setelah itu copy kode tersebut,lihat gambar:





Selanjutnya letakkan kode tersebut di halaman widget sobat,caranya pergilah ke Dashboard lalu pilih Tata Letak selanjutnya klik tulisan 'Add a Gadget' [1] lalu pilih Html/Javascript [2],lihat gambar:



1.




2.


Lalu letakkan kode yang berhasil sobat copy,lalu paste ke gadget tersebut,Simpan dan Selesai :D 

Selengkapnya ...

Membuat Judul Blog Berjalan

Bagi blogger pemula, mempercantik blog dengan berbagai aksesori agar blog tampak lebih menarik merupakan pekerjaan yang menyenangkan. Terkait dengan pernak pernik blog, kali ini saya akan posting trik sederhana membuat judul blog berjalan/bergerak, sehingga blog tampak lebih hidup.

Berikut langkah-langkahnya;

1. Masuklah ke blogger dengan ID Anda tentunya sampai ke Dasbor
2. Klik tab Rancangan
3. Kemudian klik html
4. Beri tanda centang pada kotak kecil Expant Template Widget
5. Selanjutnya cari sampai ketemu kode berikut

<title><data:blog.pageTitle/></title>

Setelah ketemu, hapus dan ganti kode script tersebut dengan kode di bawah ini

<script language='JavaScript'>var txt="<data:blog.pageTitle/>";

var kecepatan=300;var segarkan=null;function bergerak() { document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

segarkan=setTimeout("bergerak()",kecepatan);}bergerak();

</script>

Keterangan : ganti angka yang berwarna biru (300) sesuai dengan Kecepatan bergeraknya judul, yang Anda inginkan, jadi bisa diganti dengan angka 100, 200, atau 400. Semakin kecil angkanya maka semakin cepat judul blog bergerak, sebaliknya makin besar angkanya maka judul blog bergerak makin lambat, suka-suka Anda!
Setelah semuanya dikerjakan, jangan lupa Simpan.

Alhamdulillah, selesai dan lihat hasilnya.

Selengkapnya ...

Cara Menghilangkan Navbar Blogspot

Ingin menghapus Navbar punya blogger? ikuti Caranya dibawah ini :

Letakkan kode di bawah ini di atas kode ]]></b:skin> pada halaman html anda.

---

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

---

Atau bisa dengan cara lain dengan meletakkan kode di bawah ini tepat di bawah kode <body> :

---

<style type='text/css'>
#navbar-iframe {display:none;}
</style>

---

Lalu Simpan Template.

Selesai !

Selamat Mencba ! ^_^

Selengkapnya ...

Meletakkan Video Dalam Blog

Meskipun blogger sudah menyediakan upload untuk video,ga ada salahnya ya kita mencoba ngulik kode buat menempatkan sebuah video.
Hasilnya kurang lebih seperti di bawah ini,klik untuk memutar Video :

Jika anda ingin meletakkan video dari Youtube,anda hanya mengisi alamat/URL videotersebut,pada kode.
Untuk kode,copy di bawah ini:

---

<object width="425" height="344"><embed src="http://www.youtube.com/v/sLLCAmr8vjs" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

---

Nah! Tulisan yang berwarna Hijau,gantilah dengan URL alamat video yang ingin anda tampilkan.
misal alamat pada browser video tersebut adalah:

---

http://www.youtube.com/watch?v=sLLCAmr8vjs

---

maka alamat URL dalam kode ganti menjadi:

---

http://www.youtube.com/v/sLLCAmr8vjs

---

Apabila anda malah pusing alias bingung,tinggal buka halaman Youtube,dan copy embed kode di sebelah kanan atas,dan paste kode tersebut kedalam halaman HTML anda. :D

Untuk ukuran,anda tentukan sendiri dengan mengatur width="246" height="171".

Jika ingin memasang video pribadi,tinggal membuat Account di Youtube dan Upload Videoanda disana.

Tidak susah khan?

**Cara ini bekerja baik jika komputer anda sudah mensupport Flash Player

Selengkapnya ...

Membuat Menu Dropdown

Untuk membuat menu dropdown

Untuk kodenya copy paste kode di bawah ini :

---

<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu><option value=0 selected>KATA YANG PERTAMA MUNCUL</option>
<option value="ISI ALAMAT YANG DI TUJU">ISI TEXT YANG INGIN DI TAMPILKAN</option>
</select></form>

---

Contoh penggunaan kode :

---

<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu>
<option>Link</option>
<option value="http://www.youtube.com">Youtube</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.google.com">Google</option>
</select></form>


---

Yang hasilnya nanti akan seperti di bawah ini :

LinkYoutubeYahooGoogle

Sangat Mudah khan?
Selamat mencoba ya..!!

Selengkapnya ...

Meletakkan Gambar Pada Blog

Dalam pelajaran kali ini,kita membahas bagaimana meletakkan objek gambar ke dalam sebuah Blog.
Ada banyak cara sebenarnya,kali ini kita memakai cara pertama dulu.

# Untuk cara pertama :

Siapkan alamat URL gambar yang ingin anda masukkan,misal :
saya mempunyai alamat URL gambar seperti ini :

http://3.bp.blogspot.com/_n7xseT2-HDU/TTBcbYwrtDI/AAAAAAAAAq4/3i404_6ic-o/s1600/matahari%2Bdi%2Bpelajaran%2Bblog.jpeg

Maka untuk menampilkan di halaman blog anda,anda bisa menuliskan kode di bawah ini di halaman HTML anda tentunya :

---

<img src="Halaman URL anda">

---

Contoh pemakaian kode :

---

<img src="http://3.bp.blogspot.com/_n7xseT2-HDU/TTBcbYwrtDI/AAAAAAAAAq4/3i404_6ic-o/s1600/matahari%2Bdi%2Bpelajaran%2Bblog.jpeg">

---

Yang hasil kode diatas akan menghasilkan gambar seperti di bawah ini :

---

# Untuk Cara Kedua :

• Pergi ke Dashboard,buat artikel / posting baru di Blog anda dengan cara Buat Posting Baru
• Pilih Toolbar / Icon yang berbentuk Pemandangan seperti ini :

 

• Selanjutnya akan muncul jendela pilihan Browse File,yang akan menanyakan anda file mana yang ingin anda masukkan.Dalam pelajaran ini,anda bisa upload / meletakkan gambar baik dari komputer anda maupun alamat URL yang ingin anda kehendaki.
• Selanjutnya tunggu proses,dan setelah proses selesai,klik tombol Selesai,dan anda bisa melihat hasilnya.

Selengkapnya ...