Permana Jayanta

Web Developer

Category: CSS

Melihat style blog lain dengan Web Developer

Saat lagi blogwalking, ada beberapa blog yang mempunyai desain yang keren banget. Ingin sekali membuat yang seperti itu, tapi bingung bagaimana caranya. Tapi beberapa saat kemudian baru sadar kalau sudah terinstall plugin WebDeveloper di FireFox-ku.

Memangnya kenapa dengan plugin WebDeveloper ? Dengan plugin ini kita bisa mengetahui apa nama element suatu halaman web dan style CSS yang seperti apa yang digunakan. Sebenarnya ada cara yang lain tanpa menginstall plugin ini. Cara yang biasa saya lakukan adalah :

  • Melihat kode halaman web tersebut dengan klik kanan View Page Source.
  • Membuka file CSS halaman tersebut.
  • Mencari tahu nama elemen dari suatu halaman web yang ingin kita tahu style CSSnya.
  • Melihat di style elemen tersebut di file CSS.

Tapi melakukan hal diatas berulang-ulang setiap kali melihat tampilan yang menarik sangatlah melelahkan. Maka dari itu, bagi yang suka iseng-iseng ngintip style CSS orang, wajib install plugin Web Developer disini. Plugin ini memang bagus banget, maka tidak heran siapa tahu anda sudah pakai plugin ini dan sudah sering mempraktekan cara yang saya jelasin dibawah.

Misalnya sewaktu saya membuka blog webdesignerwall.com, Disitu saya lihat caranya menampilkan potongan kode dengan quoted code. Seperti gambar dibawah ini.

quoted-code

Kemudian klik kanan pada halamannya sorot ke menu Web Developer > CSS > View Style Information. Sekarang, setiap elemen halaman web tersebut bisa disorot dan untuk memperjelas, diberi border warna merah.

show2

Klik elemen itu dan informasi style CSS akan muncul (secara default) di bagian kiri browser.

show3

Sekarang bisa dilihat style CSS halamannya.

  1. Menunjukkan kode CSSnya.
  2. Susunan elemennya.

Yang diatas cuma contohnya saja. Bisa diterapkan di berbagai halaman web. Misalnya saja dihalaman profile friendster orang. Misal orang tersebut mempunyai desain profile friendster yang bagus banget, tinggal lihat saja kode CSSnya seperti apa trus tinggal copy-paste deh style nya Hee hee.

Itu hanya sebagian kecil dari fiturnya web developer. Cuma CSS -> View Style Information saja. Banyak hal yang bisa dilakukan denga plugin tersebut.

CSS Tab Menu dengan List

css-tab-1 Kali ini saya ingin menjelaskan cara “gaul” membuat menu navigasi horizontal, yang biasanya diletakkan pada bagian atas (biasanya dibawah header) halaman web. Mungkin cara ini sudah bukan barang baru bagi mereka yang sudah sering bermain dengan CSS. Tapi tetap saya buat tutorialnya siapa tahu masih ada yang perlu dan siapa tahu nanti saya lupa gimana cara bikin menu seperti ini Tongue.

Kenapa saya bilang gaul ? karena di zaman web 2.0 ini, menu bar seperti pada blog saya dibuat dengan list, bukan lagi dengan table. Baiklah langsung saja saya mulai.

Secara singkat, langkah-langkahnya adalah : Mempersiapkan gambar, Slice, Mempersiapkan HTML, Mengatur CSS.

Mempersiapkan gambar
Terlebih dahulu, buat gambarnya dulu. Buka aplikasi pengolah gambar (saya pakai photoshop). Buat image ukuran 500×150 pixel. Kebiasaan saya, saya selalu memberikan garis bantu (guide) pada gambar.

css-tab-2

Buat kreasi menu yang anda inginkan. Saya akan membuat yang seperti dibawah ini saja.

css-tab-3

Menu A adalah tampilan menu dalam keadaan normal. Menu B adalah tampilan saat menu di hover, sedangkan Menu C adalah tampilan menu dalam keadaan halaman dipilih.

Slice
Langkah berikutnya adalah melakukan pemotongan (slice) pada gambar yang sudah anda buat. Saya memotong gambar seperti pada gambar dibawah.

css-tab-5

Yup, yang diperlukan memang cuma potongan 02, 04, dan 06. Bukan semua gambarnya. Simpan ketiga potongan gambar tersebut menjadi 3 file terpisah dengan Save for Web.

Mempersiapkan HTML
Langkah berikutnya adalam merpersiapkan kode HTML. Untuk latihan, buat folder khusus yang namanya ‘LatihanCSS’ (apa saja boleh kok). Di dalamnya buat folder bernama ‘images’. Letakkan 3 file gambar tadi ke folder image ini.

Buat sebuah file HTML (misal : index.html). Untuk membuat menu, ketikkan tag HTML berikut untuk membuat list.

<div id="menubar">
<ul>
<li><a href="#">Menu A</a></li>
<li><a href="#">Menu B</a></li>
<li><a href="#">Menu C</a></li>
</ul>
</div>

Coba sekarang lihat file index.html di dalam browser. Maka hasilnya akan seperti gambar dibawah.

List masih muncul seperti biasa. Sekarang kita tinggal mengatur style CSSnya.

Mengatur CSS

Kode CSS saya jadikan satu dengan halaman index.html dengan cara mengetikkan kode <style type="text/css">.. kode css ... </style> di dalam file index.html. Anda bisa memisahkan file CSS dan file HTML lalu melakukan link ke file CSS dari file HTML dengan sintaks <link rel="stylesheet" type="text/css" href="style.css" /> .

Pertama, ketik kode CSS dibawah ini :


1. #menubar ul, #menubar li{
2. padding:0;
3. margin:0;
4. list-style:none;
5. }
6.
7. #menubar li {
8. float:left;
9. }
10.
11. #menubar {
12. background:#336633 url(images/menucss_02.png) repeat-x center left;
13. height:30px;
14. }
15.
16. #menubar a{
17. display:block;
18. padding: 3px 5px 3px 5px;
19. }
20.
21. #menubar a:link,
22. #menubar a:visited,
23. #menubar a:active {
24. color:#ccff99;
25. text-decoration:none;
26. }
27.
28. #menubar a:hover {
29. background:#669900 url(images/menucss_04.png) repeat-x center left;
30. }
31.
32. #menubar .current{
33. background:#336600 url(images/menucss_06.png) repeat-x center left;
34. }
35.

Pada kode diatas, ganti teks berwarna biru sesuai dengan lokasi dimana anda menyimpan gambar. Penjelasan kode sebagai berikut :

Baris 1-5 :

Menghilangkan padding dan margin dengan memberi nilai 0. Juga menghilangkan simbol bulat hitam pada list.

Baris 7-9 :

Float list item ( <li>) pada menubar. List kini tidak lagi dari atas ke bawah, tapi dari kiri ke kanan. kalau diberi nilai right, maka List dari kanan ke kiri.

Baris 11-14 :
Memberikan background pada Menubar. Potongan gambar pada slice kedua tadi diulang-ulang penempatannya secara horizontal.

Baris 16-19 :
Membuat link (<a>) agar ditampilkan sebagai element block. Gampangnya, link yang bisa diklik bukan hanya teksnya saja, tapi juga disekitarnya. Area yang bisa diklik berbentuk kotak.

Baris 20-26 :
Memberikan warna pada link (link pada saat di-klik, di-sorot, dan yang telah dikunjungi). Dan menghilangkan garis bawah pada link.

Baris 28-30 :
Mengubah background saat link di-sorot (hover).

Baris 32-34 :
Tambahkan atribut class="current" pada bagian <li> untuk menyatakan link tersebut sedang aktif.

Sekarang refresh halaman index.html yang sudah dibuka tadi, maka hasilnya akan terlihat. Hasilnya kurang lebih seperti gambar dibawah :

css-tab-6

Download file

Sekian panduannya, semoga orang-orang yang searching cara membuat css tab menubar bisa menemukan postingan ini Big Grin. Dan semoga dengan menuliskannya ke blog saya tidak lupa-lupa lagi kode CSSnya Tongue.

Kalau ada yang mengalami kesulitan atau kebingungan, silahkan tanyakan via komentar.

Membuat CSS Tab menu bar

tab-menu CSS Tab menu bar ? apa itu ? untuk lebih jelasnya coba deh lihat bagian atas blog saya yang ada Home, About, dan Blog stats. Seperti itulah maksudnya. Seperti menu yang berbentuk tab pada aplikasi desktop. Hanya saja menu bar saya diatas itu versi yang sangat simpel. Anda bisa membuat yang lebih bagus dan menarik. Wah, pasti sulit ya ? Hehe, tidak. Ternyata sangat mudah, bahkan gak perlu tahu yang namanya koding. Kok bisa ? Ya bisa lah, masa ya bisa dong Big Grin. Bisa mudah karena kita pakai Tool/Aplikasi . Wah Tool/Aplikasi ? bayar dong ? Nggak kok, Tool/Aplikasi ini berbasiskan web dan bisa digunakan secara langsung.

Tool apa yang akan dipakai ? Well, tool yang akan dipakai adalah Izzy Menu. Mungkin sudah banyak yang tahu ya, saya hanya memberi tahu yang belum tahu. Dengan ini, kalian bisa menciptakan Tab menu bar dengan mudah, dengan bantuan CSS dan Javascript.

Sebenarnya izzyMenu bukan satu-satunya (setahu saya) aplikasi berbasis web untuk keperluan membuat Menu dengan CSS. Masih banyak yang lain lagi, coba deh di Google aja.

Segera ingin mencoba ? langsung aja ke TKP. Klik tombol Start Now – Free untuk segera bikin tombol kreasi kalian atau coba dulu lihat Menu Catalogu untuk lihat-lihat apa-apa saja style menu yang tersedia.

Kalau ingin menggunakan gambar sendiri bisa diupload dulu (di website lain) kemudian masukkan link gambarnya. Jika sudah puas dengan hasil kreasi, bisa langsung diDownload dengan mengeklik tombol Download atau klik tombol Get link untuk mendapatkan link ke menu hasil kreasi anda.

Menyimpan font didalam file CSS

embeddable-font Saat kita mendesain halaman web, salah satu unsur yang bisa membuat halaman web tersebut terlihat menarik adalah penggunaan font. Font yang menarik akan membuat tampilan halaman web lebih menarik pula. Tapi, jika orang yang membuka halaman web tersebut tidak memiliki font yang kita gunakan maka akan diganti secara otomatis oleh browser dengan font lain. Beberapa web designer mengatasi hal ini dengan cara menampilkan pesan kecil seperti “download font Myriad untuk tampilan terbaik” supaya orang yang membuka halaman men-download font yang disarankan terlebih dahulu baru kemudian melakukan refresh halaman. Tapi berapa orang yang bersedia melakukan hal tersebut ? Tidak banyak, paling-paling hanya mereka yang mempunyai kecepatan akses internet yang tinggi, atau mereka yang memang ingin membuka halaman tersebut dengan tampilan maksimal.

Berikut ini ada cara agar halaman web bisa tampil menggunakan font yang kita inginkan walaupun orang yang membukanya tidak memiliki font tersebut. Nah lho, bagaimana bisa ? Ya bisa aja. Hal ini bisa dilakukan dengan bantuan CSS, hanya saja tehnik ini masih terbatas pada beberapa browser. Saat ini hanya browser Safari saja yang bisa melakukannya, yahhhSad firefox ga bisa ya. Tehnik berikut memang bukan hal baru, saya hanya ingin memberi tahu bagi yang belum tahu Big Grin.

Seperti apa kira-kira caranya ? Well, coba lihat kode dibawah ini. Potongan kode ini saya dapat dari A List Apart.

@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

Yup, kita menggunakan perintah font-face pada CSS untuk menyimpan URL dimana font tersebut bisa didownload oleh browser. Penjelasan kodenya (yang udah ngerti silahkan dilewati) :

  • Perintah font-face memberi tahu browser nama font yang akan didownload.

  • Perintah src untuk memberi tahu browser dimana font bisa didownload. Dan perintah format untuk memberi tahu browser apa format dari font yang akan didownload, apakah OpenType, TrueType, atau bisa juga Type lainnya.

  • Sedangkan perintah h1 {font-family: "Kimberley", sans-serif} gunanya adalah menampilkan semua Heading 1 dengan font Kimberley. Kalau tidak bisa, maka gunakan font dengan tipe sans-serif.

Nah, seperti yang sudah bisa kalian bayangkan. Sebenarnya yang dilakukan oleh browser untuk menampilkan font yang tidak ada pada komputer adalah dengan melakukan download terhadap font yang dispesifikasikan pada perintah font-face, baru kemudian menampilkan halaman web tersebut dengan font yang sudah didownload tadi. Jadi sebaiknya berhati-hati menggunakan tehnik ini karena akan menambah lama loading halaman (tapi masih lebih cepat daripada membuka halaman profile Friendster yang ada lagunya Big Grin.

Oh iya, seperti yang sudah saya katakan tadi, tehnik ini cuma bisa dilakukan dengan browser Safari. Firefox belum bisa (udah saya coba), ga tau lagi dengan Internet Explorer dan Opera.

Sumber : A List Apart , Surfin’ Safari , Beebo

© 2017 Permana Jayanta

Theme by Anders NorenUp ↑