Monday, December 31, 2012

Membuat Animasi Gear Berputar CSS

Posted by dav On 2:01 AM
Tutorial Cara Membuat Animasi Gear Berputar dengan CSS - Tutorial mudah bagaimana cara membuat animasi gear yang berputar memanfaatkan script dan code CSS. Anda perlu Upload sebuah image misalnnya sebuah Gambar gear untuk membuatnya.


Misalnya menggunakan Gambar diatas untuk dibuat berputar, anda bisa mencari gambar lainya dan dikombinasikan sehingga putarannya bisa seperti berantai.

Berikut ini script Membuat Animasi Gear Berputar CSS
HTML
<div class="gear" id="gear1"></div>
CSS
/* CSS3 keyframes aregnoz.blogspot.com */
@-webkit-keyframes ckw {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes ckw {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes cckw {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes cckw {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}
/* gears aregnoz.blogspot.com*/
.gear {
    float: none;
    position: absolute;
    text-align: center;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#gear1 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji8qYBl57iKy_Pa8qKZ7G2WBBp50Embljt0suVcafRKmC9udtoAnxL9TRgFldNx9WJcR-sTouKo1gYhyphenhyphenAaV-2SFJ1_OW6eJMqkdvEXOcsj5wuY6-MS1QHpROvenXcXyYHC2ciwaI7uWSUG/s1600/gear.png') no-repeat 0 0;
    height: 130px;
    left:10px;
    top: 10px;
    width: 130px;
    -moz-animation-name: cckw;
    -moz-animation-duration: 16.84s;
    -webkit-animation-name: cckw;
    -webkit-animation-duration: 16.84s;
}
​Information !!! Tulisan dengan Background Merah silahkan Anda ganti dengan link Gambar Anda.


Selamat Mencoba.

Membuat Animasi Loading Yin Yang CSS

Posted by dav On 1:39 AM
Membuat Animasi Loading Yin Yang menggunakan CSS - Animasi ini berbentuk Yin Yang menggunakan CSS dan bisa anda gunakan juga untuk Loading Blog Anda. Untuk pembuatannya anda bisa melihat script berikut ini, yaitu tentang Membuat Animasi Loading Yin Yang dengan CSS.
Membuat Animasi Loading Yin Yang CSS
Membuat Animasi Loading Yin Yang CSS
Berikut ini script yang bisa Anda gunakan
HTML

<div class="yinyang">
</div>
CSS

.yinyang {
    background: none repeat scroll 0 0 #EEEEEE;
    border-color: #121212;
    border-radius: 100%;
    border-style: solid;
    border-width: 2px 2px 50px;
    height: 48px;
    position: relative;
    width: 96px;
    /* css3 animation */
    -webkit-animation: anim4 1s linear infinite;
    -moz-animation: anim4 2s linear infinite;
    -ms-animation: anim4 1s linear infinite;
    -o-animation: anim4 1s linear infinite;
    animation: anim4 1s linear infinite;
}
.yinyang:before {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 18px solid #121212;
    border-radius: 100%;
    content: "";
    height: 12px;
    left: 0;
    position: absolute;
    top: 50%;
    width: 12px;
}
.yinyang:after {
    background: none repeat scroll 0 0 #000;
    border: 18px solid #EEEEEE;
    border-radius: 100%;
    content: "";
    height: 12px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 12px;
}
/* css3 keyframes - animation 4 */
@-webkit-keyframes anim4 {
    from { -webkit-transform: rotateZ(0deg); }
    50% { -webkit-transform: rotateZ(180deg); }
    to { -webkit-transform: rotateZ(360deg); }
}
@-moz-keyframes anim4 {
    from { -moz-transform: rotateZ(0deg); }
    50% { -moz-transform: rotateZ(180deg); }
    to { -moz-transform: rotateZ(360deg); }
}
@-ms-keyframes anim4 {
    from { -ms-transform: rotateZ(0deg); }
    50% { -ms-transform: rotateZ(180deg); }
    to { -ms-transform: rotateZ(360deg); }
}
@-o-keyframes anim4 {
    from { -o-transform: rotateZ(0deg); }
    50% { -o-transform: rotateZ(180deg); }
    to { -o-transform: rotateZ(360deg); }
}
@keyframes anim4 {
    from { transform: rotateZ(0deg); }
    50% { transform: rotateZ(180deg); }
    to { transform: rotateZ(360deg); }
}​

Demonya seperti dibawah ini


Oke selamat mencoba.

Friday, November 16, 2012

Verifikasi Blog ke Akun Pinterest

Posted by dav On 1:51 PM
Bismillah. Alhamdulillah. Pada tanggal 24 Oktober 2012, pihak Pinterest mengumumkan penambahan fasilitas terbarunya yaitu verifikasi website yang ditulis pada halaman support.pinterest.com. Jika diterjemahkan secara bebas pengumuman itu berbunyi "Akun dengan situs terverifikasi berarti telah mengkonfirmasi kepemilikan situs web mereka menggunakan proses verifikasi otomatis yang kami sediakan. Situs terverifikasi menetapkan hubungan antara situs web dengan akun di Pinterest. Akun dengan situs terverifikasi ditandai dengan tanda centang yang ditampilkan disamping alamat situs web di halaman profil mereka dan di bawah nama mereka dalam hasil pencarian."
Verifikasi Blogger ke Akun Pinterest

Kesulitan Verfikasi Pengguna Blogger

Bagi para pengguna hosting berbayar, proses verifikasi blog atau situs ke akun Pinterest tidaklah terlalu sulit. Namun bagi para pengguna blog gratisan terutama pengguna Blogger (a.k.a Blog*spot) hal ini cukuplah rumit. Karena ada beberapa kesulitan dan persyaratan untuk melakukan verifikasi blog ke akun Pinterest, diantaranya:
  • Pinterest tidak menyediakan teknik verifikasi melalui meta tag tetapi menggunakan file tersendiri yang disediakan pihak Pinterest.
  • File verfikasi harus diupload pada root dan bukan pada subfolder (subdirectory) di halaman blog atau situs yang anda kelola.
  • Link atau URL halaman verifikasi dari pihak Pinterest yang telah diupload pada blog harus dapat diakses dengan lokasi seperti ini "http://www.contoh.com/pinterest-45776.html" dan tidak boleh dalam lokasi lain, misal "http://www.contoh.com/p/pinterest-45776.html" atau "http://www.contoh.com/blog/pinterest-45776.html"
Namun bukan berarti tidak ada jalan untuk melakukan proses verifikasi blog ke akun Pinterest, seperti pepatah "Banyak jalan menuju ke Roma". Sedankan bagi para pengguna hosting berbayar, silahkan mengikuti petunjuk yang telah disediakan pihak Pinterest pada artikel mereka berjudul "How do I verify my website?".

Verifikasi Pinterest untuk Pengguna Blogger

Kenapa pihak Pinterest menggunakan satu metode saja dalam melakukan verifikasi blog? Dan kenapa tidak menggunakan metode sisipan Meta Tag seperti halnya pihak-pihak lain? Entahlah, itu semua kebijakan mereka. Kita hanya pengguna yang cukup senang dengan layanan gratis Pinterest. Bagi para pengguna blog gratisan terutama pengguna Blogger, silahkan ikuti langkah dibawah ini dalam melakukan proses verifikasi blog ke akun Pinterest.
Langkah 1
Login ke Pinterest
Langkah 2
Masuk ke menu Setting Profile
Verifikasi Blogger ke Akun Pinterest
Langkah 3
Scroll halaman sampai ditemukan lokasi Website. Isi dengan alamat blog anda, kemudian klik tombol "Verify Website"
Verifikasi Blogger ke Akun Pinterest
Langkah 4
Sebuah halaman proses verifikasi terbuka, kemudian cari link pada bagian "Can I verify?" kemudian klik link pada kalimat "click here for instructions"
Verifikasi Blogger ke Akun Pinterest
Langkah 5
Sebuah informasi langkah verfikasi terbuka, yang terdiri dari 3 langkah. Klik link "Download the HTML verification file" kemudian simpan file tersebut pada komputer anda
Verifikasi Blogger ke Akun Pinterest
Langkah 6
Buka file hasil unduhan (misal; pinterest-45776.html) menggunakan native text editor (misal; notepad)
Langkah 7
Login ke Blogger
Langkah 8
Masuk ke dasbor blog dan pilih menu "Laman"
Langkah 9
Klik menu "Laman Baru" dan klik "Laman kosong" untuk membuat sebuah halaman baru pada blog
Verifikasi Blogger ke Akun Pinterest
Langkah 10
Teks Editor Blogger terbuka. Isi judul halaman sesuai dengan nama file hasil unduhan dari Pinterest (misal; pinterest-45776). Hati-hati! Jangan disertakan ekstensi file-nya, misal; jangan diberi judul "pinterest-45776.html", cukup "pinterest-45776". (Nama file berbeda-beda sesuai dengan pemberian dari pihak Pinterest)
Verifikasi Blogger ke Akun Pinterest
Langkah 11
Pindahkah mode teks editor blog ke mode HTML, jangan di mode Compose. Copy file unduhan yang telah dibuka menggunakan notepad tadi, dan paste pada isi halaman di teks editor blog.
Langkah 12
Klik tombol "Publikasikan"
Langkah 13
Buka blog anda pada tab baru dan pastikan halaman yang baru saja diterbitkan tersedia. misal;
http://contoh.blogspot.com/p/pinterest-45776.html
Langkah 14
Jika halaman yang baru saja diterbitkan sudah tersedia, kembali ke dasbor blog. Pilih menu "Setelan" dan pilih submenu "Preferensi penelusuran"
Langkah 15
Masuk ke bagian "Kesalahan dan Pengalihan" kemudian klik link "Edit" pada bagian "Pengalihan Khusus"
Verifikasi Blogger ke Akun Pinterest
Langkah 16
Tambahkah link pengalihan. Misal:
Dari: /pinterest-45776.html
Kepada: /p/pinterest-45776.html
Proses pengalihan ini ditujukan agar Pinterest tidak menuju kehalaman yang salah. Jika halaman tidak dialihkan, maka Pinterest akan menampilkan "error 404" yang berarti halaman tidak ditemukan.
Langkah 17
Klik link "Simpan" dan klik tombol "Simpan perubahan"
Langkah 18
Buka halaman baru pada blog anda dengan menuliskan alamat URL sesuai dengan pengalihan, misal;
http://contoh.blogspot.com/pinterest-45776.html
Maka halaman harus dialihkan menuju ke:
http://contoh.blogspot.com/p/pinterest-45776.html
Langkah 19
Jika halaman verifikasi tersebut sudah terbuka pada blog anda, scroll halaman hingga ditemukan tombol merah "Go To Pinterest" dan kemudian klik tombol tersebut
Verifikasi Blogger ke Akun Pinterest
Langkah 20
Halaman verifikasi seperti sebelumnya akan terbuka kembali, kemudian klik link "Click here to complete the process"
Verifikasi Blogger ke Akun Pinterest
Langkah 21
Tunggu sebentar karena Pinterest sedang melakukan proses verifikasi pada blog kita. Jika proses verifikasi berhasil maka akan muncul keterangan "We successfully verified your website!". Hal ini berarti proses verifikasi blogger pada ke akun Pinterest berhasil.
Verifikasi Blogger ke Akun Pinterest
Langkah 22
Klik link "Go to your profile" untuk memastikan bahwa tanda centang (checklist) telah tampil disamping URL blog pada halaman profile Pinterest anda.
Verifikasi Blogger ke Akun Pinterest
Langkah 23
Pastikan lagi bahwa tanda cheklist tampil disamping URL blog anda dibawah photo profile dengan melakukan pencarian dengan kata kunci nama anda pada halaman Pinterest
Verifikasi Blogger ke Akun Pinterest
Langkah 24
Jika tampil berarti anda telah berhasil. Waktunya untuk ngopi sinambi leyeh-leyeh ngrungokno ladrang jowo...

Kesimpulan

Proses verifikasi blog ke akun Pinterest telah berhasil dan mudah-mudahan berhasil. Jika sudah berhasil waktunya kita memikirkan "Untuk apa proses verifikasi ini? Apakah berpengaruh terhadap posisi blog kita dimata mesin pencari?" Entahlah... Kita hanya menikmati dan menjalani proses sebagai seorang penulis dan pengelola blog, mengenai manfaat jelas ada namun mungkin belum kita rasakan...
Selamat mencoba dan semoga berhasil. Happy blogging :)

Sunday, October 28, 2012

Tutorial Install JomSocial Indonesia

Posted by dav On 4:42 PM
Tutorial Install JomSocial Indonesia - Cara Install JomSocial 2.5 / Versi Selanjutnya. Pada dasarnya menginstall Jomsocial masih sama dengan cara menginstall CMS Jomla pada umumnya. Oke, lebih baiknya mungkin anda bisa menyimak gambar-gambar berikut ini :

Tutorial Install JomSocial Indonesia
Tutorial Install JomSocial Indonesia
Sebelumnya Anda harus sudah menginstall joomla terlebih dahulu, sehingga nantinya akan bisa memanfaatkan JomSocial ini.

1. Setelah Anda download jomSocial silahkan extrak All dahulu
Tutorial Install JomSocial Indonesia

2. Misalnya anda ingin menggunakan com_community_[version].zip' untuk installanya
Tutorial Install JomSocial Indonesia


3. Silahkan Anda install seperti biasanya yang seperti pada di joomla, anda bisa menggunakan XAMPP /localhost jika ingin mengeditnya dulu atau langsung anda upload pada Hosting.


Oke, sekarang kita lanjut ke Tahap selanjutnya dalam penginstalan di hosting.
1. Silahkan Log in ke Administrator Area dan menuju ke Site > Sistem Information > Directory Permission 
Tutorial Install JomSocial Indonesia

Tutorial Install JomSocial Indonesia

2. Kemudian silahkan ke Extention Manager dan broser file kamu yang sudah unzip tadi


3. Silahkan Anda pilih Next > Next beberapa kali




Alternative Install JomSocial
1. Extrak Comunity Joomla/ file yang sudah Di Download tadi...


2. Kemudial Upload lewat FTP Client misal menggunakan FileZille

3.  Pilih Extension Manager

Selesai

Jika anda berhasil maka akan tampil seperti ini.
Tutorial Install JomSocial Indonesia

Semoga Bermanfaat
+++++++++++++++++++++++++++++++++++++++++++++++++

Monday, October 15, 2012

Bismillah. Alhamdulillah. Cukup lumayan lama pernulis bermain-main dengan kosakata dalam bahasa CSS sehingga memunculkan berbagai keinginan, baik keinginan dalam mengikuti perkembangan bahasa CSS untuk mengenalinya lebih jauh, maupun keinginan cara penulisan kosakata CSS yang lebih mudah dan cepat. Kemudian penulis melakukan penelusuran untuk mencari alat atau perangkat lunak yang bisa digunakan dalam menulis kosakata bahasa CSS dengan lebih cepat dari pada cara primitif, awal pencarian ditemukanlah bahasa SASS (Syntactically Awesome Stylesheets) yang merupakan cikal bakal dari pengembangan bahasa-bahasa Preprocessor Dynamic Stylesheet, namun SASS ternyata kurang bersahabat bagi mereka-mereka yang belum terbiasa dengan Ruby atau Compass. SASS dikembangkan oleh Hampton Catlin yang terinspirasi dari bahasa Haml (HTML abstraction markup language) yang juga dikembangkan oleh pengembang SASS. Penelusuran dilanjutkan dan bertemulah dengan LESS yang dibuat dan dikembangkan oleh Alexis Sellier atau lebih dikenal dengan cloudhead. Ternyata selain LESS ada juga bahasa Preprocessor CSS lainnya yaitu Stylus.

Apa Preprocessor LESS?

LESS sebenarnya merupakan salah satu pengembangan bahasa CSS, namun bukan pada sisi penambahan fungsi, property maupun value, LESS lebih ke kemudahan dan kecepatan penulisan bahasa CSS yang telah ada. Boleh dikatakan, bahwa LESS hanyalah sebuah cara penulisan CSS pra pengolahan (seperti halnya bahasa side server; php, asp) yang digunakan sebagai jembatan antara CSS dengan browser. Awalnya penulis beranggapan bahwa LESS merupakan saingan bahasa CSS, namun ternyata anggapan tersebut keliru. Kemudian anggapan ini berubah menjadi, bahwa LESS merupakan bahasa penyempurnaan dari beberapa kelemahan bahasa CSS, dan jelas itu juga keliru. Lalu apa LESS?
LESS adalah preprocessor (pra pengolahan) yang merupakan cara lain dalam menuliskan kosakata CSS, penulisan menggunakan bahasa preproccesed (pra olah/mentah) dan kemudian dikonversi (compile) ke dalam bahasa CSS murni baik dengan cara dikonversi langsung kedalam bahasa CSS murni maupun tanpa dikonversi dengan menambahkan mesin side server LESS agar browser mampu mengkonversinya. Jika kita biasanya menulis bahasa CSS secara manual, LESS selangkah lebih maju dan lebih modern dari cara penulisan kosakata bahasa CSS yang primitif. Namun bukan berarti LESS merupakan tool layaknya teks editor, justru LESS dapat dituliskan pada hampir semua teks editor murni (Native Text Editor). LESS merupakan tata cara atau aturan penulisan cepat kosakata bahasa CSS dan kemudian dikonversi serta disusun ulang menjadi bahasa CSS murni sesuai dengan aturan baku bahasa CSS yang bisa dirender oleh browser. LESS lebih fleksibel dan dinamis, karena kita bisa menggunakan bahasa sendiri dalam penulisannya sebagai variabel, interpolasi, nesting, mixin, operasi dan fungsi, namun demikian property dan value harus tetap sesuai aturan bahasa CSS. (Masih bingung?)

Kenapa Menggunakan Preprocessor CSS?

Karena ini bukan CSS, maka tidak terikat dengan aturan baku dan keterbatasan CSS. LESS membuat cara menulis CSS menjadi sangat mudah dan sederhana. CSS sebenarnya sudah bagus dan hebat, tetapi CSS tidak memberikan kita kebebasan berekspresi dalam penulisannya. Misal, banyak para developer dan desainer menginginkan abstraksi lebih bebas dari pada CSS default. Salah satu tujuan dari CSS adalah untuk memberikan kemudahan dan kesederhanaan sehingga siapapun dapat dengan cepat menangkap bahasa yang digunakan dan mempelajarinya. Namun fokus tersebut justru membatasi apa yang lebih dapat dilakukan pengembang CSS, dan pada umumnya kita tidak menyukai keterbatasan. Kita membutuhkan variabel yang lebih luas, dan jika CSS tidak mampu memberikan variabel tersebut, kita akan mencari cara untuk membuat varibel yang lebih mendekati kebutuhan kita. Preprocessor menawarkan lebih dari sekedar variabel yang tersedia, sehingga kita bisa bebas berkarya selama file CSS yang dihasilkan tetap sebagai karya CSS biasa. Anda tidak harus menggunakan preprocessor dalam menuliskan CSS, namun suatu hari akan banyak orang yang kemudian belajar menggunakannya sehingga menjadi terbiasa dengan preprocessor karena mereka menemukan kemudahan dan kesederhanaan dalam menulis CSS dari pada tanpa preprocessor. Dan banyak yang kemudian enggan untuk kembali menulis CSS dengan cara biasa lagi. (Masih bingung?)

Kemungkinan Masalah Preprocessor CSS

Pada artikelnya yang berjudul "January’s 12412: Researching LESS & SASS", Amber Weinberg mengangkat tema mengenai kemungkinan masalah yang muncul dalam penggunaan preprocessor. Dari beberapa komentar yang ditinggalkan sepertinya telah banyak pengguna LESS yang telah jatuh hati dan merasa lebih nyaman menggunakan bahasa preprocessor. Namun kemungkinan masalah penggunaan preprocessor CSS memang perlu untuk diangkat sebagai sebuah perbandingan sebelum anda mengambil kesimpulan untuk menggunakannya.
Masalah yang mungkin timbul dari penggunaan preprocessor CSS menurut Amber antara lain:
  • Apa yang terjadi jika pengembang lain perlu mengedit CSS dan tidak tahu atau menyadari penggunaan preprocessor pada situ yang dikelolanya?
  • Ketika menulis CSS dalam sebuah tim, bagaimana Anda mengontrol struktur dan pengorganisasian dari kode?
  • Apa yang terjadi jika JavaScript dinon-aktifkan?
Isu dari masalah diatas adalah kesulitan mengkomunikasikan antara satu pengembang dengan pengembang lain terutama bagi mereka yang bekerja dalam sebuah tim. Ketika anda menggunakan bahasa fleksibel sesuai keinginan anda sendiri, belum tentu anggota tim lain akan mampu memahaminya dengan cepat, justru hal ini akan menjadi kendala ketika pekerjaan kita merupakan pesanan klien. Sedangkan klien yang membeli karya kita mempekerjakan orang lain dalam pemeliharaannya. Namun, masalah ini hanya muncul apabila kita menggunakan metode side server (menggunakan file JavaScript LESS sebagai compiler) dalam mengkonversi LESS. Toh, ini tidak akan menjadi kendala apabila LESS dikonversi terlebih dahulu secara lokal (pada komputer kita) menjadi file CSS biasa dan baru kita menyerahkan file CSS biasa tersebut kepada klien atau anggota tim lain. Dan atau untuk menghindari kesulitan komunikasi antara anggota tim, dibuat kesepakatan bersama mengenai penggunaan bahasa LESS dalam kerja tim kita. Namun, isu masalah ini akan tetap menjadi kendala ketika kita harus merubah suatu kebiasaan dan ketika anggota tim lain tidak bersedia untuk beralih menggunakan preprocessor LESS.
Jadi, semua ini kembali pada diri kita sendiri. Tetap menuliskan CSS seperti biasa, atau mulai menggunakan preprocessor LESS agar lebih cepat dan sederhana dalam penulisannya?

Compiler Preprocessor LESS

Sebagai permulaan untuk memahami LESS, kita akan belajar menuliskan LESS dan mengkonversinya menjadi file CSS biasa secara lokal saja. Jika anda menelusuri situs resmi LESS, maka akan ditemukan dua metode konversi file LESS, yaitu:
  • Penggunaan Client-Side; Dengan memasang file less.js pada dokumen HTML. Less.js digunakan sebagai compiler agar browser mampu membaca file LESS, kemudian Less.js akan melakukan permintaan fungsi Ajax untuk memanggil file LESS anda. Hal ini sangat tidak efisien dalam hal kinerja dan harus dihindari dalam penggunaan hasil produksi. Apalagi jika JavaScript dinon-aktifkan, maka halaman anda akan hancur berantakan. Tetapi jika anda ingin menggunakan sebagai prototype dengan menggunakan LESS dengan cepat, hal ini syah-syah saja.
  • Penggunaan Server-Side; dengan cara meng-install NPM (Node Package Manager) atau Ruby pada komputer sebagai compiler. Namun jika anda tidak terbiasa dengan penggunaan perintah command-line, maka hindari juga menggunakan cara ini. Walaupun sebernarnya cara ini sangat efisien bagi yang terbiasa dengan perintah command-line.
  • Aplikasi GUI Compiler LESS; Selain dengan dua metode diatas, kita ternyata bisa menulis LESS secara lokal (komputer sendiri) dan kemudian mengkonversinya menjadi CSS standar dengan bantuan aplikasi compiler LESS. Aplikasi-aplikasi Compiler LESS bisa dilihat dan dipilih pada bagian berikutnya.

Aplikasi GUI Compiler LESS

Beberapa aplikasi yang disebutkan, digunakan sebagai Compiler LESS, sehingga kita bisa langsung mengkonversi file LESS menjadi file CSS standar. Bahkan contoh yang disertakan bisa langsung dirender melalui browser, atau bisa di-compile menggunakan aplikasi dibawah ini:
  • Crunch; Merupakan rekomendasi penulis, karena; tampilannya yang sederhana, berjalan disemua sistem operasi, menggunakan framework AdobeAIR, dapat langsung digunakan sebagai teks editor.
  • SimpLESS; Aplikasi GUI ini hampir mirip dengan Crunch hanya saja tidak bisa digunakan sebagai teks editor. SimpLESS hanyalah compiler, namun mampu berjalan pada semua sistem operasi.
  • WinLESS; Aplikasi ini juga hanya compiler saja, tanpa kemampuan Text Editor, hanya berjalan pada Sistem Operasi Microsoft Windows, namun dapat diintegrasikan dengan Teks Editor.
  • Compass; Aplikasi ini banyak digunakan para pengembang profesional, hanya untuk preprocessor SASS, berjalan pada semua sistem operasi, namun tidak gratis alias berbayar.
  • Codekit; aplikasi GUI Compiler Preprocessor khusus untuk pengguna Mac dan rekomendasi para pengembang preprocessor karena kemampuannya dalam menulis dan mengkonversi hampir semua preprocessor (SASS, LESS, Stylus).
  • Scout; aplikasi ini berjalan disemua sistem operasi, open-source, namun saya belum mencobanya (silahkan dicoba).
  • LiveReload; aplikasi GUI Compiler Preprocessor ini banyak diceritakan dan digunakan para pengembang, berjalan pada sistem operasi Mac dan Windows, dan belum tersedia untuk pengguna sistem operasi Linux.

Dasar Penulisan Preprocessor LESS

Bagaimana dengan persiapan awal sebelum belajar menulis LESS? Jika sudah siap, dibawah ini tidak akan diberikan contoh yang panjang lebar hingga memusingkan, namun kita akan mencoba memahami dasar-dasar dari LESS. Contoh dibawah ini lebih baik anda coba tulis sendiri sehingga terlihat hasilnya. Kemudian pahami dengan baik, agar kita mampu merasakan manfaat dan perbedaannya antara menulis CSS biasa dengan menulis LESS.

Integrasi Compiler Side-Client

Contoh penggunaan LESS akan dibahas secara terstruktur hingga menghasilkan suatu objek tertentu dan contoh yang akan dibahas menggunakan metode kompilasi Side-Client (Unduh file contoh terlebih dahulu sebagai pembanding). Ini berarti file LESS tidak perlu di-compile menggunakan aplikasi yang disebutkan diatas, karena kita akan menggunakan less.js sebagai compiler dengan proses konversi secara langsung pada browser (gunakan browser Firefox untuk melihat hasilnya, karena browser lain kurang bahkan tidak mendukung metode side-client untuk LESS).
Sisipkan link file .less pada dokumen HTML anda dengan setting rel dengan stylesheet/less
<link rel="stylesheet/less" type="text/css" href="style.less">
Unduh file less.js dan masukan pada dokumen HTML anda
<script src="less-1.3.0.min.js" type="text/javascript"></script>
Pastikan bahwa file stylesheet ditempatkan sebelum script, sehingga persiapan awal dokumen kurang lebih menjadi seperti dibawah ini:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less-1.3.0.min.js" type="text/javascript"></script>
</head>
<body>

</body>
</html>
style.less merupakan file yang akan kita kembangkan sebagai contoh pada langkah berikutnya. Ini berarti anda harus mempersiapkan Text Editor untuk menulis file HTML dan LESS.

Skenario HTML

Jika compiler side-client sudah tersedia pada tag <head>, mari kita lanjutkan untuk mempersiapkan elemen objek HTML, seperti dibawah ini:
<div id="WadahObjek">
<div class="objek" id="objekSatu"></div>
<div class="objek" id="objekDua"></div>
<div class="objek" id="objekTiga"></div>
</div>

Skenario LESS

Setelah dokumen HTML dibuat seperti diatas, sekarang bukalah text editor anda dan buatlah file style.less. Kemudian berikan sentuhan style untuk objek yang telah dibuat pada HTML. Kita tuliskan CSS Standar dulu seperti dibawah ini:
body {
background:#262626;
}
#WadahObjek {
margin:0 auto;
width:650px;
}
.objek {
display:inline-block;
width:150px;
height:150px;
background:#191919;
margin:25px;
}
Browser akan menampilkan objek dengan bentuk kurang lebih seperti dibawah ini:
Hmmm... Tidak ada yang spesial dari contoh kode CSS diatas, karena itu masih CSS standar walau sudah ditulis sebagai file LESS. Coba anda bayangkan, jika kita suka dengan warna #191919 untuk digunakan pada beberapa tempat yang tersebar disepanjang stylesheet dengan jumlah baris hampir 1000? Melelahkan sekali bukan? Lalu, setelah semua baris itu beres ditulis secara manual, tiba-tiba kita ingin mengubah warna tersebut dengan warna lain atau mengganti warna dengan sebuah perpaduan warna. Sungguh sangat melelahkan!

Variable

Variabel memungkinkan anda untuk menentukan suatu nilai yang dituliskan dalam satu tempat, dan kemudian menggunakannya disepanjang stylesheet, membuat perubahan global semudah mengubah satu baris kode.
Perhatikan kode LESS dibawah ini:
@WarnaDasar: #262626;
@WarnaSatu: #191919;
@TinggiLebar: 150px;

body {
background: @WarnaDasar;
}
#WadahObjek {
margin: 0 auto;
width: 650px;
}
.objek {
display: inline-block;
width: @TinggiLebar;
height: @TinggiLebar;
background: @WarnaSatu;
margin: 25px;
}
Perhatikan bahwa kita hanya perlu sekali menuliskan variable @WarnaDasar dengan nilai #262626. Ketika kita ingin melakukan perubahan warna maka hanya cukup merubah nilai pada variable @WarnaDasar saja. Lebih mudah dan cepat bukan?
Variabel LESS biasa dideklarasikan dengan simbol "@". Kita bisa memberikan nama variabel sesuai dengan keinginan kita dan atau dengan alasan kemudahan untuk mengingat, kemudian kita berikan nilainya. Setelah itu kita dapat merujuk nama variabel yang telah dibuat untuk ditempatkan dimana saja. Keren bukan?!

Ketika anda compile menggunakan Aplikasi GUI Compiler LESS (misal; Crunch) maka akan dihasilkan kode CSS standar seperti dibawah ini:
body{
background:#262626;
}
#WadahObjek{
margin:0 auto;
width:650px;
}
.objek{
display:inline-block;
width:150px;
height:150px;
background:#191919;
margin:25px;
}
Jika anda ganteng pasti anda paham...

Mixin

Mixin memungkinkan kita untuk menanamkan sifat-sifat kelas ke dalam kelas lain dengan hanya memasukan salah satu nama kelas. Hampir sama seperti halnya variabel, tetapi keseluruhan sifat kelas akan mempengaruhi kelas lainnya. Mixin juga dapat berperilaku seperti fungsi, dan mengambil argumen. Masih bingung? Lanjut...!
Anda tahu bagaimana cara membuat lingkaran untuk objekSatu? Cukup dengan mengeset radius border sebesar-besarnya seperti contoh dibawah ini:
#objekSatu{
border-radius:9999px;
}
Maka browser akan menampilkan objek dengan bentuk kurang lebih seperti dibawah ini:
Namun harus diingat sejak penggunaan CSS3, jika ingin objek tersebut dapat ditampilkan sempurna pada semua browser maka kita harus menambahkan vendor prefix -webkit- dan -moz- sebagai cara terbaik. Maka kurang lebih kita bisa menuliskannya seperti dibawah ini:
#objekSatu{
-webkit-border-radius:9999px;
-moz-border-radius:9999px;
border-radius:9999px;
}
Hmmm... Bagaimana jika ada objek lingkaran lain yang jumlahnya banyak dan harus diberi sifat serta vendor prefix sama seperti itu? Misal 20 objek lingkaran... Huh!!! Sangat melelahkan...
Tenang... LESS membuat pendefinisian mixin menjadi lebih sederhana dan mudah. Pendefinisian mixin pada LESS sebenarnya hampir sama dengan bahasa pemrograman lainnya. Penulisan mixin LESS hampir sama dengan CSS standar terutama dalam penggunaan grup CSS. Hampir sama dengan penulisan variabel, hanya saja kita menggunakan simbol "." (titik) untuk mendeklarasikan mixin, seperti contoh dibawah ini:
@bulatan: 9999px;

.SudutBulat {
-webkit-border-radius: @bulatan;
-moz-border-radius: @bulatan;
border-radius: @bulatan;
}

#objekSatu {
.SudutBulat;
}
Dan sekarang, kita hanya cukup memasangkan .SudutBulat pada semua objek yang akan dibuat lingkaran tanpa perlu menambahkan sifat-sifatnya (border-radius dan vendor prefix) lagi. Jika suatu hari kita ingin mengubah nilai bulatan, cukup ganti nilai pada variabel @bulatan maka semua objek yang memiliki sifat sama akan ikut berubah tanpa harus diubah satu persatu. Kereeeeennn!!! Namun hati-hati jangan sampai terjadi bentrok dengan class milik CSS. Memang cukup sulit untuk membedakannya, namun saya yakin anda paham maksud penggunaan mixin pada LESS.

Parametric Mixin

Penambahan parametric mixin membuat penulisan sifat-sifat kelas menjadi lebih fleksibel. Parametric mixin merupakan cara penyisipan dan atau penambahan sifat baru dari sifat mixin yang telah ada tanpa mempengaruhi mixin asal. Bingung lagi ya???
Ayo kita lanjutkan lagi... objekSatu telah diberi sifat lingkaran, dan kita ingin membuat sudut rounded dengan radius baru pada objekDua, namun dengan tetap memanfaatkan sifat-sifat yang sudah tersedia pada mixin objekSatu, sehingga kita tidak perlu membuat mixin baru. Bagaimanakah caranya? Perhatikan deklarasi parameter dibawah ini:
@bulatan: 9999px;

.SudutBulat (@radius: @bulatan){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
Pendeklarasian parametrik mixin yaitu dengan menambahkan tanda kurung "( )" setelah nama mixin. Didalam tanda kurung tersebut kemudian ditambahkan variabel. Variabel pada contoh diatas menggunakan nama variabel @radius yang memiliki nilai sama dengan variabel @bulatan yaitu 9999px. Kemudian nilai-nilai pada mixin diubah dengan variabel @radius, ini berarti nilai default dari variabel @radius adalah 9999px, namun ini bersifat default yang bisa saja nilai variabel @radius tersebut diganti sesuai kebutuhan. Tambah bingung ya? Perhatikan penggunaan mixin dibawah ini:
#objekSatu {
.SudutBulat;
}

#objekDua {
.SudutBulat(30px);
}
Perhatikan dengan seksama, bahwa objekSatu menggunakan variabel @radius dengan nilai default yaitu 9999px. Hal ini karena nilainya tidak diubah. Sedangkan pada objekDua nilai untuk variabel @radius diubah menjadi 30px. Sehingga nilai default untuk variabel @radius akan diubah menjadi 30px dan diberlakukan hanya untuk objekDua. Sehingga objekDua jika ditampilkan pada browser akan tampak seperti dibawah ini:
Mudah-mudahan paham maksud dari Parametric Mixin, jika anda paham maka tambah ganteng...

Operasi

Salah satu fitur hebat LESS lainnya adalah kemampuan untuk menggunakan operasi matematika didalam stylesheet. Mungkin kedengarannya sangat membosankan jika sudah berhubungan dengan matematika, namun hal ini sangatlah bagus untuk LESS. Operasi memberikan keleluasaan menambah, mengurangi, membagi dan mengalikan nilai properti dan warna, memberikan Anda kekuatan untuk menciptakan hubungan yang kompleks antar sifat. Bagaimana operasi matematika digunakan pada LESS?
Pada contoh terdapat 3 objek yang sudah kita berikan gaya tertentu, namun belum ditambahkan garis bingkai (border) dan warna garis bingkai (border color) pada objek tersebut. Misal;

  • Kita ingin menentukan tebal garis bingkai sebesar 5% dari tinggi atau lebar objek,
  • Kita ingin menentukan warna garis bingkai

Maka kita tuliskan operasi matematiknya kedalam stylesheet, seperti dibawah ini:
@TebalGaris: @GarisTepi * 0.05;
Kemudian warna garis diambil dari perkalian variabel @WarnaTiga dengan 3, seperti dibawah ini:
@WarnaTiga: #111;
@WarnaGaris: @WarnaTiga * 3;
atau
@WarnaGaris: @WarnaTiga * #222;
Awalnya memang cukup membingungkan, namun saya yakin anda akan memahami setelah melakukan beberapa kali uji coba. Harus diingat bahwa; menambahkan atau mengurangi dengan #000 tidak akan memberikan efek, dan penggunaan #fff merupakan efek masimal.
Setelah kita menentukan variabel untuk garis bingkai maka kita bisa menerapkannya pada garis bingkai seperti dibawah ini:
border: @TebalGaris solid @WarnaGaris;
Sehingga objek akan menjadi seperti gambar dibawah ini:
Mudah bukan? Khusus untuk warna, kita bisa menggunakan fungsi saturasi yang lumayan cukup rumit dan kompleks.

Fungsi Warna

LESS menyediakan beberapa fungsi warna berikut ini:

  1. darken() dan lighten(), digunakan untuk menambahkan warna hitam dan putih (lebih gelap dan lebih terang)
  2. saturate() dan desaturate(), untuk menentukan sebuah warna lebih "berwarna" atau "grayscale"
  3. fadein() dan fadeout(), untuk menambah atau mengurangi transparansi
  4. spin(), digunakan untuk memodifikasi rona (hue) warna

Jika, misal, kita ingin membuat warna garis pinggir (border color) menjadi desaturasi untuk mendapatkan warna yang mendekati grayscale, maka kita bisa menggunakan desaturate seperti dibawah ini:
@WarnaGaris: desaturate(@WarnaTiga, 100%);
Bahkan kita bisa memanfaatkan output dari hasil operasi suatu warna kedalam operasi warna lainnya, seperti dibawah ini:
@WarnaGaris: darken(desaturate(@WarnaTiga, 100%),20%;
Semua operasi warna bisa menggunakan warna (Hex) atau persentase sebagai parameternya, kecuali spin. spin menggunakan bilangan bulat (integer) antara 0 sampai dengan 255 dan tidak menggunakan persentase untuk memodifikasi rona (hue) warna, misal:
@WarnaGaris: spin(@WarnaTiga, 100);

Nested Rule

Ketika kita merancang suatu halaman web yang kompleks menggunakan CSS, kadang kita akan dihadapkan pada seleksi berantai (atau ada yang menyebutnya parent child, ada yang menyebutnya pewarisan) untuk elemen tertentu dalam DOM. Nested Rule didalam LESS digunakan untuk menyederhanakan penulisan nama selektor yang panjang menjadi lebih sederhana dan mudah. Didalam LESS kita bisa menempatkan suatu selektor didalam selektor lainnya. Hal ini membuat pewarisan (nest) menjadi lebih jelas dan lebih pendek. Dibawah ini contoh pewarisan atau pengelompokan CSS standar:
#header {
border-width: 1px
}
#header h1 {
font-size: 20px;
font-weight: bold;
color: #ddd
}
#header h1 a {
text-decoration: none;
}
#header h1 a:hover {
color: #dfe
border-width: 2px
}
Perhatikan contoh kode penulisan CSS standar diatas. Sebenarnya ketika kita menuliskan turunan selektor yang hanya satu atau dua turunan, hal ini masih dipahami dan mengerti dengan baik. Namun ketika jumlah selektor turunan dari selektor utama sudah mencapai 4 sampai 5 selektor, masalah sudah mulai bermunculan, dari mulai penulisan yang lebih panjang, dan visualisasi penyusunan hirarki yang tidak nyaman dilihat alias berantakan. Dengan LESS kita dengan mudah menuliskan pengelompokan utama dan kemudian menuliskan turunannya didalam kelompok utama. Misal, kode contoh diatas kita modifikasi menjadi aturan pewarisan LESS dengan meniru struktur DOM, sehingga menjadi seperti dibawah ini;
#header {
border-width: 1px;
h1 {
font-size: 20px;
font-weight: bold;
color: #ddd;
a {
text-decoration: none;
&:hover {
color: #dfe;
}
}
}
}
Jika kita perhatikan contoh kode aturan pengelompokan LESS diatas, ada satu bagian yang berbeda dalam penulisan pseudo-class. Untuk penulisan pseudo-class kita menggunakan simbol "&" yang bisa berarti "ini" atau "dan".
Namun, Nested Rule untuk preprocessor LESS berefek pada kenyamanan penulisan sintak didalam teks editor. Ketika saya mulai menuliskan sintak-sintak CSS dengan prepocessor LESS, hampir semua teks editor yang digunakan tidak mampu menampilkan visualisasi syntax-highlighter yang nyaman untuk diperhatikan, terutama dari sisi pewarnaan sintak, saya bahkan merasa pewarna sintak LESS sangat kacau ketika menggunakan pseudo-class. Ini menjadi perkerjaan rumah para pengembang plugin teks editor untuk menciptakan syntax-highlighter khusus preprocessor LESS.
Crunch sepertinya memang diciptakan khusus untuk Teks Editor LESS dan Compiler LESS, dan untuk hari ini bagi anda yang ingin belajar menulis preprocessor LESS, saya merekomendasikan aplikasi GUI LESS yang satu ini. Nyaman, ringan, mengenal syntax LESS dengan baik, compiler terintegrasi, dan terintegrasi debug untuk mengetahui kesalahan penulisan.

Mengimpor File LESS

Akhirnya, ini biasanya dilakukan sebagai langkah terakhir yaitu dengan mengimpor file LESS. Membagi file-file LESS sesuai dengan penggolongan tertentu adalah cara terbaik dari pada Anda harus menuliskannya hingga 5000 baris dalam satu file.
Mengimpor satu file ke file lainnya didalam LESS sangatlah sederhana, yaitu:
@import "warna.less";
Bahkan kita dapat menghilangkan ekstensi LESS dengan hanya menuliskan:
@import "warna";
Kita dapat membagi-bagi file LESS sesuai relevansinya menjadi beberapa file terpisah. Mungkin kita bisa saja menggolongkan file-file LESS itu menjadi seperti dibawah ini:
  • CSS Reset atau Normalize
  • Warna
  • Huruf dan tipografi
  • Elemen-elemen UI
  • Style utama halaman
  • ...dan pengelompokan lain secara relevan sesuai aturan yang tergantung pada proyek Anda
Sebagai contoh, anda dapat melihat bagaimana developer Twitter Bootstrap membagi-bagi file LESS kedalam beberapa file sesuai kelompoknya. Hal seperti ini akan terlihat lebih profesional dan lebih mudah dalam pengelolaan.
Anda mungkin berfikir bahwa menggunakan metode impor justru akan meningkatkan HTTP Request yang tidak perlu sehingga akan memperlambat waktu load halaman anda, dan itu betul! Namun kita harus ingat bahwa yang akan kita gunakan adalah file LESS sebagai bahan mentah yang kemudian dikonversi sehingga menjadi file CSS biasa. Jika kita memahami dengan baik, maka tidak peduli lagi, akan seberapa banyak file-file LESS itu digolongkan dan dipisahkan, karena pada akhirnya, semua bagian-bagian file LESS tersebut akan digabungkan menjadi satu file CSS baru melalui impor. Jadi, jangan takut melakukan impor. Karena hal ini akan sangat membantu kita dalam penyusunan struktur kode pada proyek yang sedang kita kerjakan.

Kesimpulan

Begitulah kurang lebih tentang Preprocessor LESS dan penulis secara pribadi berharap bahwa setelah menulis dan atau membaca artikel yang panjang lebar ini, kemudian berkembang minat para pengembang CSS di Indonesia untuk mulai menggunakan bahasa LESS. Saya merasa bahwa LESS telah melakukan perubahan cukup besar dalam tata cara penulisan bahasa Stylesheet.
Jika anda merasa tidak puas dengan artikel diatas, silahkan kunjungi dokumen resmi LESS untuk memeriksa kemungkinan terjadi perubahan yang lebih menarik. Selain itu, karena LESS dikembangkan sebagai Open Source anda bisa bergabung dan terlibat didalamnya. Anda bisa melaporkan masalah yang ditemukan (bug), pencabangan (fork), atau sekedar memantau (watch) perkembangan terbarunya melalui GitHub.
Terima kasih atas waktu dan kesempatannya untuk membaca artikel ini (yang ditulis hampir 1 minggu), semoga ada manfaat yang bisa diambil. Selamat belajar dan Happy Blogging :)

Saturday, October 6, 2012

Bismillah. Alhamdulillah. Blogger Tune-Up kembali bisa menulis walau masih kaku setelah hampir satu bulan lamanya tidak menulis. Artikel kali ini merupakan lanjutan penjelasan dari artikel sebelumnya tentang Open Graph Metadata Untuk Blogger, namun lebih spesifik membahas tentang Twitter Cards. Twitter Cards adalah fasilitas yang diberikan oleh jejaring sosial Twitter untuk para blogger agar konten yang dibagikan melalui jejaring Twitter lebih menarik dan mudah dipahami oleh pengikut kita. Mereka para pengikut (follower) jejaring Twitter yang kita kelola akan lebih mudah untuk memahami dengan cepat mengenai materi utama dari artikel yang kita bagikan dari blog kita, karena sisipan konten artikel yang tampil pada Twitter berisi informasi tentang judul artikel, ringkasan (meta description) artikel, gambar thumbnail, info penulis (nama dan alamat Twitter), info blog (favicon, nama blog dan alamat Twitter) serta beberapa informasi penting lainnya.
Blogger Twitter Cards

Deskripsi

Twitter Cards atau Kartu Twitter memungkinkan kita untuk melampirkan berbagai informasi media untuk pengguna Twitter (Tweets) yang memiliki pranala ke konten blog yang kita kelola. Kita hanya cukup menambahkan beberapa baris kode HTML (metadata) kedalam halaman web yang kita kelola maka dengan otomatis pengguna yang membagikan link konten blog kita pada tweet mereka akan memiliki "kartu" informasi yang akan terlihat pada semua pengikutnya. Namun fasilitas ini belum 100% untuk semua pengguna. Twitter pada blognya yang ditulis (update) pada hari Rabu, 12-09-2012 (13:56) menjelaskan bahwa mereka masih dalam proses secara bertahap untuk menggelar teknologi tersebut hingga 100% bisa digunakan untuk semua pengguna. Ini berarti untuk sementara waktu, tidak semua pengguna akan memperoleh fasilitas ini.
Sebagai pengembang, Twitter Card (Kartu Twitter) berguna untuk:
  • Memberi Anda kendali tentang bagaimana konten Anda ditampilkan pada Tweet
  • Mengarahkan lalu lintas ke situs Anda
  • Meningkatkan jumlah orang yang mengikuti akun Twitter Anda melalui atribusi konten

Integrasi Metadata Twitter Cards

Pada artikel Open Graph Metadata Untuk Blogger sebenarnya sudah dibahas lengkap. Silahkan mengikuti tata cara pemasangan metada seperti yang dijelaskan pada artikel tersebut.
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Dasbor - Template - Edit HTML - Lanjutkan"
Langkah 3
Pastikan kode dibawah ini tersedia:
<!-- Metadata Twitter -->
<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content='@situsAnda'/>
<meta name='twitter:creator' content='@userName'/>
<meta name='twitter:url' expr:content='data:blog.canonicalUrl'/>
<meta name='twitter:title' expr:content='data:blog.pageTitle'/>
<meta name='twitter:description' expr:content='data:blog.metaDescription'/>
<meta name='twitter:image' expr:content='data:blog.postImageThumbnailUrl'/>
Perhatian! Kode metadata Twitter Cards diatas hanya sepenggal, wajib metadata tersebut lengkap dengan metadata open graph
Langkah 4
Simpan template jika yakin kode tersebut tersedia

Pemeriksaan Metadata Twitter Cards

Setelah yakin bahwa metadata Twitter Cards terpasang dengan baik pada template, lakukan pemeriksaan dengan langkah sebagai berikut:
Langkah 1
Buka halaman Preview your Twitter Card
Langkah 2
Masukan alamat artikel yang akan diperiksa pada kotak "Media URL"
Preview Tool Twitter Cards
Langkah 3
Klik tombol "Preview Card" dan tunggu hingga kartu twitter ditampilkan seperti dibawah ini:
Hasil Preview Twitter Cards
Langkah 4
Berarti integrasi metadata Twitter Cards berhasil...

Berpartisipasi pada Twitter Cards

Agar Kartu Twitter dapat ditampilkan dengan baik maka sebaiknya anda berpartisipasi dalam pengembangan Twitter Cards dengan mengikuti ketentuan sebagai berikut:
  • Baca dokumentasi dan cara menambahkan markup yang tepat untuk Blog Anda.
  • Uji markup Anda dengan alat pratinjau yang disediakan (Lolos Pemeriksaan Metadata Twitter Cards). Kiriman Anda akan ditolak secara otomatis jika Anda memiliki markup tidak lengkap atau cacat.
  • Setelah markup diimplementasikan, mengisi formulir dan menyertakan link ke halaman yang berisi perwakilan markup.

Hal yang harus diperhatikan dalam pengisian formulir:
  • Pada bagian "Twitter Username" isi dengan nama akun twitter anda.
  • Pada bagian "Twitter Username associated with that domain" isi dengan nama akun twitter yang khusus dibuat untuk pengikut blog anda.
  • Yang diberi tanda bintang merah adalah bagian yang tidak boleh dikosongkan, namun sebaiknya semua bagian diisi dengan baik.
Setelah formulir diisi dengan baik, tunggu beberapa saat (bisa satu minggu hingga satu bulan) email konfirmasi dari tim Kartu Twitter.

Twitter Cards Pengguna Non Blog*Spot

Ma'af sekali, Blogger Tune-Up tidak akan membahas bagaimana mengintegrasikan Twitter Cards untuk platform blog selain Blog*Spot. Bagi para pengguna CMS non Blog*Spot seperti Wordpress, Drupal dan lain sebagainya terutama yang berbasis PHP silahkan merujuk pada artikel Niall Kennedy berjudul "Twitter Cards PHP" yang ditulis lengkap beserta source code-nya pada GitHub.

Kesimpulan

Dibawah ini adalah screenshoot blog yang sudah terintegrasi Twitter Card dan yang belum dipasang Twitter Card pada saat di-tweet.
Dengan Twitter Cards
Tanpa Twitter Cards
Selamat mencoba dan semoga berhasil. Happy Blogging :)

Tuesday, October 2, 2012

Download Template Blog Maintenance Part 2

Posted by dav On 8:14 AM
Template Blog Maintenance - Download template blog 'Site Underconstruction' atau blog dalam perbaikan/ maintenance. Bagi anda yang sedang membenahi blognya atau memang masih baru membuat blog dan belum siap tampil, anda bisa memakai template berikut ini untuk membuat pelanggan atau pengunjung blog anda tidak ngacir.

Download Template Blog Maintenance
Download Template Blog Maintenance
Tampilannya template yang akan anda dapatkan adalah seperti diatas, berminat..?? silahkan Anda Download Template Blog Maintenance secara Gratis.

Download : Click here

Monday, October 1, 2012

Download Template Blog Maintenance Part 1

Posted by dav On 8:25 AM
Download Template Blog Maintenance Part 1 - Template Blog untuk tampilan Maintenance / perbaikan. Tampilan blog anda masih dalam perancangan atau masih pilih-pilih template, gunakan template berikut ini yang tentunya gratis 100% untuk anda pergunakan dan modifikasi.

Download Template Blog Maintenance Part 1
Download Template Blog Maintenance Part 1
Silahkan anda mencobanya di blog anda jika memang blog anda masih dalam tahap perbaikan.

Download  : Click here

Friday, August 10, 2012

Memahami CSS Selector - Bagian 3

Posted by dav On 6:35 AM
Bismillah. Alhamdulillah. Dua artikel yang khusus membahas CSS Selector telah ditulis dengan harapan kita bersama bisa mempelajarinya dengan baik. Dan mudah-mudahan dapat memberikan gambaran serta memecahkan permasalahan-permasalahan yang berhubungan dengan CSS selama ini. Saya menulis artikel tentang CSS Selector bukan bermaksud menggurui sahabat blogger, tapi pada mulanya dimaksudkan sebagai catatan pribadi, untuk mengingatkan diri sendiri disaat lupa. Maklum saya juga bukanlah blogger profesional yang setiap hari selalu berkutat dengan kode-kode CSS. Semakin jarang bertemu dengan CSS semakin besar kemungkinan lupa.
CSS Selector
Artikel kali ini masih sambungan dari dua artikel sebelumnya yang membahas CSS Selector. CSS Selector yang akan dibahas kali ini cukup lumayan sulit dan rumit, bahkan beberapa kode masih jarang yang menggunakannya namun tidak ada salahnya tetap dibagikan sebagai bahan diskusi. Mari kita pelajari CSS Selector berikutnya, jika anda merasa pusing dan bingung berarti saya pun demikian adanya... (hehehehe...)

Agar pemahaman tentang artikel CSS Selector kali ini menjadi lebih mudah, sebaiknya anda unduh terlebih dahulu contoh study case pada link unduhan diatas, kemudian baca artikel dengan memahami langsung dari contoh yang tersedia. Jangan lupa ekstrak file hasil unduhan dengan perangkat lunak archive extractor (misal; 7ZIP, WinZIP, atau WinRAR).

(21) X::pseudoElement

Kita dapat menggunakan Pseudo Element untuk memberikan style pada bagian-bagian dari suatu elemen, seperti misal; style untuk baris pertama pada sebuah paragrap atau huruf pertama dari sebuah paragrap. Pseudo Element tersusun dari dua titik-dua "::" (two colon).

Pseudo Elemen dengan Target Huruf Pertama Paragrap
Dibawah ini contoh kode CSS yang digunakan untuk memberikan style pada huruf pertama pada sebuah paragrap:
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
Pseudo Elemen pada kode CSS diatas memberikan style pada semua huruf pertama dari setiap paragrap yang terdapat pada halaman yang sedang dibuka. Cara ini biasanya digunakan pada style sebuah halaman koran (newspaper).

Pseudo Elemen dengan Target Baris Pertama Paragrap
Dibawah ini contoh kode CSS yang digunakan untuk memberikan style pada baris pertama pada sebuah paragrap:
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
Hampir sama dengan fungsi kode Pseudo Elemen CSS sebelumnya, hanya saja target style ditujukan pada semua baris pertama dari setiap paragrap halaman yang sedang dibuka.
Mengutip dari www.w3.org bahwa:
"Untuk kesesuaian dengan style sheet yang ada, maka semua user agent harus bisa menerima notasi satu titik-dua (one-colon) sebelumnya untuk pseudo elemen yang dimasukan pada CSS level 1 dan level 2 (yaitu, :first-line, :first-letter, :before dan :after). Kompatibilitas ini tidak berlaku untuk pseudo element baru yang diperkenalkan pada spesifikasi ini."
Kenyataannya, user agent pada browser versi terbaru mampu membaca dengan baik notasi satu titik-dua pada pseudo element yang terdapat didalam kode CSS dan dengan otomatis mengubahnya menjadi notasi dua titik-dua (two-colon). Terserah anda, apakah akan menggunakan pseudo element dengan notasi two-colon atau one-colon.

Selector ini bekerja pada browser: IE6+ - Firefox - Chrome - Safari - Opera

(22) X:nth-child(n)

Pseudo Element ini digunakan untuk memberikan style pada anak (child) dari sebuah deret item. Pseudo Element ini sederhananya untuk menyeleksi suatu deret item yang tersedia didalam sebuah susunan daftar dengan penghitungan item dimulai dari atas.
li:nth-child(2) {
color: red;
}
Perhatikan kode CSS diatas. Pseudo Element nth-child(2) digunakan untuk memberikan style pada setiap list item (li) yang berada pada susunan (baris) ke-dua dalam setiap kumpulan list item. Pseudo Element ini juga dapat digunakan untuk menyeleksi atau memberikan style list item dengan cara penentuan kelipatannya. Misal; nth-child(2n), maka item 2, 4, 6, 8, dan seterusnya yang merupakan kelipatan dua akan dipengaruhi oleh style pseudo element. nth-chlid mampu menyeleksi item hingga urutan ke-397 [li:nth-child(397)].

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

(23) X:nth-last-child(n)

Pseudo Element ini hampir sama dengan nth-chlid, hanya berbeda cara seleksinya saja. Jika nth-child melakukan seleksi dengan cara mengitung list item dari atas, sedangkan nth-last-child adalah kebalikannya, yaitu melakukan penghitungan list item dari item yang terakhir.
li:nth-last-child(2) {
color: red;
}
Perhatikan kode CSS diatas. Pseudo Element nth-last-child(2) digunakan untuk memberikan style pada setiap list item (li) yang berada pada susunan (baris) ke-dua dari bawah (dari item terakhir) dalam setiap kumpulan list item. Misal; list item terdiri dari 8 baris, maka target pseudo elemen ini adalah list item pada baris ke-7 (jika dihitung dari atas) atau baris ke-2 (jika dihitung dari bawah).

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

(24) X:nth-of-type(n)

Pseudo Element ini hampir sama dengan :nth-child hanya saja terdapat perbedaan dalam menentukan targetnya. Jika :nth-child akan mencari target berupa child, jika :nth-of-type akan mencari target berupa type elemen.
ul:nth-of-type(2) {
border: 1px solid black;
}
Perhatikan kode CSS diatas. Anggaplah kita memiliki 5 kumpulan unordered list (ul) yang setiap ul terdiri dari 5 list item (li). Kemudian kita ingin memberikan style berupa garis kotak hanya pada ul ke-dua, dan ul ke-dua ini tidak memiliki ID unik yang terkait antara elemen dengan CSS. Maka kita menggunakan pseudo elemen nth-of-type(2), dan hasilnya hanya ul urutan ke-dua dari ataslah yang akan diberi garis kotak hitam.

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

(25) X:nth-last-of-type(n)

Pseudo Element ini hampir sama dengan :nth-of-type hanya berbeda cara menentukan target type-nya saja. Jika nth-of-type menentukan target elemen dengan cara mengitungnya dari atas, sedangkan nth-last-of-type adalah kebalikannya, yaitu melakukan penghitungan target elemen dari elemen yang terakhir.
ul:nth-last-of-type(2) {
border: 1px solid black;
}
Perhatikan kode CSS diatas. Anggaplah kita memiliki 5 kumpulan unordered list (ul) yang setiap ul terdiri dari 5 list item (li). Kemudian kita ingin memberikan style berupa garis kotak hanya pada ul ke-dua (dari bawah) atau ul ke-empat jika dihitung dari atas. Maka kita menggunakan pseudo elemen nth-last-of-type(2), dan hasilnya hanya ul urutan ke-dua (dari bawah) atau ke-empat (dari atas) yang akan diberi garis kotak hitam.

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

(26) X:first-child

Pseudo Element ini cukup banyak digunakan oleh para web desainer. Struktur pseudo class ini digunakan untuk menentukan style dengan target child (anak) pertama dari elemen utama (parent).
ul li:first-child {
border-top: none;
}
Perhatikan kode CSS diatas. Anggaplah kita memiliki sekumpulan list item (li) dari sebuah unordered list (ul). Kemudian diberikan style garis pada bagian-atas (border-top) dari masing-masing list item. Namun kita ingin membuang garis-atas (border-top) hanya pada list item urutan ke-satu, maka gunakan :first-child untuk menyeleksinya, kemudian buang garis-atasnya (border-top: none;).

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(27) X:last-child

Pseudo class ini hampir sama dengan :first-child namun berbeda target. Struktur pseudo class ini digunakan untuk menentukan style dengan target child (anak) terakhir dari elemen utama (parent).
li:last-child {
border-bottom: none;
}
Perhatikan kode CSS diatas. Anggaplah kita memiliki sekumpulan list item (li) dari sebuah unordered list (ul). Kemudian diberikan style garis pada bagian-bawah (border-bottom) dari masing-masing list item. Namun kita ingin membuang garis-bawah (border-bottom) hanya pada list item urutan terakhir, maka gunakan :last-child untuk menyeleksinya, kemudian buang garis-bawahnya (border-bottom: none;).
Hati-hati, IE8 mendukung pseudo element :first-child tetapi tidak mendukung pseudo element :last-child.

Selector ini bekerja pada browser: IE9+ - Firefox - Chrome - Safari - Opera

(28) X:only-child

Pseudo class :first-child dan :last-child sudah kita pelajari dan pahami, lalu untuk apa pseudo class :only-child?
div p:only-child {
color: red;
}
Perhatikan kode CSS diatas. Mungkin diantara kita ada yang pernah menemukan masalah ini. Misal; kita ingin memberikan style HANYA pada paragraph pertama yang merupakan child (anak) dari SEBUAH div. Namun, paragrap lainnya dari div lain tidak ingin kita beri style. Jika menggunakan pseudo class :first-child maka setiap paragrap pertama dari setiap div akan diberi style. Sedangkan kita hanya mentargetkan paragrap pertama dari sebuah div. Ini berarti style hanya akan diberlakukan pada paragrap pertama yang merupakan child sebuah div (dari sebuah div hanya terdapat sebuah paragraph), sedangkah div lain yang memiliki paragrap lebih dari satu tidak akan diberi style. Kondisi seperti ini sangat sulit diselesaikan dengan menggunakan pseudo class lain, maka gunakanlah pseudo class :only-child untuk menyelesaikannya.

Selector ini bekerja pada browser: IE9+ - Firefox - Chrome - Safari - Opera

(29) X:only-of-type

Pseudo class ini hampir sama dengan :only-child dan :nth-of-type(n) hanya saja berbeda target. Mungkin bisa dikatakan sebagai perpaduan dari :only-child dan :nth-of-type(n).
li:only-of-type {
font-weight: bold;
}
Perhatikan kode CSS diatas. Sebenarnya sama saja dengan :only-child hanya saja berbeda target. Jika :only-child menentukan target yang merupakan child dari sebuah elemen, sedangkan :only-of-type menentukan target berdasar type. Misal; Kita memiliki dua unordered list (ul), ul pertama hanya terdiri dari satu li (list item) sedangkan ul kedua terdiri dari lima li. Jika anda menggunakan li:only-of-type maka style hanya akan berpengaruh pada target li tunggal dari sebuah ul.

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

(30) X:first-of-type

Pseudo element ini mungkin boleh dikatakan sebagai perpaduan dari :first-child dengan :nth-of-type(n). Karena pseudo element ini memiliki target style untuk elemen pertama yang terdekat pada tipenya (jenisnya).
Untuk memahami fungsi pseudo element :first-of-type maka perhatikan skenario HTML dibawah ini:
<div>
<p>Solusi Pseudo Element :first-of-type</p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>

<ul>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>
</div>
Kita memiliki 2 Unordered List (ul) yang setiap ul terdiri dari 2 list item (li). Dan kita ingin memberikan style pada "List Item 2", maka beberapa solusi pseudo element yang bisa kita gunakan adalah sebagai berikut:

Solusi 1
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
Keterangan:
  • ul:first-of-type digunakan untuk menyeleksi ul pertama sesuai dengan tipenya
  • Notasi > digunakan untuk memilih langsung turunan dari ul:first-of-type (lihat direct selector)
  • li:nth-child(2) digunakan untuk menyeleksi child li ke-dua dihitung dari atas


Solusi 2
p + ul li:last-child {
font-weight: bold;
}
Keterangan:
  • p + ul digunakan untuk menyeleksi ul yang posisinya tepat dibawah p (lihat adjacent selector)
  • li:last-child digunakan untuk menyeleksi li child terakhir


Solusi 3
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
Keterangan:
  • ul:first-of-type digunakan untuk menyeleksi ul pertama sesuai dengan tipe-nya (jenisnya atau kelompoknya)
  • li:nth-last-child(1) digunakan untuk menyeleksi ul terakhir diurutan pertama yang dihitung dari bawah

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

Kesimpulan

Jika terpaksa harus menggunakan dan memperhatikan browser versi lama seperti Internet Explorer Versi 6, maka kita harus berhati-hati dalam menggunakan selector versi baru. Namun jangan sampai hal ini justru menghalangi keinginan anda untuk belajar. Jangan sampai versi browser menurunkan semangat belajar dan membuat kita harus diam, karena hal ini sangat merugikan diri kita sendiri. Untuk memperkecil kesalahan penggunaan selector selalu rujuklah daftar kompatibilitas-browser. Atau, Anda dapat menggunakan script IE9.js buatan Dean Edward agar browser versi lama mampu mendukung selector baru. Dan atau, gunakan framework tertentu agar browser lama mampu me-render CSS Selector baru dengan baik, misal; Modernizr.
Ketika kita harus menuliskan kode berdampingan dengan framework populer, semisal jQuery, usahakan kita menuliskan kode selector CSS3 asli pada sekumpulan kode-kode custom perpustakaan. Hal ini akan membuat susunan kode-kode menjadi lebih cepat untuk diakses (dirender) oleh browser, jika memungkinkan. Usahakan menggunakan parsing asli browser daripada menggunakan parsing buatan sendiri, hal ini akan meningkatkan kinerja kode saat dirender.
Akhirnya, saya secara pribadi berharap, 3 artikel yang membahas tentang CSS Selector ini dapat membantu mempercepat pemahaman anda tentang fungsi dari masing-masing kode tersebut. Sehingga, suatu hari saya bisa bertanya tentang pengalaman anda dalam penggunaan CSS Selector. Jika anda menemukan kasus dari CSS Selector diatas, atau menemukan CSS selector lain dan ingin dibahas pada artikel Blogger Tune-Up, jangan sungkan untuk mengirimkan kritik, saran dan pengetahuan baru kepada penulis. Selamat mencoba, selamat belajar dan semoga berhasil. Happy Blogging :)

Pranala Luar:

Saturday, August 4, 2012

Memahami CSS Selector - Bagian 2

Posted by dav On 10:08 AM
Bismillah. Alhamdulillah. Membahas tentang CSS terkadang sangatlah membingungkan. Karena jika diibaratkan, bahasa CSS adalah make-up untuk mempercantik penampilan suatu elemen. Sederhananya, CSS itu berpengaruh terhadap suatu elemen, namun tidak mampu membuat atau menciptakan elemen. CSS hanya akan tampak menarik jika bersatu dengan suatu elemen, namun tidak mampu berdiri sendiri. Pemahaman, pengetahuan dan pengalaman yang kurang dalam menggunakan CSS kadang berakibat cukup fatal dengan tidak tampilnya suatu elemen, bergesernya posisi elemen, tertutupnya elemen satu oleh elemen lainnya, posisi yang tidak rata dan seimbang dan lain sebagainya, dan kita sering kesulitan untuk mencari solusinya ketika ratusan bahkan ribuan baris CSS telah dituliskan.
CSS Selector
Pada artikel sebelumnya telah dibahas tentang CSS Selector Bagian 1, mudahan-mudahan artikel tersebut telah dipahami dengan baik dan sudah dilakukan trial and error untuk menemukan letak perbedaan dan kehebatan masing-masing fungsinya. Jika belum memahaminya dengan baik, ada baiknya terus dilakukan percobaan dan penelaahan sampai kita benar-benar memahaminya. Pemahaman yang baik akan melahirkan keyakinan yang kuat, dan ini tentunya modal dasar seorang web desainer. Yakin anda sudah paham dengan CSS Selector bagian 1? Jika merasa yakin, mari kita lanjutkan ke pembahasan CSS Selector bagian 2...

(11) X[href="foo"]

Selector ini lebih cocok jika disebut sebagai url filter selector. Karena sisipan yang dimasukan didalam tanda kutip merupakan target yang akan mengarah hanya kepada link yang memiliki url sama.
a[href="http://modification-blog.blogspot.com"] {
color: red;
}
Perhatikan contoh CSS diatas. Selector diatas hanya akan berpengaruh pada target tag anchor yang memiliki url http://modification-blog.blogspot.com, sedangkan tag anchor lainnya (yang tidak memiliki url sama) tidak akan dipengaruhi sama sekali.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(12) X[href*="modif"]

Selector ini hampir mirip dengan selector X[href="foo"], namun selector X[href*="modif"] memiliki target yang lebih luas dan tidak terlalu spesifik.
a[href*="modif"] {
color: red;
}
Perhatikan contoh CSS diatas. Selector ini digunakan untuk memberikan style pada tag anchor yang url-nya mengandung kata "modif", misal; blog.modif.com, modif.blog.com, modifblog.com dan atau modification-blog.blogspot.com. Sedangkan tag anchor yang url-nya tidak mengandung kata "modif" tidak akan dipengaruhi sama sekali. Penggunaan simbol bintang didalamnyalah yang membuat selector bersifat lebih luas. Tanpa simbol bintang maka target sangat sempit, bahkan kata "modif" tidak akang mengenai tag anchor apapun.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(13) X[href^="http"]

Selector ini digunakan untuk memberikan style dengan menggunakan regular expression untuk menentukan kata kunci awal.
a[href^="http"] {
background: url(external/icon.png) no-repeat;
padding-left: 10px;
}
Perhatikan contoh CSS diatas. Ini biasanya digunakan untuk menambahkan icon kecil pada tag anchor yang menandakan bahwa url tersebut mengarah keluar (eksternal) dari halaman yang sedang dibuka. Disini kode CSS menggunakan bantuan simbol carat (^) yang biasanya digunakan sebagai regular expression untuk menentukan string awal. String awal yang akan dideteksi dari kode contoh diatas adalah href yang url-nya diawali dengan "http" karena biasanya url halaman internal dari suatu situs tidak disertai "http" sedangkan untuk halaman eksternal harus lengkap dengan penambahan "http" diawal url-nya.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(14) X[href$=".jpg"]

Selector ini hampir mirip dengan selector X[href^="http"], perbedaannya hanya pada regular expression untuk menentukan string.
a[href$=".jpg"] {
color: red;
}
Perhatikan contoh CSS diatas. Kode CSS menggunakan simbol dollar ($), yang merupakan regular expression untuk menentukan string akhir. Maka kode CSS pada contoh diatas hanya akan mempengaruhi tag anchor href yang url-nya mengandung string .jpg pada akhir url-nya. Sedangkan url yang akhiran stringnya bukan .jpg maka tidak akan dipengaruhi sama sekali.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(15) X[data-*="foo"]

Selector ini merupakan cara lain untuk menentukan type suatu file yang akan dipengaruhi oleh CSS.
a[data-filetype="image"] {
color: red;
}
Selector pada nomor 14 biasanya digunakan untuk membuat style berdasarkan type file, misal; untuk memberikan style pada file-file dengan type png, jpg, jpeg, gif maka kita menggunakan multiple selector pada kode CSS seperti dibawah ini:
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
Jika menggunakan multiple selector seperti diatas ini tentunya berpengaruh pada setiap tag anchor dengan string akhir sama, lalu bagaimana jika ada diantaranya tag anchor yang tidak ingin dipengaruhi CSS? Solusinya dengan menggunakan custom attribute. Kita dapat menambahkan sendiri atribut data-filetype pada masing-masing tag anchor yang mengandung link sebuah gambar, seperti dibawah ini:
<a href="path/image.jpg" data-filetype="image">Image Link</a>
<a href="path/image.png" data-filetype="image">Image Link</a>
Setelah pengaitnya (custom attribute) diletakan pada tag anchor, kita dapat dengan mudah menuliskan atribut tersebut pada CSS agar target menjadi spesifik yang mengarah pada tag anchor tertentu, seperti dibawah ini:
a[data-filetype="image"] {
color: red;
}

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(16) X[foo~="bar"]

Selector ini menggunakan penambahan simbol tilda (~) yang digunakan untuk mentargetkan style pada atribut elemen yang memiliki spasi (space) value (nilai).
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
Perhatikan contoh CSS diatas. Kita telah mendeklarasikan 2 selector dengan nilai berbeda, yaitu external dan image. Misal elemen yang dipengaruhi CSS tersebut seperti dibawah ini:
<a href="path/to/image.jpg" data-info="external image">Gambar Eksternal</a>
Pada contoh elemen diatas, kita telah membuat atribut data-info dengan 2 nilai, yaitu external dan image. Dua nilai atribut ini memberikan keleluasaan bagi kita untuk menentukan style yang tepat dan lebih fleksibel dari pada hanya dengan satu nilai. Dua nilai pada atribut ini hanya dipisahkan dengan spasi kosong seperti halnya penggunaan selector class.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(17) X:checked

Pseudo class ini digunakan untuk memberikan style input yang terpilih (checked) seperti tombol radio atau checkbox.
input[type=radio]:checked {
border: 1px solid black;
}

Selector ini bekerja pada browser: IE9+ - Firefox - Chrome - Safari - Opera

(18) X:hover

Selector ini mungkin sangat familiar bagi anda, karena memang selector yang sering digunakan, namun pada mulanya hanya digunakan pada tag anchor saja. Sekarang :hover bisa digunakan pada berbagai elemen. Istilah resmi untuk selector ini adalah user action pseudo class.
div:hover {
background: #e3e3e3;
}
Perhatikan kode CSS diatas. Selector :hover tidak digunakan pada tag anchor tetapi digunakan pada sebuah elemen div. Hati-hati menggunakan selector :hover karena Internet Explorer versi lama tidak akan memberikan perubahan apapun dalam penggunaan :hover pseudo class ini dan hanya berlaku pada tag anchor saja. Contoh dibawah ini adalah :hover pseudo class pada tag anchor yang akan memberikan style garis bawah dengan warna hijau (green) pada saat pointer mouse berada diatas tag anchor.
a:hover {
border-bottom: 1px solid green;
}
Para web desainer menyarankan penggunaan border-bottom: 1px solid #000; untuk garis bawah sebuah tag anchor dari pada menggunakan text-decoration: underline;

Selector ini bekerja pada browser: IE6+ (tapi hanya pada elemen tag anchor) - Firefox - Chrome - Safari - Opera

(19) X:after

Selector :before dan :after pseudo class sangat berguna sekali dan sering digunakan. Setiap hari, banyak para web desainer kreatif melakukan percobaan untuk menemukan cara baru yang lebih efektif. Salah satu teknik :after pseudo class yang sangat terkenal adalah clear-fix hack seperti kode dibawah ini:
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
Penggunaan hack :after pseudo class ini untuk menyisipkan sebuah spasi (ruang kosong) setelah elemen sebelumnya.

Selector ini bekerja pada browser: IE8+ - Firefox - Chrome - Safari - Opera

(20) X:not(selector)

Selector ini disebut negation pseudo class yang digunakan sebagai pengingkaran (negation) terhadap suatu kondisi.
div:not(#container) {
color: blue;
}
Perhatikan kode CSS diatas. Jika kita baca maka kurang lebih berbunyi; jika elemen div bukan (atau tidak memiliki) id container maka huruf akan diberi warna biru (blue).
Atau kita ingin memilih setiap elemen namun bukan paragraph dengan huruf diberi warna hijau (green) maka kode CSS ditulis seperti dibawah ini:
*:not(p) {
color: green;
}
Jika dibaca kurang lebih berbunyi; semua elemen (*) huruf akan diberi warna hijau (green) kecuali huruf yang berada didalam paragrap (tag p).

Selector ini bekerja pada browser: IE9+ - Firefox - Chrome - Safari - Opera

Kesimpulan

Bertambah 10 selector dalam memori kita dan selector-nya pun semakin lumayan rumit untuk dipahami dan dihapal. Namun jika kita terus melakukan trial and error, perlahan tapi pasti selector diatas akan mampu diingat dan dipahami dengan baik. Penggunaan kode-kode CSS terutama selector tidak hanya cukup untuk dibaca, kita harus benar-benar mencobanya sendiri agar paham perubahan demi perubahan yang terjadi pada elemen-elemen HTML yang kita tulis. Lakukan eksplorasi lebih jauh dengan mengikuti imajinasi kita agar muncul permasalahan-permasalahan yang harus dipecahkan, semakin sering menemukan masalah semakin paham fungsi dari masing-masing selector diatas. Lakukan pula pengkombinasian selector hingga terjadi bentrok disana-sini, maka ketika kita mampu melakukan perbaikan bentrok, semakin baik pula pemahaman kita.
Ingat! Mengerti belum tentu memahami, karena mengerti saja belum cukup untuk menyelesaikan permasalahan-permasalahan yang timbul. Tulis dan terus tulis kode demi kode hingga kita benar-benar memahaminya.
know:not(#understand){
error: rewrite;
often: successful;
}
Sampai ketemu dipembahasan berikutnya. Selamat belajar dan selamat mencoba. Happy Blogging :)

Pranala Luar: