Webdesign Rules! by Ruben Bos

Memutuskan untuk mendandani blog anda dengan desain anda sendiri setelah menimbang-nimbang apakah sebaiknya anda menggunakan desain sendiri atau desain orang lain? Jika iya, sekarang datang pertanyaan susulannya: Apa saja yang saya butuhkan untuk mendesain blog?

Sederhana saja: Pengetahuan & Tools

Pengetahuan. Yang perlu anda ketahui:

1. Kemampuan desain. Iya dong! namanya juga mendesain Lebih baik jika memiliki sense desain yang baik dan kemampuan menggunakan graphic editor seperti photoshop atau Corel Draw.
2. Pengetahuan tentang HTML
3. Pengetahuan tentang CSS

Pada dasarnya, dua pengetahuan diatas juga sudah mencukupi untuk membuat halaman web yang web standard. Tapi jika untuk mendesain halaman blog, akan lebih mudah jika anda juga memahami hal-hal ini:

1. Memahami konsep website statis Vs website dinamis
2. Lebih baik lagi jika memahami dasar-dasar bahasa pemrograman. Untuk wordpress, pahamilah PHP.
3. Pengetahuan akan Javascript dan Snippet Code seperti Jquery akan lebih membantu anda untuk membuat desain blog anda lebih atraktif.

Tools / Software. Software yang akan anda butuhkan:

1. Software Graphic Editor seperti Photoshop & Corel Draw untuk membuat desain awal.
2. Software Apache web server, agar komputer anda dapat berfungsi sebagaimana server hosting anda. Untuk tugas ini, saya menggunakan XAMPP.
3. Software Code Editor, untuk menulis code CSS, PHP, HTML, dll. Saya menggunakan code editor Notepad++ yang free
4. Web Browser! mulai dari Firefox, Safari, Opera, Chrome, hingga si mimpi buruk web developer: Internet Explorer Kenapa harus ada berbagai browser? Karena setiap browser memiliki cara yang berbeda dalam mengeksekusi script CSS. Jadi tampilan desain dengan CSS anda di Firefox belum tentu sama dengan tampilan di Internet Explorer. Issue ini dinamakan Browser Compatibility. Pastikan anda memiliki Internet Explorer 6 karena browser tersebut adalah populasi browser terbesar dan paling “lain sendiri” dalam meng handle CSS.

Yap, intinya sih itu saja. Tapi jika mau lebih mantap lagi, saya rekomendasikan beberapa add-ons FIrefox yang akan sangat membantu dalam proses mendesain web:

1. ColorZilla - A must have! untuk mengetahui hexacode dari suatu warna. Menemukan warna yang bagus di suatu web? Aktifkan ColorZilla dan klik pada warna tersebut. Tara! Hexacodenya dan nilai RGB atau CMYK nya dapat anda ketahui.
2. MeasureIt - A must have! Untuk mengukur panjang dimensi dari halaman web dalam nilai pixel
3. FontFinder - Menemukan blog yang typographynya sangat enak dibaca? Contek rahasianya dengan FontFinder
4. IE Tab – melihat tampilan IE 6 yang crap dalam firefox
5. Window Resizer – Menampilkan browser dalam berbagai ukuran window.
6. JSView - Melihat CSS code dari satu halaman web dengan “klik kanan + view source”
7. Scrapbook - Mensave halaman web di browser. Jadi jika anda menemukan halaman web yang baik dan cocok untuk dijadikan referensi, anda bisa membukanya saat sedang tidak online.

Yap! Itu dia tadi hal-hal yang dibutuhkan untuk mendesain blog versi saya. Bagaimana dengan versi anda? Ada tambahan?

Enjoy!

Firefox vs. IE by Kay Kim(???)

Bicara tentang add-ons tentunya para netter langsung teringat dengan web browser opensource besutan Mozilla Foundation yaitu Mozilla Firefox dan browser-browser yang memakai enginenya. Add-ons inilah yang menjadi unggulan dan sekaligus kekuatan para komunitas penggunanya. Banyak sekali add-ons yang telah disumbangkan oleh developer baik team maupun perorangan.

Berikut adalah beberapa add-ons untuk Mozilla Firefox yang telah saya coba dan sangat membantu untuk kegiatan bloggging.

1. ScribeFire Blog Editor 3.3.1 – Add To your Firefox

ScribeFire adalah ekstensi untuk web browser Mozilla Firefox yang terintegrasi dengan browser untuk membantu anda dengan mudah mempost tulisan ke blog anda. Dengannya anda bisa melakukan drag and drop teks terformat dari halaman web yang sedang anda lihat, mengambil catatan, dan mempost ke blog Anda. Cukup dengan menekan F8 maka akan muncul editor terintegrasi dari Scribefire maka anda bisa langsung mempost tulisan yang anda inginkan ke blog anda. Atau dengan klik kanan > ScribeFire > Blog this page, anda bisa mempost ulang tulisan bagus yang anda temukan di ranah web (dengan etika mempost tulisan orang lain tentunya).

Untuk setting, ketika anda menekan F8, di bagian kanan anda akan menemukan Launch Account Wizard. Selanjutnya anda tinggal mengisi informasi yang diperlukan ScribeFire untuk mengakses blog anda seperti URL blog anda, username, dan password. ScribeFire ini mendukung banyak jenis blog service dan blog platform. Diantaranya yang sudah sangat sering kita dengar yaitu Wordpress.com, Wordpress.org, Blogger.com, MovableType, TypePad, Drupal dan lain-lain.

2. Clipmarks 3.5.1

Add-ons ini bekerja seperti salah satu hobi manusia yaitu clipping. Kalau normalnya dilakukan dengan media koran dan majalah, dengan add-ons ini anda dapat melakukannya untuk halaman website. Salah satu kemampuannya yang sangat membantu para blogger yaitu kemampuan untuk mempost koleksi clip yang sudah anda punya. Tinggal klik tombol di toolbarnya lalu Blog Clip jika sudah melakukan clipping. Lihat demo disini http://www.youtube.com/watch?v=CZG_inLfz9U

3. Zemanta – Add to Your Firefox

Zemanta adalah add-ons firefox yang membantu anda untuk memperkaya tulisan anda dengan mengenali topik dan menyugesti dengan banyak tag, link, related articles dan gambar yang berguna ketika anda menulis di text editor blog anda. Contohnya saja ketika anda sudah menginstall Zemanta dan membuat post baru di Wordpress, maka tampilan wordpress anda akan berubah dengan tambahan tool dari Zemanta. Lalu anda cukup mengklik sugesti dari zemanta satu persatu atau apply all untuk mengapply seluruh sugesti yang diberikan Zemanta.

Zemanta mendukung platform seperti WordPress, Blogger, TypePad dan lainnya. Anda bisa mencoba demonya disini sebelum menginstallnya di firefox.

4. BlogRovR 1.1.804 – Add to your Firefox

Yang satu ini adalah add-ons untuk mendukung kegiatan blogging anda. BlogRovR adalah teman untuk pembaca blog. BlogRovR menunjukkan apa yang dikatakan blogger favorit anda tentang apapun saat anda sedang browsing dan on-the-fly pada saat anda browsing. BlogRovR juga menampilkan ringkasan posting dalam tray kecil. Jadi anda cukup klik pada ringkasan untuk membaca posting lengkap.

BlogRovR juga membantu anda menemukan konten yang relevan terutama dari blog. Jika anda juga seorang twitter, BlogRovr akan membantu anda untuk mentweet halaman yang sedang anda lihat dengan mengklik Tweet This Page dari toolbanya. Namun untuk menggunakannya anda perlu melakukan sedikit registrasi di homepage dari add-ons ini. Fungsinya agar BlogRovR mengetahui jenis bacaan favorit anda dan akan menyugesti konten yang relevan untuk efisiensi waktu baca anda.

Selain untuk Mozila Firefox, bagi anda yang menggunakan Internet Explorer dari Microsoft, terdapat juga plug-in yang sama untuk anda tambahkan pada IE kesayangan anda

1. Zemanta plugin
2. Clipmarks
   Anda dapat melihat demonya disini
3. Selain itu anda bisa menggunakan plug-ins Windows Live Writter yang terintegrasi dengan web browser IE ini.

Dengan adanya add-ons dan plug-ins tambahan ini, semoga kegiatan blogging anda menjadi lebih menarik dan mengasyikkan. Sebab add-ons tersebut memang dikembangkan untuk membantu kemudahan ber-blogging-ria anda.

P.S

Untuk teman-teman blogger, ada yang ingin menambahkan saran? Silahkan suarakan pendapat anda melalui kolom komentar

Happy Blogging!

Bosan dengan tampilan blog anda? sedang mencari – cari theme untuk blog anda? mencari theme wordpress yang bagus, unik dan tidak pasaran? Coba buka blog yang satu ini :

FreeThemeLayouts – Amazing, Free Wordpress Themes for Instant Download

jadi ceritanya kemarin kami melihat sebuah iklan di banner salah satu blog yang kami kunjungi, dan iseng – iseng kami mengkliknya dan nyasarlah kami ke blog yang satu ini. Kesan pertama yang kami dapat setelah datang ke FreeThemeLayouts biasa saja. Terlihat seperti “another place to download free themes”. Namun setelah kami perhatikan, eh, beberapa theme GRATIS yang di tawarkan untuk di download keren juga! “Kena banget” kalau kita berbicara berdasarkan 2008 design trends yang dipublish oleh Webdesignerwall. Ada CreativeArt Theme dengan pattern Grunge, ada Seabreeze Theme dengan pattern flower dan vector art, DarkSpace dengan efek paperclip yang pas, WarmAutumn dengan gradasi warna yang indah, dan beberapa theme lain dengan tampilan yang luar biasa. Meskipun ada juga beberapa tampilan juga themes yang “terlihat biasa”, tapi banyak diantaranya disediakan secara GRATIS UNTUK Di DOWNLOAD dengan kualitas premium.

Well well, sedang mencari themes untuk blog anda? segera meluncur ke FreeThemeLayouts.

Enjoy!

Yes, themes kedua produksi bloggingly!

dan themes ini masih bernuansa looks – alike . kalau theme wpressbook yang kemarin bernuansa facebook, kali ini bloggingly membuat themes yang bernuansa mesin pencari nomor satu di planet bumi : Google Search. please welcome, gthemes 01.

beberapa hari yang lalu, saat heboh – heboh chrome keluar, tiba – tiba bermunculan lah themes2 bernuansa chrome. Mulai dari themes firefox hingga wordpress. Hmm.. kami jadi berfikir, Chrome kan baru, dan masih beta pula. Kenapa tidak membuat yang bernuansa google search saja?

Dan jadilah Gthemes ini

monggo, silahkan di Download.

Gthemes. a Google Search looks alike wordpress themes. made by F

Gthemes 01

[Download not found]

• 2 Column
• Widget Ready
• Caption Ready
• Untuk mengganti image di kanan atas, di overwrite saja dengan file lain yang diberi nama sama dan ukuran sama
• pada footer di bawah search, ada dua link kosong yang bisa di customize. Edit saja melalui Design > Theme Editor > footer.php
• tested on firefox 2 and IE 6

Ohya, jika anda menemukan beberapa bug atau keanehan, silahkan komentar di post ini. Terima kasih untuk dukungannya.

Enjoy!

sudah membaca tulisan kami tentang review blog bestwebgallery? Blog yang berisikan thumbnail2 desain blog keren itu. Nah, tadi bloggingly blogwalking sana – sini, dan ternyata menemukan sebuah theme yang dapat anda gunakan secara gratis, in case jika anda hendak membuat blog anda menjadi gallery seperti di bestwebgallery . Please Welcome : CSS Gallery 1.0

CSS Gallery 1.0 Themes

Themes ini memiliki struktur yang agak mirip dengan bestwebgallery punya : menampilkan image thumbnail pada haaman index.php. agak beda sedikit sih, namun cukuplah. Untuk menjalankan theme ini sesuai dengan tujuannya membuat blog gallery, anda memerlukan 2 plugin tambahan :ShiftThis dan WP-PostRatings. untuk lebih jelasnya sih, anda dapat membaca instruksinya di halaman README nya

Ok then, langusung saja download CSS Gallery disini

Enjoy!

Oke. untuk sebagian dari anda menganggap judul ‘terindah‘ diatas seperti terlalu hiperbolis. Tetapi keadaanya memang begitu. Untuk skala theme free, ini merupakan theme terindah yang pernah saya lihat. beberapa saat yang lalu saya blogwalking dan menemukan themes infinity yang didesain oleh yichi dan dirilis oleh smashing magazine ini.

infinity themes

Tampilan infinity sangat elegan. kombinasi transparansi hitam, vector graphics, dan gradasi warna aurora langit yang sangat memukau. satu hal lain yang menarik adalah, pada halaman index.php nya infinity menggunakan image untuk section perpostnya yang ditimpa dengan title post. Kesan majalah begitu. seperti unstandard-nya 5thirtyone.com. secara default menampilkan faviconnya sendiri, dan section untuk FlickrRSS lengkap dengan pluginnya. satu hal saja yang agak menenyebalkan dari theme ini : tidak widget ready. Ya maklum lah, memang kebanyakan theme yang artistik begini tidak support widget. Untuk mempertahankan positioning dan keindahan desainnya mungkin? bisa jadi.

Ok, silahkan langsung download saja disini.

Enjoy!

kemarin saya browsing sana – sini, dan kami membuka Google lalu melakukan pencarian dengan keyword “Greatest Wordpress theme“. Ternyata, halaman hasil pencarian ( SERP – Search Engine Result Page) google memberikan beberapa link seperti biasa, namun ada satu hal yang menarik perhatian kami. ada dua link yang merujuk kepada theme wordpress bernama IKARUS. satu link ber title “The greatest Wordpress theme ever made!” dan satu lagi bertitle “IKARUS – The Greatest Premium Wordpress Theme Ever Created …”

Penasaran dengan theme bernama ikarus tersebut, ( kok bisa – bisanya dua link halaman pertama hasil pencarian Google merujuk theme ini ) kami memutuskan membuka link tersebut, dan melihat screenshotnya. :

ikarus screenshot

Well, sepintas tidak terlihat terlalu spesial – spesial amat sehingga patut di bilang greatest wordpress theme. Ada spesialnya juga sih, theme dengan efek glossy ini banner ready. secara default memberikan 6 space untuk banner 125 X 125 piksel, satu space banner 468 X 60 piksel diatas dan satu space banner 468 X 60 piksel dibawah sehingga total ada 8 space banner seara default.

Agak bingung juga, tapi kami memutuskan untuk mendownload filenya yang ternyata lumayan besar, 1,1 MB. wow.

selesai di ekstrak, kami install di localhost dan di activate lalu kami kunjungi dashboard admin dan halaman mukanya, ternyata WOW! pantaslah ada yang menyebut theme ini sebagai “The greatest Wordpress theme ever made!”. Meskipun secara desain okelah-masih-banyak-yang-lebih-baik, tapi secara fungsionalitas, theme ini di lengkapi berbagai fitur yang mungkin tidak akan bisa anda dapatkan di theme biasa. berikut ini kelebihan IKARUS nya :

1. 8 space banner tersedia secara default
2. dashboard page IKARUS yang menampilkan live preview dari halaman muka, konfigurasi elemen CSS ( seperti pada kubrick ), setting image header, setting sidebar dan banner management
3. link social bookmarking pada tiap post
4. sidebar tags, videos, dan latest yang disusun secara tabbed dengan efek fade in fade out
5. footer most comments
6. link “More Active Post” pada tiap footer post
7. menu admin yang akan tampil di halaman antar muka jika anda login.
8. halaman readme berisi instruction pada dasboard admin

Phew! dengan sedemikian rupa fitur yang dapat di download secara gratis, theme ini sangat baik untuk referensi jika anda membuat theme. . silahkan ke sini untuk mendownload IKARUS.

Enjoy!

saya menemukan satu theme gratis menakjubkan lagi : outdoorsy 1.0 theme buatan spencer.

outdoorsy 1.0 themes

theme ini dibangun dengan efek pattern kertas usang yang kuno, seperti kertas peta bajak laut yang sudah menguning, dengan background rumput, potongan bunga dan pencil yang membuat theme ini terlihat sangat – sangat fancy, klasik, dan natural. kesan yang ditimbulkan oleh design ini adalah satu kata sederhana : hangat. cocok sekali untuk anda yang sudah bosan dengan efek transparansy – glossy yang kaku, dan menginginkan tampilan yang natural untuk blog anda.

Setelah kami uji, ada beberapa hal yang harus diperhatikan :

1. theme ini belum mensupport caption wordpress 2.6. tapi tenang saja, kami sudah membuat panduan untuk mengatasi ini.
2. belum support gravatar. install easygravatars untuk menampilkan gravatar
3. karena theme ini menggunakan banyak file image untuk membangun tampilannya, siap siaplah konsumsi bandwith anda akan meledak untuk menampilkan tampilan indah dengan theme ini
4. sudah widget ready. syukurlah.

tertarik? silakan langsung download disini.

Enjoy!

Well, saya menemukan sebuah theme gratis dengan kualitas design yang sangat tinggi buah karya evaneckard. please welcome : Gotham Nights 1.0

Gotham Night Theme Header

theme wordpress ini berkonsep elegant dengan efek glossy yang tidak pasaran. ambiencenya aseperti glossy-nya macintosh. lihat boks search-nya :

yaiks! fancy sekali

Wow, elegantly amazing! didukung dengan efek kombinasi gradasi warna yang menyejukkan di headernya dan tampilan minimalis elegant, dan juga satu hal yang saya sangat sukai dari theme ini : sidebar dengan tab yang menggunakan script jquery sehingga ketika anda mengklikkan tabnya, tabnya akan berganti secara elegant dengan delay seper-berapa detik. smoothly.

Namun ada dua hal yang sangat disayangkan dari theme ini: pertama: tidak widget ready! oalah, keren2 tapi tidak widget ready. hmm.. pelajari cara meng-widget readykan theme di post ini. selalu backup file dan lakukan denga cermat ya. saya sudah menguji langkahnya, namun tidak bertanggung jawab atas kekacauan karena kesalahamn pengaplikasiannya. yang kedua adalah : boks untuk commentnya kecil sekali! hmm, anda harus memberikan sedikit “sentuhan” di file CSSnya

tertarik menggunakannya? silahkan langsung meluncur dan download di TKP.

Enjoy!

tadi saya blogwalking ke smashingmagazine, – blog yang menyediakan berbagai informasi mengenai web blogging yang sangat usefull, dan ternyata mereka merilis sebuah theme free dengan kualitas premium! please welcome :

Notepad Chaos. – a free profesional wordpress theme

notapad chaos screenshot

Theme ini berkonsep illustrated background yang agak grungy. dilengkapi dengan pernak – pernik handwritten notes dan efek paperclips. Jika anda sudah membaca post mengenai perkiraan tren design 2008 yang di post oleh Webdesignerwall, anda akan menemukan bahwa theme ini memenuhi 2 dari berbagai perkiraan tren design yang diperkirakan akan “naik” di tahun 2008 ini. Well, a very artistic job.

efek paperclip yang sangat cantik

Setelah kami download dan uji, trernyata terdapat beberapa kelebihan dan kekurangan theme ini :

plus :

• artistik. sebuah karya seni web design yang indah. jika anda bosan dengan efek glossy itu – itu saja dari banyak teme gratisan yang beredar, theme ini akan sangat memuaskan dahaga anda. *tsah
• belum banyak blog yang saya temui menggunakan theme ini. kesempatan untuk menjadi unik
• sesuai trend design 2008
• menyediakan link untuk RSS feed
• tersedia tiga link page by default : home, about, dan archive
• tersedia file .psd ( di download terpisah, dan tentu saja : gratis ) untuk personalisasi

minus :

• berat. teme ini menggunakan banyak file image. anda tahulah kondisi jaringan internet Indonesia. pilih tampilan atau konten yang di dahulukan?
• tidak mensupport image caption wordpress 2.6
• Tidak widget ready. ini resiko theme yang pernak – pernik nya banyak . sebenarnya bisa dibuat widget ready sih. baca post ini. namun jika anda lakukan itu, tag id dan classnya pasti berubah. hhmm.. tidak saya rekomendasikan
• untuk mengoptimalkan penggunaannya, anda harus mengedit beberapa file .psdnya. agak ribet
• karena gratis, kemungkinan adanya blog lain yang menggunakan theme ini besar. generik.

overall, theme ini memanjakan pengunjung dengan tampilan ciamiknya, tapi mengecewakan pemilik bog yang mengutamakan fungsionalitas.

jika anda tertarik, silahkan di download disini