CSS display property

Dari nilai-nilai yang digunakan pada css display property, mungkin yang sedikit agak membingungkan adalah membedakan antara nilai "inline" dan "inline-block", terlebih ketika nilai "properti display" ini diterapkan dalam elemen berbeda. Melalui "tutorial dasar css" atau "tutorial basic css" dalam "Belajar Kode CSS & Design Blog" ini diharapkan bisa sedikit membantu untuk lebih memahami "display property" dan penggunaannya sehingga pemanfaatan kode sekaligus penataan desain blog dan posting dapat lebih optimal. Demo online yang digunakan (di halaman terbawah) diharapkan juga mampu menciptakan pemahaman yang lebih baik dan lebih cepat dengan mencoba melakukan berberapa test kode css dan html, termasuk didalamnya tentang css display property yang lain seperti misalnya "display:table", "display:table-row", "display:none", "display:run-in" atau "display:block".

Tag HTML h1 s/d h6 - html h1 to h6 tags

Tag h1 s/d h6 adalah elemen yang berfungsi untuk membuat "judul" diberbagai bagian blog dan lebih dikenal sebagai "heading". Elemen h1 s/d h6 ditetapkan dalam 6 tingkatan "heading" dengan ukuran font berbeda. Tag h1 merupakan elemen dengan font berukuran terbesar, kemudian diikuti tag h2 hingga h6. Dalam desain web, tag h1 lebih banyak digunakan sebagai pembentuk "blog title" atau untuk membuat "nama blog". Tag ini selanjutnya dipadukan dengan tag "a" hingga membentuk sebuah "link".
Sekalipun tanpa pengaturan secara khusus, semua browser secara otomatis akan menampilkan tag h1 s/d tag h6 (heading) dengan bentuk dan karakter tertentu (dg ukuran font tertentu sesuai tag yg digunakan), namun pengaturan ulang melalui kode css sangat penting dilakukan agar didapatkan bentuk dan karakter tag h1 s/d h6 yang sesuai dengan keinginan (ini menunjukkan betapa pentingnya belajar kode css sekaligus desain blog/web). Pengaturan terutama dilakukan pada ukuran font. Pengaturan yang berbeda juga dapat dilakukan saat tag h1 s/d h6 digunakan bersama dengan tag "a" untuk membuat link.

CSS position Property

Pengaturan posisi elemen html dapat dilakukan dengan menggunakan margin dan property left, top, right & bottom. Tutorial css tentang position property akan sangat membantu dalam memahami pengaturan posisi elemen html. Mempelajari pengaturan posisi elemen sekaligus juga akan membuat kita belajar css lebih detail tentang left, top, right dan bottom property serta hubungannya dengan position property.

CSS position Property

HTML <p> tag

HTML "p" tag ditandai dengan tag pembuka <p> dan tag penutup </p>, dimana tag "p" mendefinisikan sebuah fungsi paragraf dan tag ini secara khusus diperuntukkan sebagai "box bagi teks". Karena memang mendefinisikan sebuah paragraf, secara otomatis semua browser akan membuat perpindahan ruang (menciptakan margin dengan tag "p" dan tag lain berikutnya) sehingga pada halaman akan terlihat sebagai perpindahan alinea baru. Sekalipun tag "p" sudah mempunyai karakter yang bersifat khusus seperti di atas, namun jika dikehendaki dapat dilakukan perubahan melalui kode css. Kondidi seperti ini sebenarnya tidak hanya berlaku bagi tag "p" akan tetapi juga berlaku bagi semua tag yang lain seperti halnya tag "DIV".

Attribute Name dan id sebagai Link

Hyperlink (Link) tak hanya dapat menghubungkan sebuah dokumen html di halaman web/blog dengan dokumen html yang lain pada halaman berbeda (baik di blog/web yang sama atau berbeda), namun bisa juga digunakan untuk menghubungkan antar dokumen dalam satu halaman yang sama. Menggunakan link untuk tujuan seperti ini dapat dimanfaatkan untuk berpindah dari satu bagian ke bagian yang lain (misalnya perpindahan antar paragraf, top - bagian teratas halaman, atau ke bottom - bagian terbawah halaman).

Attribute Name

HTML DIV tag - Kode HTML tag DIV

Tag DIV adalah salah satu tag dalam kode html yang paling banyak digunakan. Tag DIV merupakan sebuah "wadah" bagi semua dokumen (teks, image dll) dan di dalam tag DIV biasanya berisi sekaligus beberapa elemen html/tag html. Dalam desain web/blog, tag DIV bahkan menjadi wadah (memuat) keseluruhan halaman-halaman blog yang didalamya juga berisikan tag div dan beberapa tag yang lain. Sekalipun tag DIV secara khusus mempunyai karakter/sifat bawaan seperti "display:block", namun sifat-sifat ini dapat dirubah menggunakan kode css.
Dalam penggunaanya, beberapa attribute atau properti css harus ditambahkan agar tag DIV mampu berfungsi sesuai dengan apa yng diharapkan. Dalam bentuk yang paling sederhana anda dapat membuat boks/kotak dengan memanfaatkan tag DIV.

Menggabungkan/Combining Image & Text Links

Menggunakan image link dan text link secara bersamaan memang jarang digunakan karena sebenarnya sebuah link bisa dibuat dalam bentuk image link atau text link, namun demikian mungkin saja pada kasus tertentu image link dan text link dirasakan perlu digunakan seara bersamaan dengan tujuan tertentu. Menggabungkan keduanya perlu menambahkan tag lain selain tag "a" agar image dan text links ditampilkan dengan cukup menarik. Anda bisa memanfaatkan tag "p", tag "div", tag "h1 s/d h6", tag "span" atau tag yang lain.

Kode dasar gabungan text link & image link

<a href="URL" title="Link title here!">
<img src="image.jpg" width="xx" height="xx" style="xx" />
Text Link here
</a>

Image Link - An image as a link

Membuat image sebagai link memang bisa dilakukan secara langsung menggunakan xHTML, namun demikian akan lebih praktis dan memudahkan blogger apabila "image link" tertentu dibuat dengan menggunakan bantuan kode css sehingga kode html yang digunakan menjadi lebih sederhana. Hal-hal seperti inilah yang membuat "arti pentingnya belajar css" untuk mendukung aktifitas ngeblog/blogging/posting.

Kode dasar membuat image sebagai link

<a href="URL" title="Link title here!"><img src="image.jpg" alt="text here" width="xx" height="xx" /></a>

Text Link - Using a text as a link

Belajar kode css memang tak ada habisnya, apalagi kini css sudah semakin jauh berkembang hingga css3 yang mampu membuat banyak fungsi baru yang jauh lebih menakjubkan karena mampu menggantikan beberapa peran javascript. Kemajuan baru kode css yang terus dipacu tak lepas dari upaya membuat kode css sebagai basis utama pengembangan desain blog/web. Perkembangan yang terakhir dari css3, bahkan sudah sampai pada titik dimana berbagai efek animasi dan 3 dimensi dalam berbagai rupa dapat diciptakan hingga blog/web semakin terlihat atraktif. Browser-browser besar juga saling berlomba untuk sesegera mungkin dapat mendukung penuh perkembangan yang terjadi pada kode css3. Sekalipun detik ini css3 begitu terasa dominan perannya, namun karena setiap perkembangan yang terjadi pada kode css adalah saling melengkapi, maka mempelajari css2 dan css tetap menjadi dasar untuk memahami dan membangun desain web/blog. Salah satu yang perlu kita ketahui adalah cara membuat text link (membuat teks sebagai link).

HTML Links

HTML links dikenal juga sebagai html "a" tags (tag "a") karena untuk membangun tag yang berfungsi sebagai hyperlink (link) digunakan tag "a". HTML links berfungsi untuk menghubungkan sebuah dokumen ke dokumen yang lain, dimana dokumen yang lain (baru) dapat berupa dokumen yang berada di dalam web/blog atau berada diluar blog (di blog/web lain). Dokumen baru dapat berupa teks, image, sekelompok teks atau image atau bisa juga gabungan teks, image dan unsur lainnya.

Bentuk link dalam kode html

CSS Styling Link

CSS styling link selalu menjadi kode yang dipastikan "selalu ada" dalam desain web/blog. Kode ini sangat penting dan selalu ditempatkan di bagian atas pada susunan kode css. Biasanya berada tak jauh dari syntax body. Penggunaan css styling link tak lepas dari 'digunakannya kode html tag "a" (html "a" tag) yang berfungsi untuk membuat link. Link sendiri berfungsi untuk membuat suatu hubungan dengan blog/web lain atau bisa juga dengan satu atau beberapa bagian didalam web/blog itu sendiri. HTML tag "a" dapat dengan mudah dikenali melalui berbagai ciri/tanda:

CSS text-decoration Property

CSS text-decoration property dapat dipergunakan pada semua elemen html teks. Fungsi properti css ini untuk membuat dekorasi teks. Sekalipun pada umumnya hanya digunakan pada teks link, namun sebenarnya css text-decoration dapat digunakan pada semua teks, baik berupa teks link ataupun teks biasa. Ada beberapa nilai teks-decoration property tetapi yang paling sering digunakan adalah "underline" (lebih banyak diaplikasikan pada teks link). Bentuknya berupa sebuah garis lurus mendatar (horizontal) tepat di bawah teks.

Custom Cursors - Buat Cursor Image/Icon

Jika mungkin anda ingin sesuatu yang berbeda dengan cursor di blog anda, dengan memanfaatkan cursor image atau cursor icon maka cursor default bisa langsung berubah menjadi cursor cantik dalam berbagai rupa. Semua tergantung selera! Anda bahkan bisa menggunakan foto profil sebagai cursor. Hanya perlu diperhatikan bahwa cursor image ini sekalipun dapat menggunakn image berukuran besar, namun sebaiknya gunakan saja yang berukuran relatif kecil sehingga tidak mengganggu pengunjung. Ya..., bisa-bisa jika kita tak berhati-hati malahan membuat pengunjung merasa malas karena terganggu tampilan icon cursor. Mengganti cursor dengan sebuah image atau icon dapat dilakukan menggunakan kode css (bersifat permanen) atau bisa juga melalui kode html (berlaku khusus pada elemen tertentu).

CSS Cursor Property

Berbagai macam cursor dapat digunakan di web/blog, namun sebaiknya setiap cursor digunakan berdasarkan urgensinya. merubah cursor tanpa aturan yang benar kadang-kadang justru membuat pengunjung merasa tak nyaman. Bukan sebuah hal positif yang diharapkan tentunya, terlebih jika hanya gara-gara cursor kemudian pengunjung buru-buru meninggalkan blog karena merasa risi. Setiap elemen dalam web/blog dapat menggunakan cursor yang berbeda. Menggunakan dan menampilkan cursor hanya perlu menambah sebuah property cursor berikut value/nilai sesuai bentuk cursor yang ingin digunakan. Anda bisa menggunakan properti cursor melalui kode css atau langsung ditanamkan pada tag html.

Menggunakan cursor property dg kode css

CSS Float Property

CSS Float Property berhubungan dengan pengaturan posisi sebuah obyek secara horizontal. Penggunaan css float property bukan hanya sekedar untuk kepentingan pengaturan posisi obyek/elemen saja, namun akan berkaitan dengan elemen lain disekitarnya. Penggunaan css float property selalu dibarengi dengan properti margin yang berfungsi untuk mengatur jarak obyek dengan elemen lain termasuk teks. Akan sangat berguna untuk penataan image/gambar dan elemen lain dalam desain blog/web maupun penataan halaman posting. Dalam penggunaanya, nilai yang banyak dimanfaatkan untuk pengaturan dan penataan blog/web adalah float:left dan float:right, sekalipun masih ada 2 nilai css float property yang lain (float:none dan float:inherit). Anda bisa melihat fungsi dan kegunaan css float propertypada "gambar monyet" di samping. CSS float property membuat gambar monyet berada di sebelah kanan halaman, sedangkan margin menciptakan jarak antara "gambar monyet" dengan teks disisi sebelah kiri dan bawahnya. CSS float property tersebut juga membuat teks naik sejajar dengan ujung teratas gambar. Hal seperti ini hanya dapat terjadi melalui penggunaan css float property. Anda akan melihat perbedaan ini melalui demo yang ditampilkan ujung terbawah posting.

CSS3 text-shadow Property

Membuat blog menjadi lebih indah dan menarik adalah sebuah tantangan. Kode css menjadi pilihan utama sebagai sebuah solusi dan belajar tentang kode css adalah kuncinya, terlebih property css3. Ya..., fenomena baru dalam perkembangan desain blog selain html5 adalah css3. Baru beberapa tahun belakangan ini css3 mengalami perkembangan yang signifikan dan terhitung sangat pesat karena keseimbangan yang diberikan browser untuk memberikan dukungan penuh secepat mungkin. Salah satu property css3 yang sudah support di semua browser dan menggunakan kode seragam adalah text-shadow property. Text-shadow berfungsi menciptakan efek bayangan pada teks (shadow effects) yang mampu menyuguhkan tampilan teks lebih menarik dengan berbagai alternatif pilihan bentuk shadow melalui pengaturan nilai/value text-shadow property.

Posisi shadow

Tag Iframe - html iframe tag

Mungkin pernah anda jumpai sebuah blog/web ditampilkan di dalam blog/web. Itulah fungsi tag iframe. Digunakan untuk menampilkan sebuah dokumen html di dalam dokumen html. Selain untuk menampilkan blog/web di dalam blog tentu saja iframe juga dapat digunakan untuk menampilkan dokumen html yang lain. Hal seperti ini seperti yang kita lihat di blogger/blogspot pada comment box. Comment editor adalah sebuah box yang dihasilkan melalui tag iframe. Didalamnya terdapat kode html lengkap sebagaimana sebuah desain web/blog, dimana digunakan tag pembuka dan penutup html, head, dan body.

Kode dasar tag iframe

Tag style - html style tag

Desain blog dibangun melalui kode html termasuk kode css di dalamnya. Kode css memegang peran luar biasa penting karena "jika diandaikan sebagai sebuah bangunan", kode css adalah kode "penentu bentuk, rupa dan tata ruang bangunan tersebut". xHTML adalah "kerangka bangunan", sedang kode css adalah "material/elemen yang membentuk dan mengatur segala elemen bangunan sehingga tercipta sebuah bangun yang tertata rapi dengan segala batas ruang dan pembagiannya serta menjadi material utama pengisi pernak-pernik penghias bangunan berikut ruangan". Kode css ini terwadahi dalam "tag style" dan pada umumnya diletakkan di dalam tag head, diantara tag pembuka (<head>) dan penutupnya (</head>). Jika ada tag style berikut dokumen css disimpan/diletakkan di dalam tag body (diantara <body> dan </body>), biasanya ini hanya dengan pertimbangan untuk memudahkan pengguna/blogger dalam menggunakan widget atau mengikuti panduan dalam tutorial blog/web. Pada beberapa kasus yang lain, penempatan tag style berikut kode css dilakukan untuk kepentingan demo yang terintegrasi dalam posting.

tag script - html script tag

Tag script selalu berhubungan dengan javascript, sedang javascript adalah salah satu elemen penting yang tak terpisahkan dari web/blog. Dengan kata lain tag script adalah salah satu tag html terpenting dalam desain web/blog dan sekaligus menjadi bagian yang tak terpisahkan dari blog/web. Tag script memuat dokumen dalam bentuk file text javascript. Dalam penggunaannya, umumnya file javascript disimpan diantara tag pembuka head (<head>) dan tag penutupnya (</head>), namun demikian tak menutup kemungkinan bahwa tag script berikut file javascript disimpan di dalam tag body di antara tag pembuka (<body>) dan penutupnya (</body>).

Contoh penulisan tag script

Attribute SRC - html src attribute

Attribute src (search) digunakan dalam sebuah tag kode html (html tag). Beberapa tag yang paling sering digunakan dalam blog/web dan menggunakan attribute src adalah tag script, tag iframe dan tag img. Value/nilai attribute src adalah URL (alamat file yang tersimpan dalam file hosting). Jika anda menggunakan file hosting diluar domain blog/web, maka URL harus ditulis secara lengkap, sedang bila file tersimpan dalam domain blog/web maka hanya perlu meuliskan folder & nama file.
Pada javascript, attribute src dituliskan dengan menyertakan attribute lain - script="tipe/javascript", sedang untuk iframe dan img bisa melibatkan beberapa attibute sekaligus.

Usemap Attribute

Usemap attribute adalah salah satu attribute css yang digunakan dalam tag img. Sekalipun jarang digunakan oleh blogger, attribute usemap dapat digunakan untuk beberapa keperluan khusus seperti misalnya memberikan keterangan pada titik-titik tertentu di senuah gambar/image, baik dalam bentuk image ataupun teks. Usemap juga bisa digunakan untuk menempatkan sebuah link. Pada penerapan yang berbeda, attribute usemap bisa juga digunakan untuk membuat daftar menu/cloud. Penggunaan usemap akan banyak ditemukan pada image yang digunakan sebagai peta/map, diamana setiap titik ditentukan melalui koordinat.

Attribute usemap dalam tag img

Tag image - html img tag

Kode html tag image (tag img) merupakan tag html yang paling sering digunakan dalam aktifitas blogger selain tag div, tag p, tag a, tag span, tag h1 s/d tag h3. Alasan mengapa tag img begitu seing digunakan adalah tingginya frekuensi penggunaan image sebagai salah satu materi posting. Bukan hal aneh karena image adalah salah satu media paling tepat untuk berkomunikasi dengan pembaca selain teks. Frekuensi penggunaan image sebagai salah satu bahan posting dan desain blog mengharuskan blogger untuk mengetahui lebih dalam tentang image, tag img serta beberapa property css yang berkaitan dengan penerbitan image dalam posting. Kode html tag img dalam penggunaan sederhana berisi attribute src dan alt dan width serta height.

CSS3 Border Radius Property

CSS3 border radius property berfungsi untuk membentuk border dengan sisi lengkung (rounded corners). Pada saat ini semua browser telah support terhadap border-radius property, bahkan semuanya sudah menggunakan kode standart. Jika pada masa sebelumnya untuk membuat sudut lengkung harus menggunakan background image, dengan hadirnya css3 border-radius property maka untuk membentuk sudut lengkung hanya perlu menambahkan kode "border-radius" yang nilainya dalam bentuk pixel (px), em, pt atau % (persen). Untuk penggunaan secara umum lebih banyak dalam satuan px karena dengan nilai ini semua browser menghasilkan output yang seragam.

Image

Unsur web/blog yang paling sering digunakan selain teks adalah image/gambar. Tidak hanya digunakan sebagai media visualisasi dalam posting, namun image memang mempunyai peran dan fungsi yang sangat besar terhadap desain blog/web berikut semua aktifitas seputar blog. Ada tiga jenis file image yang digunakan dalam web:

1. File image jpg/jpeg
   Image dalam bentuk file .jpg mempunyai kelebihan dalam detail warna. Paling lengkap dan paling bagus jika dibandingkan dengan file image yang lain. File image jpg juga dapat di kompres hingga ukuran yang jauh lebih kecil dari aslinya dengan kwalitas terjaga sehingga mempunyai efek positif terhadap kecepatan loading blog. Sifat-sifat seperti inilah yang membuat file jpg paling banyak digunakan sebagai bahan posting.
2. File image gif
   

Displays the cursor position with javascript

Javascript di bawah ini berfungsi untuk menampilkan posisi cursor pada setiap titik di halaman blog/web. Sekalipun sepertinya tak begitu dibutuhkan, namun script sederhana penunjuk posisi cusor ini sangat bermanfaat untuk aktifitas yang berkaitan dengan desain blog. Hampir semua titik di seluruh bagian blog dapat terdeteksi dengan akurasi yanga sangat baik sehingga bahkan anda dapat mengukur dimensi sebuah elemen dengan cukup mudah dan cepat. Jika anda ingin menampilkan titik koordinat sebuah elemen di halaman blog, javascript ini juga akan sangat bermanfaat sekalil. Sebagai contoh misalnya anda ingin menampilkan attribute "usemap" sebuah image.

CSS Text Property

Membicarakan tentang blog/web tentu tak akan pernah lepas dari properti "text" karena inilah media yang digunakan sebagai sarana komunikasi antara pemilik blog/web dan pengunjung selain image atau media yang lain. Menggunakan property text dalam web akan berkaitan erat dengan 3 css property lain.

1. color property
2. text-align property
3. text-transform property

Text Color

Warna teks dibentuk melalui color property. Berbagai macam warna dapat digunakan dimana nilai warna dapat menggunakan 3 pilihan kode warna.

Kode CSS

Kode css adalah salah satu elemen penting dalam desain web/blog. Melalui kode inilah segala sesuatu yang berkaitan dengan desain web/blog diatur. Pengembangan yang dilakukan terhadap kode css berlangsung secara terus-menerus dan dilakukan secara intensif sehingga pada perkembangannya kode css ini mempunyai peran yang sangat vital atau bahkan bisa dikatakan sebagai "soko guru" perkembangan dan pengembangan desin web/blog. Hasil pengembangan kode css menciptakan hasil nyata yang membuat kode ini berkembang dalam 3 versi, dimana versi terakhir yang disebut sebagai css3 mampu menggantikan berbagai fungsi yang pada masa sebelumnya hanya dapat dibuat menggunakan javascript. Melihat pesatnya perkembangan kode css3, bukan tak mungkin jika pada masa ke depan desain web/blog akan lebih banyak menyingkirkan peran javascript. Perkembangan terkini dari css3 adalah penggunaan css3 transition property, css3 transform property dan css3 animation property yang bahkan mampu menciptakan berbagai animasi dalam rupa 3 dimensi (3D).

CSS Outline Property

Sekalipun outline properties mempunyai value yang sama dengan border dan juga mampu memberikan hasil seperti layaknya border, namun anda harus berhati-hati saat menggunakan outline property. CSS outline property tak bisa dimasukkan sebagai bagian dari box, sekalipun outline selalu berada disekeliling box (posisinya berada setelah content, padding dan border). Dia seperti sebuah bayangan yang mampu menabrak apapun tanpa menggeser unsur/box/bidang yang ada disekelilingnya. Jika boleh dikatakan, outline property seperti sebuah elemen dengan absolute position.

Cara penulisan outline property

outline: style | color | width;

CSS Border Properties

CSS Border Properties menjadi satu unsur yang hampir tidak pernah lepas dari css box model. Border properties banyak dmanfaatkan untuk memperindah box, membedakan sebuah box dengan box lain serta memperjelas batas sebuah box. Ada tiga properti css border yang masing-masing mengatur ketebalan border, warna border dan style border. Masing masing dapat digunakan di ke-empat sisi box (top, right, bottom dan left).

• border-width property :
  border-width property berfungsi untuk mengatur ketebalan border. Ada beberapa satuan Value/nilai yang bisa dipergunakan seperti pixel, pt, em, thick, thin, medium dll.

CSS Padding Properties

Padding adalah bagian yang tak terpisahkan yang sangat penting dalam desain web/blog. Posisi padding berada antara border dan content (jika menggunakan border). Memanfaatkan padding adalah salah satu cara untuk dapat memperoleh penataan desain yang rapi dan menarik, selain menjadi batas pemisah antara content dengan unsur lain dalam blog/web. Dalam perhitungan, padding termasuk bagian dari ukuran sebuah box, setelah content dan border. Jika dibuat dalam bentuk perhitungan akan seperti ini:

Menghitung ukuran box

mybox{
      width:200px;
      height:100px;
      border:10px solid grey;
      padding:10px 15px 5px 70px;
      margin:25px 10px;
}

CSS Margin Properties

Properti css "margin" pada intinya berfungsi sebagai pengatur jarak sebuah box/kotak dalam desain web/blog dengan elemen lainnya agar sebuah blog/web dapat tertata dengan baik. Properti margin merupakan unsur terluar box setelah border, padding dan content. Nilai/value margin dapat menggunakan prosentase, auto, inherit, atau satuan lain dalam bentuk pixel (px), pt dan em. Secara umum satuan yang paling sering digunakan adalah pixel. Margin bersifat melingkupi sebuah box sehingga pengaturan margin dapat dilakukan dari 4 (empat) sisi berbeda.

• margin-top : untuk mengatur jarak dengan unsur lain disebelah atas.
• margin-right : untuk mengatur jarak dengan unsur lain disebelah kanan.
• margin-bottom : untuk mengatur jarak dengan unsur lain disebelah bawah.
• margin-left : untuk mengatur jarak dengan unsur lain disebelah kiri.

CSS Box Model

CSS Box Model adalah salah satu unsur dasar yang sangat penting dalam desain blog yang harus dipahami dengan baik. Hampir semua bagian blog/web dikenali sebagai "box atau kotak" yang didalamnya terdiri atas margin, border, padding dan content. Box atau kotak ini menjadi sangat akrab di telinga blogger bukan saja karena setiap saat selalu terdengar atau terbaca dan bahkan bersentuhan, namun memang istilah ini menjadi istilah pokok dalam dunia per-blogger-an. Anda pasti amat sering mendengar istilah kotak komentar atau comment box, kotak widget, kotak/boks posting, box edit html, kotak pencarian, serta beberapa istilah lain yang selalu diawali dengan kata boks/kotak. Box atau dalam bahasa Indonesia dikenal sebagai "kotak" atau "boks" terdiri atas 4 unsur:

Multiple Background Images

Menggabungkan beberapa image menjadi satu image tidak lagi harus dilakukan dengan menggunakan software image editing. Anda bisa memanfaatkan property css3 multiple background images. Dengan properti ini beberapa gambar image bisa digabungkan menjadi satu hingga menghasilkan sebuah image baru. Anda bahkan bisa juga menggabungkan image animasi gif ke dalamnya sehingga image baru yang nantinya dihasilkan tentu saja terlihat sebagai image animasi gif. Agar image bisa ditampilkan secara sempurna menurut keinginan, beberapa background-properti lain bisa ditambahkan kedalamnya sehingga posisi background, pengulangan background dan ukurannya bisa diatur.

Kode dasar multiple background images

background-image:url(image-1.jpg), url(image-2.gif), url(image-3.png), url(image-4.jpg);

Menggabungkan beberapa Background Property

Background Property menjadi sangat penting untuk dibahas secara khusus karena melalui background property ini beberapa properti background dapat dituliskan menjadi sebuah kode terpadu yang membuat penulisan kode css menjadi lebih efisien, praktis dan efektif. Anda dapat menggabungkan penulisan background-color property, background-image property, background-position property dan background-repeat property hanya dalam sebuah kode sehingga bentuknya menjadi lebih pendek.

Contoh beberapa kode background-property

background-color:red;
background-image:url(image.jpg);
background-repeat:no-repeat;
background-position:top center;
background-attachment:fixed;

Background Origin Property

Background origin property memungkinkan pengaturan background sebuah elemen/box agar bisa dimulai pada tiga ujung bagian berbeda. Border, padding dan content box. Agar background dapat berfungsi secara optimal, background size property harus dilibatkan di dalamnya. Penggunaan nilai/value % (persen) jadi pilihan paling tepat untuk memudahkan pengaturan. Jika ingin menambahkan property background lainnya, maka background position dapat digunakan selain tentu saja background-repeat property dan background-image property.

Kode Background origin property

• background-origin:border-box
• background-origin:padding-box
• background-origin:content-box

Background Clip Property

Background clip property merupakan salah satu property css3 yang sudah mendapat dukungan penuh secara sempurna dari browser besar seperti Opera, Mozilla Firefox, Safari, Google Chrome. Semua browser juga sudah menggunakan kode yang sama sehingga membuat pengguna lebih edisien saat menggunakan kode css. Background clip property berfungsi untuk mengatur posisi background yang didasarkan atas border, padding dan content. Pengaturan penentuan posisi dilakukan dengan 3 value berbeda.

Penulisan kode background clip property

• background-clip:border-box;
• background-clip:padding-box;
• background-clip:content-box;

Background Size Property

Kemajuan besar telah banyak dicapai pada kode css. Background size property adalah salah satu diantaranya. Sebuah property yang membuat designer blog atau blogger lebih mudah dalam mengaplikasikan image sebagai sebuah background image karena dengan properti baru ini ukuran image menjadi lebih fleksibel. Anda dapat merubah ukuran sebuah background image sesuka hati hanya dengan menambahkan value/nilai yang sesuai dengan ukuran yang diharapkan pada background-size property. Jika sebelumnya kita dipusingkan untuk menggunakan software pembuat gambar/image editing dengan sebaik mungkin agar mendapatkan ukuran background setepat mungkin, kini hal ini bisa sedikit diabaikan karena kesalahan ukuran background image yang tak terlalu fatal dapat kita koreksi melalui background size property.

Background Attachment Property

Background attachment property secara spesifik digunakan untuk pemasangan background image pada body. Background image yang digunakan bisa dibuat dalam bentuk berulang/repeat atau tunggal/tak berulang/no-repeat. Pada umumnya background attachment lebih banyak menggunakan background tunggal dengan ukuran besar yang memenuhi halaman blog/web. Background attachment mempunya tiga macam value/nilai.

Value/nilai background attachment

Ada dua nilai/value yang digunakan pada background attachment property.

• background-attachment:fixed;
• background-attachment:scroll;

Background Position Property

Background position property merupakan salah satu dari css background yang sangat penting saat background image property digunakan. Berfungsi untuk mengatur posisi background dalam arah vertical dan horizontal. Background position property biasa dipekerjakan bersama dengan background image property, background repeat property dan background size property, sekalipun yang paling sering adalah bersama background image property.

Value/nilai background position property

Ada 3 value yang sering digunakan untuk pengaturan posisi background.

Background Repeat Property

Properti background repeat berfungsi untuk menciptakan efek pengulangan pada penggunaan image sebagai background (background image property). Dengan fungsi tersebut background repeat property dimanfaatkan untuk melengkapi fungsi yang berlaku pada background image property. Sebuah background image dapat diatur untuk ditampilkan sebagai background tunggal atau background berulang.

Pengulangan background image

Ditinjau dari cara penulisan kode, fungsi dan kegunaannya, background repeat property dapat dibedakan menjadi:

Background Image Property

Background image merupakan salah satu background property yang cukup disukai karena mampu menghadirkan "sesuatu yang tak mampu diciptakan melalui background color property". Tak dapat dipungkiri karena memang hampir semua fungsi backgroud color dapat digantikan oleh background image, sedangkan background color tak mampu menggantikan hampir sebagian besar peran yang mampu diberikan oleh sebuah background image. Sebagai contoh adalah background image mampu menghadirkan sebuah background berupa gambar pemandangan pegunungan dengan detail lengkap disertai berbagai pohon dan gunung serta burung yang terlihat sedang terbang tak mungkin dibuat atau digantikan melalui background color property.

Background Color Property

Background color property merupakan efek background yang paling sering digunakan dan hingga saat ini dikembangkan dengan sangat intensif melalui css3. Berkat pengembangan tersebut penggunaannya menjadi semakin variatif dan dalam beberapa hal bahkan mampu menggantikan fungsi efek background yang sebelumnya harus menggunakan background image seperti yang terjadi pada background gradient. CSS3 background gradient pada saat ini banyak digunakan untuk menggantikan fungsi efek dari background gradient dari sebuah image. Kelebihan utama background color dibandingkan background image adalah pada beban yang jauh lebih ringan sehingga beban loading blog tak terlalu bertambah berat. Bahkan, banyak image kini bisa dibuat hanya dengan memanfaatkan kode css dan css3 yang melibatkan property backgrouns color, background gradient dan border-radius property.
Dalam penggunaanya ada beberapa jenis background color yang dapat dipergunakan dan hampir semuanya telah mendapat dukungan penuh dari browser ternama seperti Mozilla, Google Chrome, Safari, Opera dan IE.

CSS Background

CSS background berfungsi untuk membuat efek background pada sebuah elemen, dimana background dapat berupa background color (warna) ataupun background image (gambar). Property background color dan background image ini masih dapat diatur dengan beberapa background property lainnya sehingga sehingga background dapat dibentuk atau diatur sesuai keinginan.

CSS Background Property

Klik link di bawah ini untuk mengetahui bagaimana setiap background property bekerja. Setiap link memuat tutorial secara lengkap berikut demo.

1. background-color-property
2. background-image-property
3. background-repeat-property
4. background-position-property
5. background-attachment-property
6. background-size-property
7. background-clip-property
8. background-origin-property

Selector id dan class - id and class selectors

Ketika anda membuka kode yang digunakan dalam desain blog/web akan banyak menemukan kode html dengan selector id dan class. Kedua selector ini berfungsi untuk membentuk style khusus pada elemen html. Id dituliskan dalam bentuk id="xxx" sedang class dituliskan dalam bentuk class="xxx". Penulisan id dan class dalam elemen html berhubungan dengan penggunaan selector id dan class dalam kode css yang digunakan. Dalam kode css, selector id dituliskan sevagai "#" dan class sebagai ".".

Penggunaan selector id dan class

• Selector id digunakan secara khusus pada sebuah elemen tunggal yang berdifat unik. Sebuah elemen dengan id tertentu biasanya diikuti oleh beberapa elemen lain dengan class tertentu ataupun tanpa selector. Elemen dengan selector id bersifat atau mempunyai kekuatan tertentu yang tak dipengaruhi oleh id yang berbeda. Jika sebuah elemen dapat mempunyai beberapa class secara bersamaan, maka id hanya digunakan secara tunggal.

Syntax CSS

Dalam kode css dikenal istilah syntax. Sebuah syntax terdiri atas css selector dan satu atau beberapa buah deklarasi yang didalamya berisikan properti css dan nilainya (property and value). Untuk membangun desain blog/web bisa berisikan puluhan hingga ratusan syntax yang masing-masing membentuk fungsi dan kegunaan berbeda.

Contoh Syntax

h3{
      font-size:18px;
      color:red;
      font-weight:bold;
}

Desain dasar blog

Agar lebih mengetahui tentang blog, setiap blogger harus mengetahui desain dasar blog yang dikenal sebagai template atau theme. Mengetahui desain dasar blog akan membuat blogger tertarik untuk belajar lebih banyak tentang bagaimana sebuah blog dibuat hingga mempunyai bentuk dan tampilan yang sangat beraneka ragam. Mengetahui desain blog akan menuntun kita untuk mampu memaksimalkan setiap kode penyusun blog, kemampuan yang pada akhirnya akan membuat orang dapat melakukan berbagai perubahan desain agar blog ditampilkan lebih menarik dan kode penyusun blog juga dapat dipergunakan secara tepat dan efektif.

Cara & langkah membuat Blog di Blogger

Agar lebih mudah mempelajari desain blog dan kode css, anda harus mempunyai sebuah blog yang memberi kelonggaran melakukan berbagai editing kode. Blog tersebut dapat dibuat di blogger. Berbeda dengan di wordpress dan blogdetik yang masih banyak memberi batasan pada blogger untuk melakukan proses editing di template/theme, blogger benar-benar memberi kelonggaran yang sangat luar biasa hingga kita dapat mengakses desain blog hingga ke bagian terdalam antara tag pembuka dan penutup head serta tag pembuka dan penutup body.

Apakah yang dimaksud dengan blog atau web?

Memiliki blog atau web menjadi sebuah trend baru dikalangan pelajar, artis, mahasiswa dan banyak pengguna internet lainnya seperti pebisnis, pedagang atau bisa saja petani. Apapun bisa kita lakukan melalui web/blog. Anda bisa menulis artikel, membuat sebuah pengumuman (sekolah, universitas, yayasan dll), membuat sebuah polling atau bahkan juga berbagai aktifitas bisnis atau jual beli (bisnis/jual beli online).

Pengantar

Kemajuan dalam bidang elektronika khususnya digital berjalan dengan sangat cepat. Perkembangan tak lagi dihitung dalam jangka waktu bulan atau bahkan tahun. Kini, setiap detik selalu ada sebuah perkembangan baru yang sebelumnya sama sekali tak terbayangkan. Sebagai contoh adalah kemajuan dalam bidang telekomunikasi, khususnya HP. Jika beberapa tahun yang lalu anda hanya dapat menjumpai HP dalam ukuran jumbo (sebesar radio portable seukuran tas tangan), pada era sekarang bentuk dan ukuran HP bisa hanya sebesar sepertiga telapak tangan orang dewasa dengan tebal hanya beberapa milimeter.