CSS Border, dari A sampai Zet

Berikut ini adalah beberapa jenis border yang paling umum digunakan:

border-style: solid;

border-style: dashed;

border-style: dotted;

border-style: inset;

border-style: outset;

border-style: double;

border-style: groove;

border-style: ridge;

border-style: none;

Properti border dibagi menjadi tiga aspek:

• border-width
• border-style
• border-color

• border-width:
  border-width digunakan untuk menentukan tebal border. Umumnya menggunakan satuan piksel, atau bisa juga menggunakan ukuran relatif: thin (tipis), medium (sedang), atau thick (tebal).
• border-style:
  border-style digunakan untuk menentukan tipe border.
• border-color:
  border-color digunakan untuk menentukan warna border. Umumnya menggunakan warna HEX, atau bisa juga menggunakan warna RGB atau menuliskan nama warna secara langsung.

Contoh Penerapan

Top-Down	Inline
<style type='text/css'> #contoh-border { border-width:4px; border-style:solid; border-color:#ffa500; } </style> ...... <div id='contoh-border'>OBJEK</div>	<div style='border-width:4px;border-style:solid;border-color:#ffa500;'> OBJEK </div>

Menggabungkan Tiga Deklarasi Border dalam Satu Properti

Properti border-width, border-style dan border-color bisa digabungkan dalam satu properti saja yaitu border, dengan urutan seperti berikut:

border: 4px solid #ffa500;
border: border-width border-style border-color;

Memecah Border Menjadi Empat Sisi

Properti border juga bisa dipecah menjadi empat sisi seperti ini:

Deklarasi	Keterangan
border-top: 4px solid #ffa500;	Menentukan tampilan border sebelah atas
border-right: 4px solid #ffa500;	Menentukan tampilan border sebelah kanan
border-bottom: 4px solid #ffa500;	Menentukan tampilan border sebelah bawah
border-left: 4px solid #ffa500;	Menentukan tampilan border sebelah kiri

Penerapan yang lebih detail dapat menggunakan teori yang pertama, dengan dua jenis metode pemecahan sisi:

Deklarasi	Keterangan
border-top-width: 4px;	Menentukan tebal border sebelah atas
border-right-width: 4px;	Menentukan tebal border sebelah kanan
border-bottom-width: 4px;	Menentukan tebal border sebelah bawah
border-left-width: 4px;	Menentukan tebal border sebelah kiri
border-top-style: solid;	Menentukan tipe border sebelah atas
border-right-style: solid;	Menentukan tipe border sebelah kanan
border-bottom-style: solid;	Menentukan tipe border sebelah bawah
border-left-style: solid;	Menentukan tipe border sebelah kiri
border-top-color: #ffa500;	Menentukan warna border sebelah atas
border-right-color: #ffa500;	Menentukan warna border sebelah kanan
border-bottom-color: #ffa500;	Menentukan warna border sebelah bawah
border-left-color: #ffa500;	Menentukan warna border sebelah kiri

Deklarasi	Keterangan
border-width: 4px 2px 7px 0px;	Urutan valuenya adalah: top right bottom left
border-style: solid dotted dashed none;
border-color: red green blue orange;

Memasukkan Kode HTML dalam Posting

Suatu saat mungkin kamu ingin berbagi kode, informasi atau tutorial dan ingin menerbitkannya dalam posting untuk dipamerkan. Namun ketika kamu meletakkan kode di dalam posting, kode-kode tersebut malah menjadi tidak terlihat, rusak, muncul pesan error pada editor posting atau bahkan menghilang sama sekali. Hal ini terjadi karena ketika sebuah kode (khususnya tag) diletakkan di dalam posting, kode-kode tersebut tidak akan diterjemahkan browser sebagai teks biasa, melainkan akan diterjemahkan sebagai sistem. Nah untuk mengatasi masalah itu, umumnya seorang penulis dunia maya akan memanfaatkan baris-baris karakter khusus seperti ini agar browser tidak menerjemahkannya sebagai sistem, melainkan sebagai simbol:

Kode	Hasil Tampilan
&lt;	<
&gt;	>
&#39;	'
&quot;	"
&amp;	&
&hearts;	♥
&raquo;	»
&laquo;	«

dan lain sebagainya...

Nah, untuk memasukkan kode HTML ke dalam posting, gunakan kode-kode pengganti tersebut untuk menciptakan simbol-simbol seperti <, > dan sebagainya yang tidak bisa diterjemahkan peramban sebagai “huruf”. Contohnya begini:

<a href='http://latitudu.blogspot.com'>TAUTAN</a>

Kode-kode tersebut nantinya akan berubah menjadi simbol pada saat posting diterbitkan. Itu terjadi karena secara teknis kita memang tidak pernah menggunakan karakter < dan > dalam naskahnya, sehingga peramban tidak akan menerjemahkannya menjadi “sistem”.

Satu cara yang paling praktis untuk mengubah simbol-simbol HTML adalah dengan menggunakan konverter HTML. Cara kerjanya sama persis dengan sistem Find and Replace dalam komputermu.

Coba masuk ke halaman ini ⇒ Konverter HTML

Cara menggunakannya cukup dengan menulis atau menempelkan kode HTML, lalu tekan Konversi.

Salin hasil konversinya lalu masukkan ke dalam editor posting. Terserah mau diletakkan pada mode HTML atau mode Tulis, hasil akhirnya nanti akan sama saja.

Tampilan kode di dalam postingmu sekarang memang menjadi tampak sangat berantakan, tapi coba sekarang kamu klik Pratinjau.

Bagaimana?

Membuat Posting Read More/Baca Selengkapnya untuk Blogspot

Posting Read More/Baca Selengkapnya dibuat dengan tujuan untuk meringkas artikel-artikel yang terlalu panjang. Sangat tidak menyenangkan bagi para pengunjung andaikan mereka harus menggulung layar begitu panjang hanya untuk melihat posting-posting di bawahnya. Nah, untuk mengatasi masalah itu, umumnya para penulis akan membuat sebuah sistem ringkasan posting seperti ini:

Link/tautan Baca Selengkapnya bertugas untuk mengarahkan para pengunjung menuju halaman asli dari artikel tersebut.
Cukup dua langkah perombakan saja yang kita perlukan untuk membuat sistem ini berfungsi, hanya saja di sini Saya memberikan sedikit detail kecil untuk memperindah tampilan linknya.

Pertama-tama masuklah ke tab Rancangan kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
Temukan kode ini:

</head>

Salin kode ini, kemudian letakkan tepat di atasnya:

<script type='text/javascript'>
//<![CDATA[
    var thumbnail_mode   = "float",
        summary_noimg    = 350,
        summary_img      = 350,
        img_thumb_height = 100,
        img_thumb_width  = 120;

    /******************************************
    Script Posting Read-More versi 2.0 (blogspot)
    (C)2008 oleh Anhvo
    ********************************************/
    function createSummaryAndThumb(a) {
        var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+"<div>"+removeHtmlTag(b.innerHTML,e)+"</div>";b.innerHTML=f}function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var c=a.split("<");for(var d=0;d<c.length;d++){if(c[d].indexOf(">")!=-1){c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length)}}a=c.join("")}b=b<a.length-1?b:a.length-2;while(a.charAt(b-1)!=" "&&a.indexOf(" ",b)!=-1)b++;a=a.substring(0,b-1);return a+"...";
    }
//]]>
</script>

Setelah itu cari kode yang tampak seperti ini:

<data:post.body/>

TIP: Tekan CTRL + F lalu ketik data:post.body untuk mempermudah pencarian.

Ganti kode tersebut dengan ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    <span class='rmlink'><a expr:href='data:post.url'>Baca Selengkapnya</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
</b:if>

Klik Pratinjau untuk sekedar mengecek perubahannya.

Sistem ringkasan posting ini sebenarnya sudah bisa berfungsi dengan baik, jadi kamu bisa langsung menyimpan perubahannya. Tapi jika kamu ingin memberikan sedikit kegantengan lagi dalam sistem postingmu ini, kamu bisa memberikan efek seperti tombol pada link Baca Selengkapnya.

Salin kode CSS di bawah ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

.rmlink a        {background:#567856;color:#fff;padding:2px 15px 3px;margin:15px 0 0;border:0;float:right;text-decoration:none;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;font-weight:bold;}
.rmlink a:hover  {background:#FFDD56;color:#000;}
.rmlink a:active {background:#000;color:#567856;}

Klik Simpan Template.

Sedikit Penyesuaian:

• Tentukan banyaknya huruf yang ditampilkan dalam variabel summary_noimg (jika postinganmu tidak terdapat gambar) dan summary_img (jika postinganmu terdapat gambar).
• Tentukan lebar dan tinggi thumbnail dalam variabel img_thumb_width dan img_thumb_height.

---

Pertimbangkan Juga Beberapa Posting Ini:

• Kosep Auto Read-More Baru dengan Bantuan Textarea
• Posting Auto Read-More Tanpa JavaScript
• Optimasi Thumbnail pada Auto Read-More Link dan Widget

Widget Tabel Konten Abu Farhan Berbahasa Indonesia

Berbahasa Indonesia di sini maksudnya adalah bahwa Saya telah memodifikasi scriptnya. Beberapa orang (seperti saya) mungkin tidak suka dengan teks bertuliskan New !! di samping judul posting karena masih menggunakan bahasa Inggris. Nah, untuk mengatasi itu Saya telah mengedit scriptnya agar bisa menjadi berbahasa Indonesia (lihat demo). Selain itu Saya juga telah mengubah semua linknya menjadi otomatis terbuka di tab baru untuk mempermudah para penulis yang masih menonaktifkan klik kanan di blog mereka.
Untuk membuatnya, siapkan sebuah widget HTML/JavaScript, atau buat sebuah halaman statis lalu klik mode HTML. Salin kode ini, kemudian letakkan di dalam formulirnya:

<script src='http://hompimpa.googlecode.com/files/toclib.js' type='text/javascript'></script>
<script src='http://latitudu.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc'></script>
<a href='http://www.abu-farhan.com' style='font:8px Arial,Serif;color:#000;'>Widget by Abu Farhan</a>

Ganti kode yang berwarna hijau dengan alamat blogmu.
Klik Simpan.

Sumber: hatetepe://wewewe.abu-farhan.com/

Apa Saja yang Bisa Kita Lakukan dengan CSS Text Shadow?

Sebenarnya tugas CSS Text Shadow tidak hanya sebatas membuat bayangan pada teks saja, namun juga bisa menciptakan efek-efek spesial dengan memanfaatkan kemampuan propertinya yang dapat menerima value bayangan lebih dari satu. Pelajaran CSS Text Shadow dasar bisa kamu baca di sini. Internat Explorer tidak mendukung CSS Text Shadow, jadi kamu harus membuka halaman ini dengan browser lain seperti Mozilla Firefox untuk melihat efeknya. Semua demo yang tampak seperti gambar ini sebenarnya memang benar-benar teks, kalau tidak percaya kamu bisa mencoba untuk menyeleksinya satu-persatu.

Efek Teks Cekung

Untuk membuat efek cekung, intinya adalah dengan membuat warna bayangan offset-X dan offset-Y negatif menjadi lebih gelap dibandingkan warna latar belakangnya. Sebaliknya, bayangan offset-X dan offset-Y positif diwarnai dengan warna yang lebih terang dibandingkan warna latar belakangnya. Hal ini akan menciptakan efek cekung pada teks.

Hompimpa Alaihum Gambreng

h2 {
  background:#4aacf7;
  color:#064475;
  text-shadow:1px 2px 1px #9ad2fe,-1px -2px 1px #1895f7;
}

Efek Teks Cembung

Untuk membuat efek teks cembung adalah dengan membuat warna bayangan offset-X dan offset-Y negatif menjadi lebih terang dibandingkan warna latar belakangnya. Sebaliknya, bayangan offset-X dan offset-Y positif diwarnai dengan warna yang lebih gelap. Hal ini akan menciptakan efek cembung pada teks. Terlebih lagi dengan penambahan detail pemberian warna yang lebih terang lagi pada dua sudut yang tersisa untuk menciptakan efek sedikit berkilau. Kinyis-kinyis...

Hompimpa Alaihum Gambreng

h2 {
  background:#3e6a06;
  color:#3e6a06;
  text-shadow:
    -1px -1px 1px #528e06,
    -1px -1px 3px #528e06,
    1px 1px 1px #243d05,
    1px 1px 3px #243d05,
    1px -1px 1px #eafed2,
    -1px 1px 1px #eafed2;
}

Efek Teks Bergaris Tepi

Untuk membuat efek teks bergaris tepi adalah dengan cara membuat deret bayangan berwarna putih ke segala arah, baik offset positif maupun offset negatif. Mengatur tingkat blur menjadi 0 piksel dan pemberian sentuhan akhir berupa bayangan yang sedikit gelap dengan tingkat blur sebesar 2 piksel untuk mempertegas garis tepinya.

Hompimpa Alaihum Gambreng

h2 {
  background:#fafafa;
  color:#91080b;
  text-shadow:
    1px 0px 0px #fff,
    -1px 0px 0px #fff,
    0px 1px 0px #fff,
    0px -1px 0px #fff,
    1px 1px 2px #000;
}

Efek Teks Tiga Dimensi

Membuat efek teks tiga dimensi dilakukan dengan cara menuliskan deret bayangan berwarna sama ke satu arah dengan menambahkan besaran angka offset sedikit demi sedikit pada masing-masing bayangan. Mengatur tingkat blur menjadi 0 piksel dan pemberian sentuhan akhir berupa bayangan yang sedikit gelap dengan tingkat blur sebesar 7 piksel untuk mempertegas efek tiga dimensinya.

Hompimpa Alaihum Gambreng

h2 {
  background:#f9f9d7;
  color:#9a9d0b;
  text-shadow:
    1px 1px #404206,
    2px 2px #727415,
    3px 3px #727415,
    4px 4px #727415,
    5px 5px #727415,
    6px 6px #727415,
    7px 7px #404206,
    8px 8px 7px #000;
}

Hompimpa Alaihum Gambreng

h2 {
  background:#eee;
  color:#45BEF7;
  text-shadow:
    0px 1px #577079,
    0px 2px #577079,
    0px 3px #577079,
    0px 4px #577079,
    0px 5px #577079,
    0px 6px #577079,
    0px 7px #577079,
    0px 7px 10px #333;
}

Efek Teks Menyala

Efek teks menyala dibuat dengan cara menuliskan deret bayangan berwarna sama dengan menambahkan besaran angka tingkat blur sedikit demi sedikit pada masing-masing bayangan. Mengatur warna teks menjadi putih, latar belakang menjadi hitam serta mengatur offset sumbu X dan Y menjadi 0 piksel.

Hompimpa Alaihum Gambreng

h2 {
  background:black;
  color:#fff;
  text-shadow:
    0 0 3px #FFFFA0,
    0 0 5px #FFFF4D,
    0 0 9px #FFFF41,
    0 0 20px #FFFF2A,
    0 0 25px #FFFF2B,
    0 0 30px #FEFE00,
    0 0 40px #F7F700;
}

Efek Nyala Api

Efek nyala api pada teks dapat dibuat dengan cara yang hampir sama dengan efek teks menyala, hanya saja di sini offset sumbu Y dibuat negatif, sementara besar ukuran offset X dibebaskan seperti halnya dimensi nyala api yang tidak beraturan.

Hompimpa Alaihum Gambreng

h2 {
  background:black;
  color:black;
  text-shadow:
    0px 0px 4px #ccc,
    -1px -5px 4px #ff3,
    2px -10px 6px #fd3,
    -3px -15px 11px #f80,
    3px -18px 18px #f20;
}

Efek Cat Semprot

Efek cat semprot dibuat dengan cara membuat deret bayangan berwarna sama dengan menambahkan besaran angka tingkat blur sebesar 3 piksel pada masing-masing bayangan. Mengatur warna teks menjadi transparan serta mengatur offset sumbu X dan Y sembarang.

Hompimpa Alaihum Gambreng

h2 {
  background:#cac3b4;
  color:transparent;
  text-shadow:
    5px 5px 3px #414141,
    0px 7px 3px #414141,
    7px 0px 3px #414141,
    7px 0px 3px #414141,
    -4px 0px 3px #414141,
    0px 0px 20px #000;
}

Efek Teks Pelangi

Membuat efek teks pelangi dilakukan dengan cara menuliskan deret bayangan ke satu arah dengan menambahkan besaran angka offset sedikit demi sedikit pada masing-masing bayangan. Mengatur tingkat blur menjadi 0 piksel dan pemberian warna pelangi secara berurutan pada masing-masing deret bayangannya.

Hompimpa Alaihum Gambreng

h2 {
  background:#f5e6fe;
  color:#fff;
  text-shadow:
    -1px -1px 0px #ddd,
    2px 1px 0px #f93e47,
    4px 2px 0px #f59b0f,
    6px 3px 0px #f5dc0f,
    8px 4px 0px #19a305,
    10px 5px 0px #057fa3,
    12px 6px 0px #052aa3,
    14px 7px 0px #7605a3,
    14px 8px 2px #000,
    14px 5px 10px #000,
    14px 5px 25px #000;
}

Merotasi Objek dengan CSS3

Berikut ini adalah kode CSS dasar untuk membuat efek rotasi pada objek:

div {
  -webkit-transform:rotate(30deg); /* Safari dan Chrome */
  -moz-transform:rotate(30deg);    /* Firefox */
  -ms-transform:rotate(30deg);     /* IE9 */
  -o-transform:rotate(30deg);      /* Opera */
  transform:rotate(30deg);         /* W3C */
}

(30deg) adalah ukuran derajat rotasi. Kamu juga bisa menuliskan nilai derajat negatif untuk memutar objek ke arah sebaliknya. Cara penerapannya bisa diletakkan secara topdown ataupun inline seperti ini:

Top-Down	Inline
#contoh1 { -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); } ...... <div id='contoh1'> HASIL TAMPILAN </div>	<div style='-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-ms-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg);'> HASIL TAMPILAN </div>

HASIL TAMPILAN
DERAJAT POSITIF

HASIL TAMPILAN
DERAJAT NEGATIF

Membuat Efek Foto dengan CSS3

Cara untuk membuat efek ini sebenarnya sangatlah sederhana (lihat demo), yaitu hanya dengan memanfaatkan CSS Box Shadow dan CSS Transformasi 2 Dimensi.
Masuklah ke tab Rancangan kemudian pilih Edit HTML. Untuk membuat efek seperti dalam demo, kamu cukup menyalin kode CSS ini kemudian meletakkannya tepat di atas kode ]]></b:skin> atau </style>:

img.foto {
  background-color:#ffffff;
  border:0px;
  outline:none;
  padding:5px 5px 20px;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.7);
  box-shadow:0 1px 3px rgba(0,0,0,0.7);
}

img.foto:hover {
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  -ms-transform:rotate(5deg);
  -o-transform:rotate(5deg);
  transform:rotate(5deg);
}

Simpan templatemu.

Nah, untuk menerapkan efeknya, jangan lupa setiap kali kamu mengunggah gambar, terapkan class foto pada masing-masing tubuh tag <img> yang ada seperti ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-KzxqfN5tPCo/TjkBR2otlDI/AAAAAAAAAhQ/nlCzSobCnG8/s1600/Funny-Cats-cats-9474201-1600-1200.jpg"><img class="foto" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 240px;" src="http://4.bp.blogspot.com/-KzxqfN5tPCo/TjkBR2otlDI/AAAAAAAAAhQ/nlCzSobCnG8/s320/Funny-Cats-cats-9474201-1600-1200.jpg" alt="" id="BLOGGER_PHOTO_ID_5636537814866564146" border="0" /></a>

atau seperti ini:

<img class="foto"  src="http://4.bp.blogspot.com/-KzxqfN5tPCo/TjkBR2otlDI/AAAAAAAAAhQ/nlCzSobCnG8/s320/Funny-Cats-cats-9474201-1600-1200.jpg" alt="" />

Aturan Penulisan Selektor dalam CSS

Sebelum memasuki tabel, Saya jelaskan dulu istilah-istilahnya melalui contoh:

img {background:#EEEEEE; padding:5px;}
selektor {deklarasi1; deklarasi2;}
selektor {properti1:value1; properti2:value2;}

Selektor terdiri dari deklarasi-deklarasi yang dipisahkan dengan titik koma, setiap deklarasi adalah gabungan antara properti dengan value/nilainya. img adalah selektor, background dan padding adalah properti, #EEEEEE dan 5px adalah value. background:#EEEEEE; dan padding:5px; adalah deklarasi.
Suatu saat mungkin kalian juga akan melihat susunan kode yang tampak berbeda seperti ini:

img {
  background:#EEEEEE;
  padding:5px;
}

img
{
background:#EEEEEE;
padding:5px;
}

img {
  background : #EEEEEE;
  padding    : 5px;
}

img { background: #EEEEEE; padding: 5px; }

Apapun bentuk dan susunan kode yang akan kalian temui nantinya tidak akan mempengaruhi apapun.

Aturan Penulisan Selektor dalam Tag Murni

Untuk tag-tag dengan kondisi yang masih murni bisa kamu tuliskan apa adanya sesuai dengan nama tagnya seperti beberapa contoh berikut:

SELEKTOR	CONTOH KERANGKA	KETERANGAN
body {deklarasi}	<body>OBJEK</body>	Deklarasi akan mempengaruhi objek-objek di dalam wilayah kekuasaan <body>
a {deklarasi}	<a href='#'>OBJEK</a>	Deklarasi akan mempengaruhi objek-objek di dalam wilayah kekuasaan <a>
img {deklarasi}	<img src='hompimpa.jpg' />	Deklarasi akan mempengaruhi elemen gambar
ul {deklarasi}	<ul> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ul>	Deklarasi akan mempengaruhi semua elemen di dalam wilayah kekuasaan <ul>
ol {deklarasi}	<ol> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ol>	Deklarasi akan mempengaruhi semua elemen di dalam wilayah kekuasaan <ol>
li {deklarasi}	<ul> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ul> <ol> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ol>	Deklarasi akan mempengaruhi semua elemen <li> baik yang berada di dalam wilayah kekuasaan <ul> maupun <ol>
ul li {deklarasi}	<ul> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ul> <ol> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ol>	Deklarasi akan mempengaruhi elemen <li> di dalam wilayah kekuasaan <ul>, namun tidak akan mempengaruhi elemen <li> di dalam wilayah kekuasaan <ol>

Penulisan ID dan CLASS

Penulisan selektor ID harus diawali dengan prefiks #, sedangkan selektor CLASS harus diawali dengan prefiks .

SELEKTOR	CONTOH KERANGKA	KETERANGAN
#hompimpa {deklarasi}	<div id='hompimpa'> OBJEK </div>	Deklarasi akan mempengaruhi objek di dalam elemen yang memiliki ID hompimpa
.hompimpa {deklarasi}	<div class='hompimpa'> OBJEK </div>	Deklarasi akan mempengaruhi objek di dalam elemen yang memiliki CLASS hompimpa
span.hompimpa {deklarasi}	<div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span>	Deklarasi akan mempengaruhi objek di dalam wilayah kekuasaan <span> yang memiliki CLASS hompimpa, namun tidak akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang memiliki CLASS hompimpa
div.hompimpa {deklarasi}	<div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span>	Deklarasi akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang memiliki CLASS hompimpa, namun tidak akan mempengaruhi objek di dalam wilayah kekuasaan <span> yang memiliki CLASS hompimpa
div .hompimpa {deklarasi}	<div> <div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span> </div> <div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span>	Deklarasi akan mempengaruhi elemen apapun di dalam wilayah kekuasaan <div> induk, dimana elemen-elemen tersebut harus diketahui memiliki CLASS hompimpa. Elemen-elemen sejenis yang berada di luar <div> induk tidak akan ikut terpengaruh
div#hompimpa {deklarasi}	<div id='hompimpa'> OBJEK </div> <span id='hompimpa'> OBJEK </span>	Deklarasi akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang memiliki ID hompimpa, namun tidak akan mempengaruhi objek di dalam wilayah kekuasaan <span> yang memiliki ID hompimpa
div #hompimpa {deklarasi}	<div> <div id='hompimpa'> OBJEK </div> <span id='hompimpa'> OBJEK </span> </div> <div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span>	Deklarasi akan mempengaruhi elemen apapun di dalam wilayah kekuasaan <div> induk, dimana elemen-elemen tersebut harus diketahui memiliki ID hompimpa. Elemen-elemen sejenis yang berada di luar <div> induk tidak akan ikut terpengaruh
div span.hompimpa {deklarasi}	<div> <div id='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span> </div> <div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span>	Deklarasi akan mempengaruhi elemen <span> yang memiliki CLASS hompimpa di dalam elemen <div> induk, namun tidak akan mempengaruhi elemen <div> yang memiliki CLASS hompimpa yang berada di dalam elemen <div> induk. Elemen-elemen sejenis yang berada di luar <div> induk tidak akan ikut terpengaruh
#hompimpa {deklarasi}	<div id='hompimpa'> OBJEK </div> <div class='hompimpa'> OBJEK </div>	Deklarasi akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang memiliki ID hompimpa, namun tidak akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang memiliki CLASS hompimpa

Meringkas Beberapa Selektor bagi Elemen yang Memiliki Deklarasi Sama

Penulisan selektor dapat diringkas dengan memisahkannya menggunakan tanda koma untuk menggabungkan deklarasi-deklarasi yang sama.

SEBELUM DIRINGKAS	SESUDAH DIRINGKAS	CONTOH KERANGKA	KETERANGAN
h1 {color:green;} h2 {color:green;} h3 {color:green;}	h1, h2, h3 {color:green;}	<h1>OBJEK</h1> <h2>OBJEK</h2> <h3>OBJEK</h3>	Deklarasi color:green; akan mempengaruhi elemen <h1>, <h2> dan <h3>

Penulisan Selektor Atribut dalam CSS

Atribut tag HTML dalam selektor CSS dapat dituliskan dengan menutupinya menggunakan simbol [ dan ]

SELEKTOR	CONTOH KERANGKA	KETERANGAN
a[title] {deklarasi}	<a href='#' title='hag'>OBJEK</a> <a href='#'>OBJEK</a> <img src='hompimpa.jpg' title='hag' />	Deklarasi hanya akan mempengaruhi elemen <a> yang memiliki atribut title='' Elemen-elemen bukan <a> yang memiliki atribut title='' tidak akan ikut terpengaruh
input[type="button"] {deklarasi}	<input value='OBJEK' type='button' /> <input value='OBJEK' type='text' />	Deklarasi hanya akan mempengaruhi elemen <input> yang memiliki atribut type='button' Elemen-elemen <input> dengan atribut selain type='button' tidak akan ikut terpengaruh

Dua Metode Penulisan CSS

Ada dua metode penulisan dalam CSS, yaitu metode penulisan secara terpisah dengan memanfaatkan tag <style>, atau metode penulisan secara langsung dengan memanfaatkan atribut style=''

METODE PENULISAN SECARA TERPISAH DARI OBJEK SASARAN	METODE PENULISAN SECARA LANGSUNG PADA OBJEK SASARAN
<style type='text/css'> #hompimpa { proprti:value; properti:value; properti:value; } </style> .... .... <div id='hompimpa'> OBJEK </div>	<div style='properti:value;properti:value;proprti:value;'> OBJEK </div>

Penulisan CSS secara terpisah dilakukan dengan memisahkan objek sasaran dari selektor yang dituliskan sesuai dengan keadaan objek sasaran agar berfungsi. Tag <style> beserta komponen-komponen di dalamnya bisa diletakkan di mana saja, namun prosedur peletakkan yang benar adalah di dalam wilayah kekuasaan <head>, sementara objek sasarannya harus berada di dalam wilayah kekuasaan <body>.
Penulisan CSS secara langsung dilakukan dengan memasukkan deklarasi-deklarasi ke dalam atribut style='' tanpa menuliskan selektornya. Atribut class='' dan id='' sudah tidak penting lagi di sini, karena semua deklarasi sudah dituliskan secara langsung pada objek sasaran.

Langkah Pertama: Pemanggilan JQuery dan Paket Easing

Jika salah satu tutorial di situs ini memerintahkan kamu untuk mengunjungi halaman ini, maka kamu telah sampai di tempat yang tepat. Tapi jika kamu membuka halaman ini karena ketidaksengajaan atau mengira bahwa ini adalah salah satu halaman tutorial, maka kamu telah memasuki halaman yang salah. Halaman ini adalah salah satu bagian dari beberapa tutorial di blog ini. Saya sengaja memisahkannya mengingat ada beberapa tutorial yang selalu menggunakan perintah yang sama pada setiap awal langkah. Untuk menghindari duplikasi langkah, maka Saya memisahkan halaman ini dari halaman yang lainnya.
Salin script ini, kemudian letakkan tepat di atas kode </head> atau di bawah kode <head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js' type='text/javascript'></script>

Intinya adalah, jika suatu saat kamu merasa bahwa kamu pernah menjalani langkah tutorial seperti ini, maka kamu tidak perlu melakukannya lagi.
Perhatikan juga nama-nama berkasnya (bukan URLnya):

• jquery v-1.7.1
• jquery.easing.1.3

Teliti betul-betul isi templatmu. Jika ternyata templatmu sudah dilengkapi dengan skrip-skrip tersebut, maka kamu bisa menghapusnya salah satu. Kita cukup menggunakan satu skrip saja pada setiap jenisnya. Sekarang kamu bisa melanjutkan ke langkah berikutnya.

CSS Formulir Komentar untuk Blogspot

Berikut ini adalah sebuah tampilan formulir komentar yang sudah Saya obrak-abrik. Dengan memberikan tampilan yang berbeda pada formulir komentar di blogmu, tentunya akan membuat para pengunjung lebih tertarik untuk corat-coret:

Untuk membuat tampilan formulir komentar yang luar biasa dahsyat seperti gambar di atas, kamu hanya membutuhkan dua buah langkah perombakan kecil:

Masuk ke tab Rancangan, kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun widget posting tampil.

Pertama-tama, carilah sebuah elemen divisi yang tampak seperti ini:

<div class='comment-form'>

Tip: Tekan CTRL + F lalu ketik kode tersebut untuk mempermudah pencarian.

Ganti kode tersebut dengan ini:

<div class='blok-komentar'>

Setelah itu gulung layarmu ke atas, dan segera temukan kode ]]></b:skin> atau </style>.

Salin kode CSS ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

.blok-komentar {
  background-color:#becdd5;
  margin-left:10px;
  text-align:left;
  width:400px;
  border:5px solid #728a97;
  padding:10px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

.blok-komentar:hover {background-color:#e0d1e0}

Klik Simpan Template dan lihat hasilnya pada halaman posting.

Catatan: Pengeditan tampilan maksimal untuk formulir komentar memang hanya sebatas pada pewarnaan latar saja, sedangkan untuk penerapan CSS Button dan CSS Textarea tidak bisa diterapkan di sini. Hal itu terjadi karena formulir komentar Blogger pada dasarnya hanyalah berupa iframe yang diletakkan di bawah posting.

iframe merupakan portal untuk menampilkan halaman yang sebenarnya tidak berada dalam halaman yang sedang aktif. Hampir mirip dengan televisi. Hanya saja, ketika kita melihat seorang gadis cantik di televisi, kita tidak bisa melakukan apa-apa terhadap gadis tersebut. Berbeda jika kita melihat seorang gadis cantik dalam sebuah iframe. Saat kita melihatnya di dalam iframe, maka kita bisa melakukan apa saja terhadap gadis itu. Seperti menyentuh, menabrak, bahkan sampai mengobrak-abrik.

Intinya, CSS yang dideklarasikan di halaman induk tidak akan pernah bisa mempengaruhi formulir komentar karena formulir komentar tersebut pada dasarnya memang tidak berada di halaman tersebut.

Bahkan, dengan sebuah iframe Saya juga bisa menampilkan formulir komentar di tempat yang tidak semestinya seperti ini:

CSS Background, Cara Memodifikasi Latar Belakang Blog

Ini adalah penerapan CSS dasar untuk properti background. Saya harap kalian bisa cepat mengerti. Sebagai bahan praktek, Saya buat sebuah blog sederhana dengan background yang sangat miskin seperti ini:

Template dasar

Dalam tampilan tersebut tampak sebuah blog dengan latar belakang hijau. Untuk mengganti warna latar belakang, terkadang sebuah template sudah dilengkapi dengan variabel-variabel yang nantinya akan ditampilkan dalam halaman Perancang Template. Dari tempat itu kamu bisa dengan mudah menentukan warna latar belakang hanya dengan sekali klik:

Fitur Blogger: Template Designer

<Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#ffffff">

Tapi bagaimana jika templatemu ternyata tidak memiliki variabel tersebut? Satu-satunya jalan hanyalah dengan mengubah background secara manual, yaitu melalui halaman Edit HTML.

Untuk mengganti warna latar belakang melalui halaman Edit HTML, carilah sebuah grup kode yang tampak kurang lebih seperti ini:

body {
  margin:0;
  padding:0;
  border:0;
  text-align:center;
  color:$mainTextColor;
  background:#692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;
  font-size:small;
}

Tidak usah pedulikan kode apa saja yang ada di dalamnya, cukup fokus pada selektor body {} dan properti background.

Coba perhatikan kode ini:

background: #692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;

• #692 adalah warna background (aslinya #669922 tapi kode warnanya diringkas menjadi tiga digit angka).
• url(http://www.blogblog.com/moto_son/outerwrap.gif) adalah background image berupa potongan gambar yang jika ditampilkan akan terlihat seperti ini (klik!)
  Untuk menampilkan sebuah background image, caranya cukup dengan mengakses URL gambar tersebut.
• top center adalah posisi background. Dalam posisi horizontal (sumbu-X), background image tersebut ditempatkan rata atas atau top, sementara dalam posisi vertikal (sumbu-Y), background image tersebut ditempatkan rata tengah.
• repeat-y menunjukkan bahwa background tersebut akan diduplikasi secara vertikal mengikuti sumbu-Y. Cara ini digunakan untuk mengurangi besar gambar yang umumnya diterapkan dalam background image berupa gradient atau pattern.

Oke, sekarang kita mulai prakteknya. Kita tahu bahwa kode #692 merupakan warna hijau dalam blog kita. Jika kita ganti kode warna tersebut dengan #882222 misalnya, maka hasilnya akan menjadi seperti ini:

Modifikasi background warna

Sekarang kita coba untuk mengganti background imagenya. Ganti URL gambarnya dengan URL ini: http://2.bp.blogspot.com/-l0z0zMqI2_E/TgvtSDKcsoI/AAAAAAAAAVQ/YzrI83Qjcio/s1600/arsip.jpg lalu ganti kode repeat-y dengan repeat saja, sehingga background image akan diduplikasikan ke sumbu-X dan sumbu-Y seperti ini:

Modifikasi background image

Itu adalah sedikit cara untuk mengganti background image secara manual. Dan ingat, background image tersebut secara langsung diterapkan dalam latar belakang blog karena yang tadi kita utak-atik adalah format-format model yang berada di dalam selektor body {}. Jika kalian menerapkan praktek ini dalam selektor #outer-wrapper {} misalnya, maka kamu akan mendapatkan hasil seperti ini:

Selektor berbeda dan hasil yang berbeda

Saya mulai menulis tutorial CSS ini karena hari ini Saya mendapati seorang pembaca yang mengira bahwa template Saya ini adalah template hasil unduhan atau membeli dari sebuah situs. Padahal Saya mendesain template ini dengan memanfaatkan kerangka dari template Rounders bawaan dari Blogger.

Jika dilihat-lihat, memang masih tampak mirip kan?

Percepat Loading Blog dengan Plugin Lazyload

Pos ini sudah kadaluarsa. Peramban moderen sudah tidak bisa lagi membatalkan proses muat gambar meskipun plugin ini sudah melepaskan atribut src pada gambar. Satu-satunya cara yang bisa dilakukan untuk menggunakan plugin ini dengan benar adalah dengan meletakkan URL gambar asli pada atribut data-original. Itu artinya Anda harus mengubah semua URL gambar pada semua posting, dan itu tidak mungkin bisa dilakukan. Plugin ini tidak bisa hanya ditempel begitu saja:

Remove all code regarding placeholder and automatically removing src attribute. It does not work with modern browsers. Must use data-original attribute instead. — Changelog #1.6.0

Alternatif yang lebih sederhana untuk mengetahui cara kerja plugin ini bisa dibaca pada halaman ini ⇒ Lakukan Sesuatu Jika Elemen Mencapai Area Terlihat

Jika kalian mengunjungi Google untuk mencari gambar, mungkin kalian akan menemui situasi semacam ini saat hasil penelusuran gambar ditampilkan:

Halaman penelusuran gambar Google.

Itu adalah salah satu cara Google untuk mempercepat muat halamannya walau dengan hasil temuan gambar yang begitu banyak. Setiap gambar yang masih berada di bawah layar (sebut saja begitu) tidak akan diakses, melainkan hanya akan digantikan dengan sebuah gambar kelabu. Sampai sesaat kemudian layar digulung ke atas dan gambar-gambar kelabu di bawahnya muncul, gambar-gambar kelabu itupun akan menghilang lalu mengubah dirinya menjadi gambar yang asli. Dan, ya, itu adalah sistem Google yang sempat membuat Saya sangat terkesan. Dengan cara ini, maka kita tidak perlu lagi mengeklik tautan Halaman Sebelumnya atau Halaman Berikutnya, kita cukup menggulung layarnya saja ke atas dan gambar-gambar di halaman sebelumnyapun masih tetap ada pada tempatnya. Tidak perlu membolak-balik halaman, dan tentu saja itu akan lebih menghemat waktu dan biaya.

Anda juga bisa menerapkan sistem ini ke dalam blog. Diutamakan untuk blog-blog yang memiliki begitu banyak gambar dalam satu halaman. Percaya tidak percaya, sistem ini hanya melibatkan JQuery

Masuk ke tab Rancangan, kemudian pilih Edit HTML.

Pertama-tama, pastikan dulu bahwa blog Anda sudah dilengkapi dengan JQuery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Jika belum ada, salinlah skrip tersebut, kemudian letakkan di atas kode </head>

Setelah itu salin juga kode ini, lalu letakkan tepat di bawah skrip tadi:

<script src='http://reader-download.googlecode.com/svn/trunk/lazyload.js' type='text/javascript'></script>
⇒ https://github.com/tuupola/jquery_lazyload/commit/3f123e96020e9678af15bbf57bf0787339c8eaa5
<script type='text/javascript'>
$(function() {
  $('img').lazyload({
    placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
    effect      : "fadeIn",
    threshold   : 500
  });
});
</script>

Klik Simpan Template dan selesai sudah.

Anda lihat URL gambar yang Saya beri tanda itu? Itu adalah gambar kelabu yang Saya maksud. Coba saja akses URL tersebut, Saya jamin Anda tidak akan mememukan apapun kecuali hanya sebuah titik kelabu. Ya, itu adalah gambarnya. Ukurannya hanya 1 × 1 piksel, jadi tidak akan memberatkan.

Artikel/Posting Terkait dengan atau tanpa Scroll Bar

Jika kalian merasa tidak suka dengan gaya artikel/posting terkait dengan gambar/thumbnail, berikut ini adalah model elemen posting terkait berbentuk daftar yang lebih sederhana dan praktis:

Untuk membuatnya, ikutilah langkah-langkah kebenaran Saya ini:

• Masuk ke tab Rancangan, kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
• Salin kode pemodel ini, kemudian letakkan di atas kode </style> atau ]]></b:skin>:
  
  

  #mamas-topik {
    margin-top:100px;
    clear:both;
    display:block;
  }
  
  .paling-ganteng {
    border:2px solid #666;
    padding:5px;
    background-color:#efefef;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -webkit-box-shadow:inset 0 0 7px #666;
    -moz-box-shadow:inset 0 0 7px #666;
    box-shadow:inset 0 0 7px #666;
  }
  
  .paling-ganteng:hover {background:#f9f9f9;}
  
  .sedunia {
    padding:10px;
    border:1px solid #bbb;
    height:165px;
    overflow:auto;
  }

• Setelah itu salin juga kode ini:
  
  

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='mamas-topik'>
  <h2>Tutorial Sejenis:</h2>
  <div class='paling-ganteng'>
  <div class='sedunia'>
  <div id='hompimpa'/>
  <script type='text/javascript'>
  var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
  var maxNumberOfPostsPerLabel = 7;
  var maxNumberOfLabels = 10;
  maxNumberOfPostsPerLabel = 50;
  maxNumberOfLabels = 7;
  function listEntries10(json) {
  var ul = document.createElement(&#39;ul&#39;);
  var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
  json.feed.entry.length : maxNumberOfPostsPerLabel;
  for (var i = 0; i &lt; maxPosts; i++) {
  var entry = json.feed.entry[i];
  var alturl;
  for (var k = 0; k &lt; entry.link.length; k++) {
  if (entry.link[k].rel == &#39;alternate&#39;) {
  alturl = entry.link[k].href;
  break;
  }
  }
  var li = document.createElement(&#39;li&#39;);
  var a = document.createElement(&#39;a&#39;);
  a.href = alturl;
  if(a.href!=location.href) {
  var txt = document.createTextNode(entry.title.$t);
  a.appendChild(txt);
  li.appendChild(a);
  ul.appendChild(li);
  }
  }
  for (var l = 0; l &lt; json.feed.link.length; l++) {
  if (json.feed.link[l].rel == &#39;alternate&#39;) {
  var raw = json.feed.link[l].href;
  var label = raw.substr(homeUrl3.length+13);
  var k;
  for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
  var txt = document.createTextNode(label);
  var h = document.createElement(&#39;b&#39;);
  h.appendChild(txt);
  var div1 = document.createElement(&#39;div&#39;);
  div1.appendChild(h);
  div1.appendChild(ul);
  document.getElementById(&#39;hompimpa&#39;).appendChild(div1);
  }
  }
  }
  function search10(query, label) {
  var script = document.createElement(&#39;script&#39;);
  script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
  + label +
  &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
  script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
  document.documentElement.firstChild.appendChild(script);
  }
  var labelArray = new Array();
  var numLabel = 0;
  <b:loop values='data:posts' var='post'>
  <b:loop values='data:post.labels' var='label'>
  textLabel = &quot;<data:label.name/>&quot;;
  var test = 0;
  for (var i = 0; i &lt; labelArray.length; i++)
  if (labelArray[i] == textLabel) test = 1;
  if (test == 0) {
  labelArray.push(textLabel);
  var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
  labelArray.length : maxNumberOfLabels;
  if (numLabel &lt; maxLabels) {
  search10(homeUrl3, textLabel);
  numLabel++;
  }
  }
  </b:loop>
  </b:loop>
  </script>
  </div>
  </div>
  </div>
  </b:if>

  
  Kemudian letakkan tepat di bawah kode yang tampak seperti ini:
  
  <data:post.body/>
  
  atau seperti ini:
  
  <p><data:post.body/></p>
  
  atau seperti ini:
  
  <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
  
  
• Klik Simpan Template dan lihat hasilnya (pada halaman item).

Sedikit Penyesuaian:

• Ganti kode yang Saya beri warna merah (Saya harap Anda tidak buta warna) dengan judul yang kalian inginkan.
• Di situ juga terdapat beberapa variabel yang bisa kalian utak-atik, tapi Saya rasa itu tidak telalu penting. Langsung simpan saja.
• Jika kalian tidak menghendaki scroll bar dalam elemen ini, hapus saja deklarasi overflow:auto; dan ganti value 165px dalam properti height: dengan auto sehingga hasilnya menjadi seperti ini:
  
  

  .sedunia {
    padding:10px;
    border:1px solid #bbb;
    height:auto;
  }

  
  Dengan begitu tampilan scroll bar akan hilang, sementara tinggi artikel/posting terkaitmu akan menyesuaikan diri dengan banyaknya daftar yang ada di dalamnya.

Daftar CSS Desain Button dari Berbagai Situs

Berikut ini adalah daftar CSS Button yang bisa kamu terapkan dalam blogmu. Beberapa Saya desain sendiri, dan beberapa lagi adalah hasil mengambil dari desain situs-situs yang Saya kunjungi. Halaman ini akan terus bergerak dan akan terus diperbaharui andaikan Saya mendapatkan kesempatan untuk hidup lebih lama (dramatis). Oke ini dia...

Daftar CSS Button untuk Kerangka Dasar:

<input value="Button" type="button">
<input value="Submit" type="submit">
<input value="Reset" type="reset">
<button>Tag Button</button>

Mirip Tuts+ Premium

/* Tuts+ */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  cursor:pointer;
  border:1px solid #e7a943;
  border-bottom-color:#d6982f;
  border-top-color:#f5b74e;
  color:#623f1d;
  font-size:12px;
  font-weight:bold;
  line-height:12px;
  padding:10px 18px;
  text-decoration:none;
  text-shadow:0 1px 0 #fede9d;
  -webkit-box-shadow:0px 1px 2px #d9d9d9, inset 0px 1px 0px #ffe598;
  -moz-box-shadow:0px 1px 2px #d9d9d9, inset 0px 1px 0px #ffe598;
  box-shadow:0px 1px 2px #d9d9d9, inset 0px 1px 0px #ffe598;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border-radius:20px;
  background-color:#feda71;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#feda71), to(#febb49));
  background-image:-webkit-linear-gradient(top, #feda71, #febb49);
  background-image:-moz-linear-gradient(top, #feda71, #febb49);
  background-image:-ms-linear-gradient(top, #feda71, #febb49);
  background-image:-o-linear-gradient(top, #feda71, #febb49);
  background-image:linear-gradient(top, #feda71, #febb49);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#feda71', EndColorStr='#febb49');
  outline:none;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background-color:#fee296;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#fee296), to(#fec166));
  background-image:-webkit-linear-gradient(top, #fee296, #fec166);
  background-image:-moz-linear-gradient(top, #fee296, #fec166);
  background-image:-ms-linear-gradient(top, #fee296, #fec166);
  background-image:-o-linear-gradient(top, #fee296, #fec166);
  background-image:linear-gradient(top, #fee296, #fec166);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#fee296', EndColorStr='#fec166');
}

Mirip CSS-TRICKS (2011)

/* CSS-TRICKS */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  display:inline-block;
  position:relative;
  padding:7px 15px;
  -webkit-border-radius:18px;
  -moz-border-radius:18px;
  border-radius:18px;
  font:15px/1.4 "myriad-pro-1","myriad-pro-2","Lucida Grande",Sans-Serif;
  background-color:#b6d3f4;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#b6d3f4), to(#5483b8)) !important; 
  background-image:-webkit-linear-gradient(top, #b6d3f4, #5483b8) !important; 
  background-image:-moz-linear-gradient(top, #b6d3f4, #5483b8) !important; 
  background-image:-ms-linear-gradient(top, #b6d3f4, #5483b8) !important; 
  background-image:-o-linear-gradient(top, #b6d3f4, #5483b8) !important; 
  color:white !important;
  -webkit-box-shadow:inset 0 1px 1px white,0 3px 3px rgba(0,0,0,0.6);
  -moz-box-shadow:inset 0 1px 1px white,0 3px 3px rgba(0,0,0,0.6);
  box-shadow:inset 0 1px 1px white,0 3px 3px rgba(0,0,0,0.6);
  border:1px solid #9ac9ff !important;
  font-weight:600;
  text-shadow:0 -1px 0 rgba(0,0,0,0.3);
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  -webkit-box-shadow:inset 0 2px 6px white,0 3px 3px rgba(0,0,0,0.6);
  -moz-box-shadow:inset 0 2px 6px white,0 3px 3px rgba(0,0,0,0.6);
  box-shadow:inset 0 2px 6px white,0 3px 3px rgba(0,0,0,0.6);
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  -webkit-box-shadow:inset 0 2px 6px white,0 1px 1px rgba(0,0,0,0.6);
  -moz-box-shadow:inset 0 2px 6px white,0 1px 1px rgba(0,0,0,0.6);
  box-shadow:inset 0 2px 6px white,0 1px 1px rgba(0,0,0,0.6);
  top:2px;
}

Mirip Buyatoyota.com

/* Buy A Toyota */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  outline:none;
  cursor:pointer;
  text-decoration:none;
  font:bold 70% Verdana,sans-serif;
  text-transform:uppercase;
  padding:3px 10px 4px;
  text-shadow:1px 1px 2px #17703e;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  color:#fff;
  border:1px solid #17793E;
  background:#17793E url('http://1.bp.blogspot.com/-GX5RKsbVap0/TkDsfUXdcAI/AAAAAAAAApw/bRikIRqTrFY/s1600/buyatoyota.png') repeat-x;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  opacity:0.9;
  filter:alpha(opacity=90);
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  position:relative;
  top:1px;
}

Mirip Abu Farhan

/* Abu Farhan */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  outline:none;
  cursor:pointer;
  text-decoration:none;
  font:14px/100% Arial,Helvetica,sans-serif;
  padding:.5em 2em .55em;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
  -webkit-border-radius:.5em;
  -moz-border-radius:.5em;
  border-radius:.5em;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow:1px 1px 4px #AAAAAA;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
  color:#fef4e9;
  border:2px solid white !important;
  background:#f78d1d;
  background:-webkit-gradient(linear,left top,left bottom,from(#faa51a),to(#f47a20));
  background:-moz-linear-gradient(top,#faa51a,#f47a20);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',endColorstr='#f47a20');
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  text-decoration:none;
  background:#f47c20;
  background:-webkit-gradient(linear,left top,left bottom,from(#f88e11),to(#f06015));
  background:-moz-linear-gradient(top,#f88e11,#f06015);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',endColorstr='#f06015');
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  position:relative;
  top:1px;
  color:#fcd3a5;
  background:-webkit-gradient(linear,left top,left bottom,from(#f47a20),to(#faa51a));
  background:-moz-linear-gradient(top,#f47a20,#faa51a);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',endColorstr='#faa51a');
}

Biru Segar

/* Biru Segar */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  font:normal 0.9em Arial,Sans-Serif;
  background:url('http://1.bp.blogspot.com/-i8a-1q97r_o/ThQRxeTBjzI/AAAAAAAAAZQ/YfCsBiEpQwI/s1600/button.png') repeat-x;
  border:0;
  padding:5px 10px;
  color:#fff;
  text-shadow:0 1px 2px #222;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  box-shadow:0 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background-position:0 -9px;
  color:#fff;
  text-decoration:none;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  background:#000;
  outline:none;
}

Mirip Setting AddThis

/* AddThis */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:url('http://2.bp.blogspot.com/-NUbFYgrfMZw/Tf_5hAd49GI/AAAAAAAAATY/FDzgMXQvKlQ/s1600/tombol.gif') repeat-x scroll 0 0 #EDEDED;
  border:1px solid #B7B7B7;
  padding:8px 22px;
  color:#000;
  text-shadow:0 1px 2px #fff;
  -webkit-box-shadow:0 1px 2px #ccc;
  -moz-box-shadow:0 1px 2px #ccc;
  box-shadow:0 1px 2px #ccc;
  -webkit-border-radius:16px;
  -moz-border-radius:16px;
  border-radius:16px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background-position:0 -35px;
  background-color:#DFDFDF;
  border-color:#AFAFAF;
  color:#000;
  cursor:pointer;
  text-decoration:none;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  background-position:0 -70px;
  background-color:#D4D3D3;
  outline:medium none;
}

Mirip Yahoo!

/* Yahoo! */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#fa2 url('http://3.bp.blogspot.com/-OWOuIfroX6k/ThUdocPWgtI/AAAAAAAAAZw/jGjdN5POwmQ/s1600/yahoo.jpg') repeat-x;
  padding:3px 7px;
  border:1px solid #644e12;
  text-decoration:none;
  color:#000;
  font:bold 0.9em Arial,Sans-serif;
  cursor:pointer;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  opacity:0.9;
  filter: alpha(opacity=90);
}

Mirip Google

/* Google */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#ccc url('http://3.bp.blogspot.com/-EjKdL802bcA/ThUhSH3XEkI/AAAAAAAAAZ4/h_4Vu7imfys/s1600/buttongoogle.jpg') repeat-x;
  padding:5px 10px;
  border-width:1px;
  border-style:solid;
  border-color:#dfdfdf #aaa #aaa #dfdfdf;
  text-decoration:none;
  color:#000;
  font:normal 0.9em Arial,Sans-Serif;
  -webkit-box-shadow:1px 1px 0 #eee;
  -moz-box-shadow:1px 1px 0 #eee;
  box-shadow:1px 1px 0 #eee;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  background:#aaa;
  border:1px solid #999;
}

Mirip Blogger (2010)

/* Blogger */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#6598FF url('http://1.bp.blogspot.com/-qOzc14mMCBM/ThU480aWdhI/AAAAAAAAAbA/VpYEc0XpRUo/s1600/bloggerbiru.jpg') repeat-x;
  border:1px solid #003399;
  padding:3px 7px;
  font:bold 12px Arial,sans-serif;
  color:#fff;
  text-transform:uppercase;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
}

input[type="submit"],
button {
  background:#FF7602 url('http://3.bp.blogspot.com/-Dsbg9WwDuq4/ThU4_uxFFnI/AAAAAAAAAbI/1ZdGECVZtaI/s1600/bloggeroren.jpg') repeat-x;
  border:1px solid #662f00;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  border:1px solid #000;
}

Mirip Facebook

/* Facebook */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#6079AB url('http://1.bp.blogspot.com/-qqIWi8HlrT0/ThUXzdggHfI/AAAAAAAAAZo/yG6zvJe1Igk/s1600/butonfbbiru.jpg') repeat-x;
  border:1px solid #29447E;
  border-bottom-color:#1A356E;
  padding:2px 5px 4px;
  font:bold 11px Tahoma,Verdana,Arial,sans-serif;
  color:#fff;
  -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2);
  box-shadow:0 1px 0 rgba(0,0,0,0.2);
  cursor:pointer;
}

input[type="submit"],
button {
  background:#67A54B url('http://2.bp.blogspot.com/-Svb_PRzSLuE/ThUWJnJs8cI/AAAAAAAAAZg/u5Qu-m9mNqQ/s1600/facebookbutton.jpg') repeat-x;
  border:1px solid #3B6E22;
  border-bottom-color:#2C5115;
  padding:5px 10px 6px;
}

Kinclong Menginclong

/* Kinclong Menginclong */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#135295 url('http://4.bp.blogspot.com/-zsVYM7TZ5MY/ThUopiHuKoI/AAAAAAAAAaA/5t2_qiAVKcU/s1600/menu_hover.gif') repeat-x;
  border:0;
  padding:4px 7px;
  font:bold 11px Verdana,Arial,Sans-Serif;
  color:#c1e5ec;
  -webkit-box-shadow:0 1px 3px #000;
  -moz-box-shadow:0 1px 3px #000;
  box-shadow:0 1px 3px #000;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  opacity:0.7;
  filter: alpha(opacity=70);
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  color:#f9d2f4;
}

Tombol Hitam untuk Blog Hitam

/* Hitam untuk Hitam */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#333;
  border:0;
  padding:5px 7px;
  font:bold 11px Verdana,Arial,Sans-Serif;
  color:#91dd4b;
  -webkit-box-shadow:0 1px 3px #000;
  -moz-box-shadow:0 1px 3px #000;
  box-shadow:0 1px 3px #000;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background:#284918;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  background-color:#fff;
  color:#b82354;
}

Hover Menyala

/* Hover Menyala */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  font:bold 12px Verdana,Arial,Sans-Serif;
  padding:3px 15px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 1px 3px #000;
  -moz-box-shadow:0 1px 3px #000;
  box-shadow:0 1px 3px #000;
  color:#999;
  border:5px outset #444 !important;
  background:#444;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  -webkit-box-shadow:0 1px 5px #d0fbf7,0 1px 15px #d0fbf7,0 1px 25px #d0fbf7;
  -moz-box-shadow:0 1px 5px #d0fbf7,0 1px 10px #d0fbf7,0 1px 25px #d0fbf7;
  box-shadow:0 1px 5px #d0fbf7,0 1px 10px #d0fbf7,0 1px 25px #d0fbf7;
  color:#fff;
}

Janda Kembang

/* Janda Kembang */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  font:normal 12px Arial,Sans-Serif;
  padding:3px 15px;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
  -webkit-border-radius:.5em;
  -moz-border-radius:.5em;
  border-radius:.5em;
  -webkit-box-shadow:0 1px 3px #666;
  -moz-box-shadow:0 1px 3px #666;
  box-shadow:0 1px 3px #666;
  color:#fff;
  border:2px solid #e9e9e9 !important;
  background:#8899d0;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  -webkit-transform:rotate(-10deg);
  -moz-transform:rotate(-10deg);
  -ms-transform:rotate(-10deg);
  -o-transform:rotate(-10deg);
  transform:rotate(-10deg);
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  -webkit-transform:rotate(10deg);
  -moz-transform:rotate(10deg);
  -ms-transform:rotate(10deg);
  -o-transform:rotate(10deg);
  transform:rotate(10deg);
  background:#8899a0;
}

Apel Anemia

/* Apel Anemia */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:url('http://4.bp.blogspot.com/-ZwWV6WKSrj8/ThexOzGH6aI/AAAAAAAAAdI/6xfWx5zt-aA/s1600/apelanemia.jpg') repeat-x;
  border:0;
  padding:3px 15px 4px;
  font:bold 11px Verdana,Arial,sans-serif;
  color:#f3fcd5;
  text-shadow:0 1px 2px #222;
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
  border-radius:15px;
  -webkit-box-shadow:0 1px 3px #aaa;
  -moz-box-shadow:0 1px 3px #aaa;
  box-shadow:0 1px 3px #aaa;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background-position:0 -7px;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  background-position:bottom;
}

Pelajari tutorial awalnya di sini

CSS Input Text dan Textarea

Satu lagi penerapan CSS dalam elemen-elemen input. Sekarang Saya akan memberikan beberapa tip untuk tampilan input text dan textarea.
Ini adalah contoh tampilan input text dan textarea biasa:

Tanpa CSS

Dan ini adalah CSS untuk mengubah tampilannya:

input[type="text"] {
  font:normal 12px Verdana,Sans-Serif;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
  -webkit-box-shadow:inset 0 0 5px #666;
  -moz-box-shadow:inset 0 0 5px #666;
  box-shadow:inset 0 0 5px #666;
  padding:2px;
}

textarea {
  font:bold 12px Verdana,Sans-Serif;
  border:5px solid #dcdcdc;
  background-color:#fafafa;
  -webkit-box-shadow:inset 0 0 5px #666;
  -moz-box-shadow:inset 0 0 5px #666;
  box-shadow:inset 0 0 5px #666;
  padding:2px;
}

input[type="text"]:focus,
textarea:focus {
  background-color:#FFE4B5;
}

Letakkan kode tersebut di atas </style> atau ]]></b:skin> maka tampilannya akan berubah seperti ini:

Dengan CSS

Dari penampilan kode ini Saya rasa kalian sudah mengerti maksudnya.

input[type="text"] { ... }

textarea { ... }

Nah, untuk kode yang terakhir itu digunakan untuk membuat tampilan warna textarea dan input text menjadi berubah ketika kursor sedang aktif di dalamnya.

input[type="text"]:focus,
textarea:focus {
  background-color:#FFE4B5;
}

CSS Textarea Focus

Pemahaman Dasar CSS Input Button dan Tag Button

Beberapa dari kalian mungkin merasa bosan dengan tampilan button di halaman blogmu yang tidak bisa menyesuaikan diri dengan tampilan blogmu seperti ini:

Tanpa CSS

Masalahnya, mungkin kalian belum tahu seperti apa format CSS untuk tampilan button ini. Nah, di sini Saya akan menjelaskan tentang teknik dasar dalam mengubah tampilan button di blogmu.
Ini adalah contoh CSS sebuah input button dan tag button dasar (di sini Saya menyamakan tampilan antara button, submit dan reset agar lebih efisien):

input[type="button"],
input[type="submit"],
input[type="reset"],
button { 
  font:normal 0.9em Arial,Sans-Serif; 
  background-color:#4169E1; 
  border:1px solid #B7B7B7; 
  padding:2px 7px; 
  color:#fff; 
}

Letakkan saja CSS tersebut di atas kode </style> atau ]]></b:skin>, maka tampilan tombol-tombol di blogmu akan berubah seperti ini:

Dengan CSS

Namun itu saja sepertinya masih kurang. Kita juga perlu menerapkan event hover dan active pada tombol-tombol tersebut agar tampak lebih agresif dan bikin nafsu para pengunjung untuk memencet. CSS lanjutannya adalah seperti ini:

/* warna background saat pointer di atasnya */ 
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover { 
  background-color:#A52A2A; 
} 

/* warna background saat tombol ditekan */ 
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active { 
  background-color:#000; 
}

Jika kedua event tersebut telah diterapkan, maka hasilnya akan tampak seperti ini:

Saat HOVER

Saat ACTIVE

Kita ketahui dari kode ini bahwa terdapat lima properti yang umum digunakan, yaitu:

• font: (mode tampilan (bold normal atau italic), ukuran font dan jenis font)
  
• background: (warna latar belakang)
  
• padding: (jarak antara batas terluar sebuah area dengan kontennya)
  
• color: (warna teks) dan
• border: ukuran garis tepi, tipe garis tepi dan warna garis tepi).
  

Dan ini adalah contoh kerangkanya:

<input value="Button" type="button"/> 
<input value="Submit" type="submit"/> 
<input value="Reset" type="reset"/> 
<button>Tag Button</button>

Tentu saja, itu semua hanya sebagian kecil dari penerapan CSS dalam tombol. Suatu saat mungkin kamu menginginkan tampilan-tampilan tombol yang lebih dahsyat seperti ini, ini, ini atau ini:





Tapi bagaimana?? (Klik di sini!)