Pengertian Padding,Margin dan Border pada CSS
Bagi rekan blogger yang suka otak-atik template blognya (tidak hanya di template blog seeh), pasti sering kali melihat kata-kata dan istilah Padding, Margin Dan Border pada CSS yang digunakan sebagai pengukuran dasar pada CSS.. Nah pada pertemuan ini saya akan memberikan sedikit pengertian dari ketiga Hal tersebut dan juga gunanya..
Padding, Margin dan Border, sebelum saya menerangkan lebih jauh silahkan lihat skema gambar dibawah ini dulu :
Nah dari keterangan diatas kita dapat menyimpulkan seperti dibawah
Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Border : Adalah garis tepi dari komponen
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border
Cara Penulisan
Padding
ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan
padding-left:5px; ini adalah untuk pengaturan padding bagian kiri
padding-right:5px; ini adalah untuk pengaturan padding kanan
padding-top:5px; untuk bagian atas dan
padding-bottom:5px; untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai
Border
Ditulis dengan CSS border:1px dotted #000000; urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan
border-width:1px; ini adalah ketebalan border
border-style:dotted; ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya
border-color:#FFFFFF; ini adalah warna dari border.. kamu bisa menggantin code warnanya (www.colorschemer.com/online)
Margin
Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
keterangan lainya bisa mengikuti keterangan padding diatas
Satuan Dalam CSS
1. Statik
* in -- satuan inchi
* cm -- satuan centimeter
* mm -- satuan milimeter
* pt -- satuan point (1point = 1/72 inchi)
* pc -- satuan pica (1pica = 12 point)
* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)
2. Relatif
* % -- satuan persen
* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)
Padding, Margin dan Border, sebelum saya menerangkan lebih jauh silahkan lihat skema gambar dibawah ini dulu :
Nah dari keterangan diatas kita dapat menyimpulkan seperti dibawah
Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Border : Adalah garis tepi dari komponen
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border
Cara Penulisan
Padding
ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan
padding-left:5px; ini adalah untuk pengaturan padding bagian kiri
padding-right:5px; ini adalah untuk pengaturan padding kanan
padding-top:5px; untuk bagian atas dan
padding-bottom:5px; untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai
Border
Ditulis dengan CSS border:1px dotted #000000; urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan
border-width:1px; ini adalah ketebalan border
border-style:dotted; ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya
border-color:#FFFFFF; ini adalah warna dari border.. kamu bisa menggantin code warnanya (www.colorschemer.com/online)
Margin
Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
keterangan lainya bisa mengikuti keterangan padding diatas
Satuan Dalam CSS
1. Statik
* in -- satuan inchi
* cm -- satuan centimeter
* mm -- satuan milimeter
* pt -- satuan point (1point = 1/72 inchi)
* pc -- satuan pica (1pica = 12 point)
* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)
2. Relatif
* % -- satuan persen
* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)
Tag :
CSS,
Mengenal Dasar-Dasar JavaScript
Sekilas tentang JavaScript
Javascript
adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di
sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi
semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan
untuk memvalidasi masukanmasukan pada formulir sebelum formulir
dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua
bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya
bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh
pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.
Struktur JavaScript
Struktur dari JavaScript adalah sbb :
<SCRIPT LANGUAGE = ”JavaScript”>
<!- -
Penulisan kode javascript
// - - >
</SCRIPT>
Keterangan :
Kode <!- - // - - > umumnya disertakan dengan tujuan agar
sekiranya browser tidak mengenali JavaScript maka browser akan
memperlakukannya sebagai komentar sehingga tidak ditampilkan pada
jendela browser.
Letak JavaScript dalam HTML
Skrip Javascript dalam dokumen HTML dapat diletakkan pada :
- Diletakkan diantara tag <head></head>
- Diletakkan didalam <body></body>
- Eksternal
1. Script diantara tag <head></head>
Script diantara tag <head></head> akan dieksekusi ketika
dipanggil (berbentuk function) atau dipanggil berdasarkan trigger pada
event tertentu. Meletakkan script didalam <head> script otomatis
akan di load terlebih dahulu sebelum digunakan/dipanggil.
Berikut contoh untuk meletakkan Javascript didalam <head> :
Tag ini juga bisa ditulis lebih dari dua kali, contoh;
2. Script didalam <body></body>
Javascript akan dieksekusi saat halaman di load sampai pada bagian
<body>. Saat menuliskan script didalam <body> maka antara
isi halaman dan script javascript dijadikan satu bagian.
3. Eksternal
Fungsi dari cara eksternal adalah jika ingin menjalankan javascript yang
sama dalam beberapa kali pada halaman yang berbeda. Daripada harus
menulis ulang script yang ingin dibuat di setiap halaman.
Menggunakan cara ini berarti script javascript dan html akan terpisah. Langsung saya suka memberi contoh daripada banyak teori.
Script dibawah ini adalah javascript yang akan digunakan.
Menggunakan cara ini berarti script javascript dan html akan terpisah. Langsung saya suka memberi contoh daripada banyak teori.
Script dibawah ini adalah javascript yang akan digunakan.
Simpan script diatas dengan nama contoh.js
Kemudian membuat halaman html seperti dibawah ini.
Simpan script diatas dengan nama index.html, buat satu folder bersama file contoh.js.
Tag :
Javascript,
Struktur Dasar Blogspot
Mengenal Struktur Template Blogspot ini perlu di utamakan, apalagi buat yang baru pertama kali mengenal blogspot. Mudah-mudahan ini dapat membantu anda yang baru belajar mengedit blog.g
dan dapat membantu anda yang baru belajar mengedit blog.
Jika sobat - sobat penasaran silakan lihat gambar di bawah ini sebagai bayangan :
Semua angka yang tertera, dapat anda ubah sesuai kebutuhan, tinggal diuji saja, jika terlalu lebar kurangi dan seterusnya. Istilah header, mainwrapper, sidebarwrapper, body dll, adalah istilah umum, bisa diganti dengan nama berbeda, asalkan struktur selanjutnya juga dengan nama sama. Untuk menguji, login ke dashboard blogger Anda, pilih template, dan edit. Untuk mempercepat, tekan Ctrl+F pada keyboard, dan ketik apa yang dicari.
Ketiga, Java Script. JavaScript adalah bahasa scripting yang paling populer di internet dan bekerja pada banyak browser seperti Internet Explorer, Mozilla, Firefox, Netscape, Opera. JavaScript digunakan pada Web pages untuk meningkatkan design, validate forms, detect browsers, create cookies, GUI dsb.
Banyak sekali fungsi dari java script. Bagi pemula (seperti saya), mengenal lebih jauh java script adalah program lanjutan, kelak jika akan membuat web provesional.
Cttan : Buat yang menggunakan template blogger baru mungkin ada beberapa perbedaan dalan kode namun pada intinya sama saja, jadi silahkan saja sobat sesuaikan saja
Sekian Dulu mudah - mudahan bermanfaaf ....Wasalam
Jika sobat - sobat penasaran silakan lihat gambar di bawah ini sebagai bayangan :
Dan Code - code struktur tadi masing - masing mempunyai kegunaannya tersendiri , coba simak penjelasan di bawah ini :
- BODY : Pada area ini keseluruhan konten atau isi dari blog ditampung, area ini ditandai dengan kode awal dengan tag <body> dan kode akhir tag </body> dimana diantara kode tersebut menyimpan hampir semua kode HTML namun bisa juga untuk menyimpan Javascript atau CSS namun yang paling banyak adalah menyimpan kode HTML. untuk template blogger baru kode <body> nya adalah: <body expr:class='"loading" + data:blog.mobileClass'>.
- OUTER WRAPPER : Area ini merupakan frame atau pembungkus dari keseluruhan bagian template, yang terdiri dari header, sidebar, main wrapper/post dan footer. outer wrapper ini didalam template biasa untuk kode CSSnya #outer-wrapper atau .outer-wrapper sedang pada kode HTMLnya : <div id="outer-wrapper"> dan diakhiri dengan </div>. Namun untuk template blogger baru kode outer-wrapper sudah diganti dengan content-inner sehingga buat sobat yang menggunakan template blogger baru silahkan cari kode content-inner sebagai pengganti outer-wrapper.
- HEADER : Area ini adalah area yang letaknya berada dibagian paling atas, pada umumnya area ini berisi judul dan deskripsi blog dan bisa juga ditambahkan menu navigasi dibagian atas maupun dibagian bawahnya, terkadang ada juda yang digunakan untuk meletakan gambar/banner iklan disamping judul blog. kode yang biasa berada di area ini diantaranya header-wrapper, header-inner, header-outer.
- MAIN WRAPPER/POST : Area ini merupakan yang paling penting didalam blog dan ini merupakan bagian paling besar, disini menyimpan beberapa bagian yang diantaranya judul post, Isi post, komentar dan mungkin juga keterangan lain yang menyangkut blog.
- SIDEBAR LEFT : area ini adalah area yang terletak dibagian kiri blog, biasa digunakan untuk menyimpan widget atau aksesories blog. kode yang biasa digunakan untuk ini lsidebar,sidebarleft.
- SIDEBAR RIGHT : Area ini sama dengan sidebar left namun letaknya berada dibagian kanan.
- FOOTER : Area ini merupakan bagian paling bawah, disini biasanya untuk meletakan hak cipta atau keterangan kepemilikan blog.
Semua angka yang tertera, dapat anda ubah sesuai kebutuhan, tinggal diuji saja, jika terlalu lebar kurangi dan seterusnya. Istilah header, mainwrapper, sidebarwrapper, body dll, adalah istilah umum, bisa diganti dengan nama berbeda, asalkan struktur selanjutnya juga dengan nama sama. Untuk menguji, login ke dashboard blogger Anda, pilih template, dan edit. Untuk mempercepat, tekan Ctrl+F pada keyboard, dan ketik apa yang dicari.
Ketiga, Java Script. JavaScript adalah bahasa scripting yang paling populer di internet dan bekerja pada banyak browser seperti Internet Explorer, Mozilla, Firefox, Netscape, Opera. JavaScript digunakan pada Web pages untuk meningkatkan design, validate forms, detect browsers, create cookies, GUI dsb.
Banyak sekali fungsi dari java script. Bagi pemula (seperti saya), mengenal lebih jauh java script adalah program lanjutan, kelak jika akan membuat web provesional.
Cttan : Buat yang menggunakan template blogger baru mungkin ada beberapa perbedaan dalan kode namun pada intinya sama saja, jadi silahkan saja sobat sesuaikan saja
Sekian Dulu mudah - mudahan bermanfaaf ....Wasalam
Perbedaan template Baru dan Klasik
Mungkin ada diantara sobat semua masih bingung dengan yang namanya
template klasik sama template baru. Di blogger.com saat ini template
yang di gunakan ada dua pilihan yaitu template klasik dan baru.
Bagaimana caranya kita membedakan apakah kita menggunakan template
klasik atau template baru? Ada beberapa ciri untuk mengenal apakah yang
kita pakai template baru atau klasik, diantaranya yaitu :
Tampilan Menu dan Edit Template Baru :
Tampilan Menu dan Edit Template Klasik :
Apa kelebihan atau kekurangan dari kedua template tersebut?
Kelebihan Template Baru :
Bagi sobat yang suka otak-atik kode HTML, pada template ini agak susah tuk di otak-atik (khusus buat pemula seperti saya, lain halnya bila sobat sudah expert).
Sekarang apa kelebihan dari template klasik :
Kekurangan :
Nah itu tadi beberapa keunggulan serta kekurangan dari kedua template, silahkan pikirkan mana yang mau sobat pilih.
 |
Menu Layout |
 |
Edit Template Baru |
Tampilan Menu dan Edit Template Klasik :
 |
Edit Template Klasik |
 |
Menu Layout |
Apa kelebihan atau kekurangan dari kedua template tersebut?
Kelebihan Template Baru :
- Terdapat menu : Page Elements
Dengan menu ini kita dapat dengan mudah menambahkan element tanpa harus mengerti bahasa HTML. Element-element yang bisa ditambahkan bisa berupa Newsreel, Video Bar, List, Links List, Picture, Text, HTML/JavaScript, Feed, Labels, Logo, Profile, Blog Archive, serta Page Header. - Sistem Drag & Drop
Dengan sistem ini kita dapat dengan mudah memindahkan setiap element yang telah kita buat dimana saja yang kita sukai. - Terdapat menu : Fonts and Colors
Dengan menu ini kita dapat dengan mudah merubah warna serta bentuk huruf tanpa harus repot-repot merubah style sheet dan tentunya tidak memerlukan kemampuan berbahasa HTML
Bagi sobat yang suka otak-atik kode HTML, pada template ini agak susah tuk di otak-atik (khusus buat pemula seperti saya, lain halnya bila sobat sudah expert).
Sekarang apa kelebihan dari template klasik :
- Kode HTML sangat mudah untuk di otak-atik, jadi bagi sobat yg suka bermain dengan HTML sangat cocok memakai template ini.
Kekurangan :
- Tidak tersedia menu Page Elements, sehingga bagi sobat yang masih bingung dengan HTML akan menemui kesulitan.
- Tidak tersedianya menu : Fonts and Colors, sehingga menyulitkan dalam mengatur Font serta warna hurup.
Nah itu tadi beberapa keunggulan serta kekurangan dari kedua template, silahkan pikirkan mana yang mau sobat pilih.
Tag :
Blogger,