Senin, 09 Februari 2009

4 Trik CSS Untuk Memperindah Tulisan Artikel Blog

Trik CSS Untuk Memperindah Tulisan Artikel Blog

Pada artikel sebelumnya kita sedikit mengetahui bermacam-macam kesalahan yang sering kita temui pada blog, dalam hal keindahan tipografi (setidaknya menurut saya :D ). Selanjutnya yang akan kita bahas di sini adalah bagaimana memanfaatkan CSS untuk mengatur dan membentuk tulisan postingan kita menjadi sedikit lebih menarik dan bernilai. Ya, yang akan kita bahas kali ini sepenuhnya mengenai CSS styling, dan bagaimana mengaplikasikannya pada setiap artikel yang kita tulis. Jadi, siap-siap buka text editor dan menyalin deklarasi-deklarasi CSS berikut sekalian belajar CSS dengan mencoba sedikit demi sedikit mengubah nilai dari property CSS yang tersedia supaya sesuai dengan template yang kita gunakan.

Heading

Tag heading (h1, h2, h3, h4, dst.) berfungsi untuk membentuk hirarki dari sebuah tulisan, dari judul, sub-judul, dan seterusnya. Nah, untuk membedakan masing-masing tag kita bisa mengubah tampilannya menggunakan CSS. Sebagai contoh, saya menggunakan CSS di bawah ini untuk tag h3 yang sering saya gunakan di postingan ↓


view plaincopy to clipboardprint?
  1. h3 {
  2. margin: 2.0em 0 0.25em 0;
  3. font: normal 1.33333em/1.0em Georgia, "Times New Roman", Times, serif;
  4. letter-spacing: -0.02em;
  5. color: #a90000;
  6. }

Hasilnya bisa kita lihat di tulisan ini, dimana saya menggunakan tag h3 sebagai sub judul artikel.

Drop Cap

Gunakan drop cap untuk mempercantik tulisan kita dengan menggunakan stylesheet berikut ↓


view plaincopy to clipboardprint?
  1. .drop_cap {
  2. padding: 0.17em 0.08em 0.05em 0;
  3. font-size: 3.4em;
  4. line-height: 0.6em;
  5. color: #aaa;
  6. float: left;
  7. }

Gunakan style di atas sebagai span dan taruh pada id atau class yang digunakan di template, misalnya ↓


view plaincopy to clipboardprint?
  1. .post .drop_cap {
  2. padding: 0.17em 0.08em 0.05em 0;
  3. font-size: 3.4em;
  4. line-height: 0.6em;
  5. color: #aaa;
  6. float: left;
  7. }

Sekarang, setiap kali menulis postingan, masukkan huruf inisial pada kode HTML, misalnya <span class="drop_cap">A</span>

Snazzy Pullquote

"Pullquote, disamping fungsinya sebagai penegas, penjelas, atau apapun itu, juga bisa membuat pembaca tertarik membaca tulisan kita."


Sekarang, kita akan mencoba menambahkan sebuah elemen yang sering kita lihat di majalah-majalah tapi jarang kita lihat di blog: pullquote. Pullquote, disamping fungsinya sebagai penegas, penjelas, atau apapun itu, juga bisa membuat pembaca tertarik membaca tulisan kita. Ada dua metode untuk mengaplikasikan pullquote, dengan menambahkan class attribute pada blockquote, atau dengan cara membuat div (atau span) baru untuk membuat pullquote. Kali ini kita akan menggunakan cara pertama, alasannya: secara semantic HTML lebih tepat karena pullquote akan tetap dibaca sebagai blockquote (hanya menambahkan atribut class baru pada blockquote).


view plaincopy to clipboardprint?
  1. blockquote.left {
  2. width: 200px;
  3. margin: 5px 15px 5px 0;
  4. font-size: 1.4em;
  5. text-align: center;
  6. color: #abafb9;
  7. background: none;
  8. border: none !important;
  9. padding: 0 !important;
  10. float: left;
  11. }
  12. blockquote.right {
  13. width: 200px;
  14. margin: 5px 15px 5px 0;
  15. font-size: 1.4em;
  16. text-align: center;
  17. color: #abafb9;
  18. background: none;
  19. border: none !important;
  20. padding: 0 !important;
  21. float: right;
  22. }

Untuk memasukkan pullquote, masukkan class yang telah kita buat pada blockquote → <blockquote class="left">Dummy Text</blockquote> untuk pullquote di sebelah kiri tulisan, dan <blockquote class="right">Dummy Text</blockquote> untuk pullquote di sebelah kanan tulisan.

Gunakan Div

Seperti yang saya tulis di artikel sebelumnya bahwa kebanyakan blogger kita tidak mempedulikan pentingnya semantic, meaning, atau arti dari masing-masing tag HTML yang sebenarnya, yang bisa saja menurunkan kualitas tulisan dan nilai SEO-nya (baca artikel Opera Developer Community mengenai semantic HTML dan SEO). Contohnya, kebiasaan menggunakan tag <b> dan <i> untuk menebalkan dan memiringkan tulisan, yang sebenarnya cuma tampilannya saja yang jadi tebal dan miring, tetapi sesungguhnya tidak ada bedanya dengan plain text dan tidak memberikan arti apa-apa pada tulisan tersebut (sangat berbeda bila menggunakan tag <strong> dan <em>). Kemudian ada lagi yang memasukkan blok kode atau markup HTML dalam blockquote, yang tentu saja tetap dianggap sebagai blockquote secara semantic, betapapun rumitnya kode tersebut :D

Nah, yang di atas ↑ tadi cuma sebagian kecil contoh bagaimana seringnya kita menggunakan blockquote. Sekarang, kita akan coba membuat div baru untuk menggantikan tag blockquote yang sering digunakan untuk highlight, pengumuman, atau apapun itu. Tujuannya, supaya tampilannya lebih menarik aja sih :D

view plaincopy to clipboardprint?
  1. .update {
  2. border: 3px solid #f2ec49;
  3. background: #fffdcb;
  4. padding: 1.0em 15px;
  5. margin: 0 0 1.46667em 0;
  6. line-height: 165%;
  7. clear: both;
  8. }

Masukkan teks pada class yang telah kita buat → <div class="update">Dummy Text</div>, maka hasilnya menjadi seperti ini ↓

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam egestas, mauris id dignissim dignissim, leo augue rutrum lacus, id condimentum nisl elit ut nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi.

Selamat mencoba :)

Diposting oleh di Tidak ada komentar:

7 Cara Mempercepat Akses Blog

Kecepatan download sebuah website memang menjadi salah satu faktor yang sangat mempengaruhi jumlah kunjungan/traffic terhadap website tersebut. Tak terkecuali dengan sebuah blog. Blog dengan desain menarik pada beberapa keadaan memang bisa membuat orang selalu tertarik untuk berkunjung, tapi tentu saja bila diimbangi dengan kecepatan akses yang cukup. Beberapa cara sederhana di bawah ini bisa membantu meningkatkan kinerja dan kecepatan blog kita.

Gunakan penulisan kode yang efektif

Penulisan kode-kode yang efektif bisa dilakukan dengan cara mengurangi whitespace atau baris kosong yang terdapat dalam template yang kita pakai. Selain itu, usahakan menghapus line-line komentar yang terlalu banyak dan tidak terlalu berguna. Penulisan notasi yang singkat dan efektif, terutama pada CSS, juga dapat sedikit mempengaruhi kecepatan akses blog kita. Berikut beberapa contoh penyingkatan kode-kode pada template blog.

Contoh 1:

Terlalu banyak baris kosong (whitespace):


.title {background: #DAEBF3;

width: 100%;

padding: 10px;

border: 1px solid #DAEBF3;}


Penulisan yang lebih efektif:


.title { background: #DAEBF3; width: 100%; padding: 10px; border: 1px solid #DAEBF3; }

Contoh 2:


Contoh penulisan yang kurang efektif:


.title a:link {color: #990000;}
.title a:visited {color: #990000;}
.title a:hover {color: #990000;}
.title a:active {color: #990000;}

Penulisan notasi yang singkat dan lebih efektif:


.title a:link,
.title a:visited,
.title a:hover,
.title a:active {color: #990000;}

Minimalkan penggunaan JavaScript dan skrip-skrip eksternal

JavaScript dan teknologi AJAX memang telah banyak digunakan pada era Web 2.0 seperti sekarang ini, apalagi dalam hal efek visual. Penggunaan JavaScript memang mampu memperkaya tampilan antarmuka web/blog kita dan memberi nilai tambah dalam hal disain. Tapi kebanyakan JavaScript yang digunakan, apalagi yang memanfaatkan framework, memiliki ukuran yang lumayan besar dan pastinya akan lebih memperlambat blog daripada blog yang bersih dari JavaScript.

Yang perlu kita pahami bahwa tidak semua JavaScript yang menurut kita sangat keren jika dipasang di blog dapat memberi banyak manfaat. Kita ambil contoh saja efek JavaScript semacam Lightbox yang memberikan efek window overlay (seperti yang sudah diterapkan pada WordPress versi 2.6 ke atas saat preview sebuah tema di bagian Manage Themes) terhadap suatu objek seperti gambar/image *CMIIW*. Nah, jika kita jarang memposting koleksi foto tentunya Lightbox menjadi kurang berguna jika harus ditambahkan di blog.

Pemakaian skrip-skrip luar/eksternal seperti tracker, MyBloglog, skrip iklan, Plurk widget, Twitter, dan sebagainya kadang-kadang juga mempengaruhi kecepatan akses blog kita. Kalau bisa kurangi skrip-skrip semacam itu dan perbanyaklah skrip-skrip iklan seperti AdSense, hehe :gajian:

Maksimalkan penggunaan file-file kompresi

Jika JavaScript memang harus ditambahkan di blog, sebaiknya gunakan file-file JavaScript yang sudah dikompres menggunakan program kompresor semacam Dean Edward's Packer atau Yahoo! UI (YUI) Compressor. File-file yang telah terkompres mempunyai ukuran yang jauh lebih kecil bahkan sampai beberapa kali lipat untuk file JavaScript berukuran besar karena baris-baris kosong dan dokumentasi atau line komentar telah dihilangkan.

Akan tetapi penggunaan file-file kompresi bukannya tanpa kekurangan sama sekali. Yang perlu kita tahu bahwa ukuran bukanlah segalanya, karena pada kompresi tertentu malah membuat browser membutuhkan waktu lama untuk melakukan dekompresi file sebelum bisa ditampilkan secara utuh di browser. Teknik-teknik lain yang bisa dilakukan adalah dengan menggunakan cara Gzip (mod_gzip) dan HTTP compression. Tetapi maaf saya masih belum paham menggunakan cara-cara tersebut :mrgreen:

Kurangi perintah PHP dan query ke database

Usahakan untuk mengurangi perintah PHP dan query yang berhubungan dengan database. Ini sering kita jumpai di blog yang menggunakan WordPress. Memang perintah-perintah semacam ini memberikan banyak kemudahan dan mempunyai banyak manfaat seperti membuat tema WordPress menjadi "portable" karena menyesuaikan dengan direktori yang dipakai, tetapi browser secara alamiah lebih cepat menampilkan perintah HTML dibanding harus mengeksekusi perintah PHP atau query di server.


Contoh:


Bandingkan:


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.js"></script>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

Dengan:


<link rel="stylesheet" href="http://www.domain.com/wp-content/themes/default/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.domain.com/wp-content/themes/default/jquery.js"></script>

<link rel="alternate" type="application/rss+xml" title="Your Blog RSS Feed" href="http://feeds.feedburner.com/FanariDashIdDotCom" />

Non aktifkan dan hapus plugin-plugin yang kurang berguna

Plugin bisa menjadi salah satu penyebab lambatnya blog (WordPress) kita. Karena plugin sebenarnya menambahkan fungsi baru di blog kita, maka usahakan hanya menggunakan plugin-plugin yang benar-benar bermanfaat dan tentunya kita butuhkan. Lebih baik juga menggunakan plugin yang terus terupdate versinya.

Optimasi penggunaan file-file grafik/gambar

Jangan terlalu banyak memakai gambar untuk layout, dan kalau bisa ganti dengan kode-kode CSS, misalnya pada background. Jika gambar perlu dipakai untuk background misalnya, gunakan perintah repeat di CSS untuk mengulang tampilan gambar (tentu saja untuk gambar kecil yang bisa diulang-ulang tampilannya). Jika harus menggunakan gambar utuh maka pilih format gambar yang paling pas dengan tingkat kompresi yang sesuai. Format GIF mempunyai ukuran yang kecil namun mempunyai keterbatasan dalam hal warna.

Hapus widget-widget yang kurang berguna

Widget-widget yang sangat tidak berguna sering saya temui di blog terutama blogspot. Widget-widget seperti jam dinding, tag cloud yang berputar-putar, atau bahkan game Sudoku menurut saya tidak terlalu berguna jika dipasang di blog. Jangan pernah menganggap bahwa widget-widget semacam itu adalah aksesoris yang bisa mempercantik tampilan di blog kita. Memang siapa sih yang mau memainkan Sudoku yang kita pasang di sidebar?? Hehe.. :D

Mungkin ada cara-cara lain yang lebih teknikal untuk mengoptimasi sebuah situs, dan cara-cara di atas merupakan cara-cara sederhana yang biasa dipakai untuk mempercepat blog yang saya dapat dari pengalaman sendiri dan sumber-sumber lain tentunya, jadi silakan dicoba ;)

Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)