Akhirnya Ganti Kulit Juga

2/14/2011
ganti template lagi

Akhirnya setelah sekian lama mendesain ulang blogku, sekarang jadilah sudah...
Ya, walaupun nggak sebagus punya Web Designer lainnya, setidaknya aku udah senang dan bersyukur bisa ngerti HTML dan CSS, yang akhirnya bisa ku gunakan :D

Oke, posting kali ini cuma sekedar cerita soal beberapa hal terbaik dari template ini menurut saya sendiri :D Semoga bisa jadi inspirasi untuk kawan2 yang mau desain templatenya juga :)

Halaman Utama
Disini saya memberikan sedikit tekstur yang saya buat dengan sederhana lewat Photoshop bajakan. Saya juga sedikit meng"hack" sejumlah tampilan blogger. Ya, sebenernya sih cuma nambahin sedikit syntax HTML dan CSS aja. Seperti pada Posting di bagian "Halaman Utama".  Kalo kawan liatnya pake browser yang udah ngedukung css transition, pasti akan merasakan betapa kerennya CSS3 :))

Sidebar
Kemudian, di sidebar, di situ terlihat seperti efek mendelep ( halah bahasanya ). Pokoknya itu deh. Sebenernya caranya simpel, nggak perlu pake gambar,

sidebar emboss effect

Tinggal Kasih border: 2px solid; ,terus kasih warna pake border-color: atas kanan bawah kiri; (atas, kanan, dst diganti dengan kode warna)
Triknya tinggal memberi warna lebih gelap pada bagian sisi satunya, dan warna yang lebih terang disisi lainnya. Misal atas dan kanan gelap. Bawah dan kiri terang. atau sebaliknya.

Komentar
Nah, ini dia yang paling saya sukai. Setelah beberapa kali menemui jalan buntu, akhirnya saya mendapatkan hidayah yang telah menuntun saya ke jalan yang benar.
Dengan sedikit ide dan sedikit pengetahuan tentang html, whoala! jadilah comment field ala saya (dengan nada bangga seperti salah satu acara memasak di TV)

comment-field''/

Footer
Disini tidak ada bagian yang mencolok,
Hanya saja pada bagian ini, saya memberikan efek emboss atau timbul (saya gunakan juga pada menu navigasi, dan komentar).



Trik ini juga sangat mudah. Pada dasarnya hanya mengandalkan border. Tapi disini saya menggunakan gambar. Nggak besar kok. Cuma 2x2 pixel juga cukup :D Anda hanya perlu memberi warna gelap dibagian atas dan warna terang di bagian bawah. Sama seperti cara di bagian "Sidebar".

Kesimpulan
Kesimpulannya, disini saya tidak lagi menggunakan 100% CSS. Saya menggunakan sedikit bantuan gambar karena pada dasarnya para Web Designer profesional juga hampir selalu menggunakan gambar pada desain webnya. Jadi, tidak terlalu terpaku pada syntax CSS walaupun itu juga sebenarnya sangat penting. Tapi perlu diingat, memakai gambar juga jangan seenaknya. Pakai se"efisien" mungkin dan usahakan hanya pada bagian yang memang sangat diperlukan seperti Header dan Footer. Selain tidak "memperpuruk" loading, juga sebagai branding kita, atau dengan kata lain ciri "khas" blog/web kita :)

Oke, segitu aja menurut saya dech...
Maaf kalo mungkin bahasanya agak ketinggian ya? maklum, cita2 saya Web Designer...haha moga kesampean... amiiin
Kalo ada yang mau tanya soal edit2 template blogger, jangan ragu untuk tanya ya? sapa tau saya bisa bantu :D
Semoga bermanfaat :))

<ZepT>

10 komentar:

  1. sumpaah , keren banget templatenya mas

    BalasHapus
  2. wuah, keren bener...bagi-bagi dunk ilmunya....
    salam blogger endonesia........

    BalasHapus
  3. wah, design nya kaya efek embos aja, dari Line dan image yang di gunakan... :D
    mau dunk koleksi image embos nya....

    BalasHapus
  4. @Rachmath.co.cc:
    Sebetulnya nggak susah kok mas,
    cuma buat aja di photoshop dengan width 2px dan heightnya juga 2px. 1px juga bisa,
    nanti tinggal diberi warna dengan pencil tool biar lebih mudah...

    liat aja disini untuk contoh yang mungkin lebih jelas
    http://jurusgrafis.com/tutorial/optimasi-garis-1-pixel-pada-desain-website/

    BalasHapus
  5. yupz, sebelumnya makasih udah ngasih penjlasan ttg pixel...
    ohya, jangan di panggil mas dunk,, masa naq sekolahan di panggil mas... ;D :D
    tetap berkarya!!!!

    BalasHapus
  6. wah, keren mas. baru tau kalo blog di blogspot bisa dibuat sekeren ini :)

    BalasHapus
  7. Its A Amazing Blog I Like Its :)

    BalasHapus
  8. makasih banyak atas infonya, sangat bermanfaat dan menarik untuk disimak

    BalasHapus

 
Copyright © Septian DC. All rights reserved | Blunique Designed By Zepuutou
Powered by Blogger.com and W3.org