Perbedaan Margin dan Padding pada HTML

Apa itu Margin?
Margin dalam CSS mengacu pada ruang di sekitar elemen HTML. Properti margin digunakan untuk mengontrol jarak antara elemen tersebut dan elemen di sekitarnya. Dengan kata lain, margin adalah spasi yang ada di sekitar batas luar suatu elemen.

Anda dapat mengatur margin pada elemen HTML menggunakan properti CSS seperti margin-top, margin-right, margin-bottom, dan margin-left. Nilai-nilai untuk properti ini dapat dinyatakan dalam satuan seperti piksel, persen, atau em.

Sebagai contoh, jika Anda ingin menetapkan margin sebesar 10 piksel di semua sisi elemen, Anda dapat menggunakan aturan CSS berikut: margin: 10px;

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Area Berbingkai dan Area Solid

Area Berbingkai

<div style="text-align:none;padding-top:10px;padding-right:5px"> <div style="overflow:auto;padding-top:7px;padding-bottom:7px;padding-left:15px;padding-right:5px;border:1px solid #ff0000">TEKS</div></div>

Contoh

TEKS

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Blog Touchscreen

Sekali-sekali pengin menunjukkan pada murid saya bahwa blog ini bukan blog biasa tapi anti biasa. Salah satunya adalah penerapan teknologi layar sentuh alias touchscreen.

Lihatlah gambar berikut. Coba arahkan mouse padanya, niscaya reaksi yang terjadi pada gambar tersebut akan langsung terasa tanpa harus ngeklick.

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Teks Area

Teks area adalah tempat meletakkan teks atau tulisan untuk tujuan tertentu, misalnya untuk memudahkan menampilkan kode html. Teks area bisa dibuat tersendiri dan bisa juga digabung dengan tombol klick untuk memudahkan menyalin.

<div style="text-align: none; padding-top: 15px; padding-bottom: 0px;"><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="klick" type="button"/> </div><p align="center"><textarea style="width: 500px;" name="txt" rows="2" wrap="VIRTUAL" cols="20">isiankode</textarea></p></form></div>

Hasilnya akan seperti ini...

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Password di Postingan Blogspot

Kita bisa memberi password atau kata kunci di salah satu postingan ataupun halaman yang ada pada Blog. Cara ini dilakukan agar postingan tersebut lebih privasi dan membatasi orang yang bisa mengaksesnya.

Caranya cukup mudah. Buka postingan yang akan diprivat, gunakan mode html. Copy paste kode di bawah ini, letakkan di bagian akhir postingan.

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Perbedaan <div>, <p> dan <span>

Perbedaan utama antara <div>, <span> dan <p> pada HTML terletak pada sifat tampilannya (block atau inline) serta fungsi semantiknya untuk mengelompokkan konten. Secara singkat perbedaannya dapat dijelaskan sbb:

• <div> atau division merupakan elemen block-level generik untuk mengelompokkan bagian besar atau tata letak halaman.
• <p> atau paragraph) merupakan elemen block-level khusus untuk membuat paragraf baru dalam bentuk teks.
• <span> merupakan elemen inline generik untuk menandai atau mengubah bagian kecil dari teks yang ada dalam paragraf tertentu.

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Warna Custom Link

Memberi warna custom pada link

<a href="alamatlink" style="color:#FF0000" target="_blank">tampilanlink</a>

Ganti alamat link dan tampilan link

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Teks Berganti Warna

Latihan hari ini membahas tentang teknik mengatur warna teks mulai dari kondisi awal, kondisi ketika teks tersentuh mouse dan kondisi sesaat setelah mouse meninggalkan teks. Teknik yang digunakan adalah HTML.

Perhatikan teks di bawah ini. Kondisi awal warna teks adalah hitam. Ketika pointer mouse kita dekatkan, maka warna teks akan berubah merah dan ketika mouse kita jauhkan, warna teks berubah menjadi biru.

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Menyematkan Spreadsheet

Kode embed aslinya seperti ini

<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSwIqNRdDIpMznndM5_JaFuTXwioGbBck4O8j0tGsBb983RJtsmbnkFKnY5ANzIm9Am04uKYv_LikOL/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false" width="100%"></iframe>

Tampilannya seperti ini

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Menyembunyikan Sandal Jepit

Pernah kehilangan sandal jepit atau malah tergolong sering banget?. Nah berikut saya punya tips sederhana untuk menyembunyikan sandal jepit kita dari gangguan tangan jahil.

Caranya gampang, yaitu kita sembunyikan dibalik postingan sebagai background. Kita bisa menaruhnya dimana saja, ditengah, dikanan atas, kiri atas, kanan bawah dan kiri bawah.

Untuk menaruhnya sangat mudah dan saya yakin banyak yang sudah bisa. Jika pengin ditaruh ditengah2, kodenya adalah

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

blogspot.com ke blogspot.co.id

Sejak beberapa hari yang lalu blogspot.com terdirect ke blogspot.co.id. Untuk negara Indonesia, blogspot.com memang resmi di-direct ke blogspot.co.id. dan perubahan ini pasti memiliki kekurangan dan kelebihan tersendiri.

Kelebihannya pengunjung jadi tau bahwa sub domain tersebut lokasinya di Indonesia (meskipun sebenarnya masih menggunakan server Google yang di Mountain View). Kekurangannya adalah, ada kemungkinan SERP & backlink jadi hilang, Alexa merosot atau bagi yang pasang Adsense menggunakan account berstatus hosted iklannya tidak tampil.

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Teks Berwarna

Salah satu cara untuk memperindah tampilan sebuah blog adalah dengan memainkan warna teks pada postingan atau bagian lain, mulai dari hal yang paling sederhana sampai pengaturan yang rumit dan bervariasi.

Sebelum dipraktekkan, perlu dikenali kode warna dari beberapa warna dasar misalnya #FF0000 = merah; #0000FF = biru; #000000 = hitam; #FFFFFF = putih atau #00FF00 = hijau

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Mengatur Kemunculan Widget

Widget yang dipasang pada blog bisa diatur kemunculannya. Beberapa pilihan yang bisa diambil misalnya hanya tampil di homepage, tidak tampil di homepage, hanya tampil ketika sebuah postingan dibuka, hanya tampil di halaman statis atau page dll.

Untuk mengatur hal tersebut bisa dilakukan melalui edit template. Berikut cara mengatur dan kode yang dimodifikasi.

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Tabel dengan lebar persentase

<table width="100%" border="0" cellspacing="0"><tbody><tr>
<td width="30%" valign="top"></td>
<td width="50%" valign="top"></td>
<td width="20%" valign="top"></td>
</tr></tbody></table>

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Tabel dengan lebar fix

<table width="500" border="0" cellspacing="0"><tbody><tr>
<td width="150" valign="top"></td>
<td width="150" valign="top"></td>
<td width="200" valign="top"></td>
</tr></tbody></table>

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Efek Stabillo

<span style="background:#FFFF00">teks</span>

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Blogroll Link

<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width:125px;color:#7B7B7B;font-family: arial;line-height: 15px;font-size:12px;background:#ffffff" name="menu" size="1">
<option/>Link Link
<option/>
<option value="url1"/>Judul1
<option value="url2"/>Judul2
<option value="url3"/>Judul3
<option/>
</select></form>

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Countdown

<span style="color: #000000; font-family: verdana;"><p style="text-align: center;line-height: 16px;font-size:12px;"><script language="JavaScript">
TargetDate = "07/17/2013 05:46 PM";
ForeColor = "black";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% hari; %%H%% jam; %%M%% menit dan %%S%% detik <br>menuju waktu Maghrib untuk Semarang";
FinishMessage = "Selamat Menunaikan Ibadah Puasa";
</script><script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script></p></span>

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Random Teks

<script language="JavaScript">
images = new Array();
images[0] = "teks1";
images[1] = "teks2";
images[2] = "teks3";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.

Efek Gambar Berputar

<style type="text/css">
.post img { background:#aaa; border-radius:px; -moz-border-radius:px; -webkit-border-radius:px; -o-transition:all 1.2s ease-out; -moz-transition:all 1.2s ease-out; -webkit-transition:all 1.2s ease-out; } .post img:hover { z-index:99; background:#993300; border-color:#00000; -o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px); -moz-transform:rotate(360deg) scale(2) translate(1px,-3px); -webkit-transform:rotate(30deg) scale(2) translate(10px,-3px); }
</style>

Times New Roman Arial (default) Bookman Old Style Comic Sans Ms Courier Georgia Lucida Handwriting Monotype Corsiva Tahoma Trebuchet Ms Verdana 8 10 12 14 16 18 24

Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih.