Apr 12, 2010
Redesain Bloggingly April 2010
oleh Fikri
Akhirnya: bloggingly kembali diremajakan diredesain! Setelah delapan bulan (waktu terlama bloggingly menggunakan sebuah theme – seingat saya) dari redesain terakhir kami, akhirnya kami bisa membuat tampilan bloggingly fresh lagi. Saya demikian antusiasnya dengan theme ini karena theme ini merupakan manifestasi dari apa yang saya dan japestinho lakukan akhir-akhir ini: menerima berbagai job konversi PSD ke theme wordpress dari webdesainer-webdesainer lokal yang sangat berbakat. Benar juga kata orang terdahulu: orang yang bergaul dengan tukang minyak wangi akan kecipratan wanginya. Tidak salah punya teman (dan klien) web desainer, kecipratan bisa (sedikit) desain juga nih, setidaknya untuk produksi ‘dalam negeri’ dulu 
Cerita dibelakang redesain april 2010
Masih setia dengan pallete warna merah dan putih seperti biasa,sekarang tampilan bloggingly juga menggunakan gradasi warna abu-abu untuk memberikan kesan simpel dan elegan. Dalam redesain kali awalnya sangat terinspirasi oleh tampilan beranda WordPress.com yang super simpel dengan jejeran thumbailnya itu. Di tengah proses pelaksanaannya, halaman beranda informationarchitecs dengan image besar dan multi-kolomnya memberi pengaruh juga terhadap redesain bloggingly kali ini.
halaman beranda WordPress.com
halaman depan informationarchitecs.jp
halaman beranda bloggingly – april 2010.
What’s new on april 2010′s redesign?
Wow, banyak sekali hal baru yang kita redesain! Tanpa perlu panjang lebar mari kita jelajahi apa saja yang ‘baru’ kali ini:
1. Logo & tagline baru
Yep, selamat tinggal logo lama berbasis Arial yang datar dan kurang dinamis. Selamat datang logo baru yang lebih seksi dan dinamis! Logo bloggingly kali ini kita buat menggunakan openType font bernama Fontin Sans yang dapat diunduh secara gratis di exljbris Font Foundry.
Tagline pun tidak luput dari redesain kali ini: what blogging is all about pun “dipermak” hingga menjadi ulasan seru seputar blogging (terinspirasi oleh “seru”-nya Jurus Grafis). What do you think?
2. Dropdown menu + re-kategorisasi
Yap, kita melakukan kategorisasi ulang dan menampilkannya sebagai dropdown. Lebih simpel dan elegan. Kategorisasi panjang bloggingly yang lama kini tampil dengan bahasa Indonesia yang ringkas dan nasionalis *halah*.
3. Efek CSS3
Yap, terdapat banyak sekali penggunaan CSS3 pada tampilan bloggingly kali ini. Efek multi kolom pada halaman beranda, shadow pada dropdown menu, text-shadow, rounded corner pada banyak elemen, dll. Itulah mengapa kami menyarankan anda untuk menggunakan browser terbaru di footer kami. Masih menggunakan browser lama? Segera upgrade! Masih menggunakan Internet Explorer 6? Gila, sudah tahun 2010 loh ini.
Ohya, seperti yang dilakukan Google, kami juga sudah tidak lagi mendukung Internet Explorer 6. Kita membiarkan tampilan kami super crap di Internet Explorer 6 agar para pengguna Internet Explorer 6 yang belum kembali ke jalan yang benar segera menggunakan browser modern.
4. Quotes collection
Lihat sidebar bloggingly: sekarang kami menampilkan kutipan-kutipan keren mengenai blogging yang digilir secara random.
5. Mobile version
Yap, bloggingly juga kini tersedia dalam versi mobile. Coba gunakan handphone anda untuk mengakses bloggingly 
6. Full custom theme
Tidak hanya halaman depan dan halaman artikel saja yang kustom. Perhatikan halaman statis, halaman kategori, halaman hasil pencarian, halaman author bahkan halaman login dashboard.
7.Threaded comment
Kini theme kami sudah dioptimasi untuk threaded comment! Berkomentar dan berdiskusi melalui kolom komentar akan lebih menarik lagi sekarang
8. Share article page
Yap. Elemen merah -yang menurut beberapa teman cukup annoying, beritahu kami apa yang anda pikirkan mengenainya- yang fixed itu di halaman artikel itu: selesai membaca post keren di bloggingly, anda kini dapat dengan mudah memberi tahu teman-teman anda di facebook, twitter, google buzz atau bahkan melalui email via addtoany
The best part of it
Bagian terkeren (menurut saya) dari redesain kali ini adalah semua efek dan teknik yang kami gunakan untuk redesain kali ini ada terdapat di blogosphere! Kami bahkan membuat blog baru bernama Outstando untuk berbagi apa yang kami ketahui mengenai web design dan web development. Beberapa teknik yang kami gunakan pada redesain kali ini sudah kami post disana. Sisa tutorialnya akan kami usahakan sesegera mungkin
Teknik-teknik lain yang kami gunakan:
- Semua tutorial yang terdapat di Outstando
- Thumbnail halaman depan: Automatic WordPress thumbnail without custom field (ProBlogDesign)
- Dropdown menu: How To Create Dropdown Navbars for Your Subpages and Subcategories (ProBlogDesign)
- Efek-efek CSS3: Inilah Kehebatan CSS3 (CahCepu)
- Tabbed sidebar: jQuery Tabs (jQueryForDesigners)
- Halaman login custom: Custom WordPress Login Screen (ProBlogDesign)
- Separator-separator 2 piksel: Optimasi Garis 1 Pixel Pada Desain Website (Jurus Grafis)
- Efek tooltip pada ikon subscription: jQuery Tutorials for Designers (WebDesignerWall)
- Elemen-elemen gradasi dan efek inset: Membuat Efek Letterpress Dengan Mudah di Photoshop (Jurus Grafis)
Apa yang anda pikirkan?
Oke, cukup dari saya mengenai redesain bloggingly kali ini. Sekarang beritahu kami apa pendapat anda mengenai redesain bloggingly bulan April 2010 kali ini. Mari, ditunggu di kolom komentar 
Dapatkan update harian bloggingly GRATIS di RSS Reader anda! Subscribe sekarang RSS FEED BLOGGINGLY !
Apa itu RSS? Kenali RSS di halaman ini
berlangganan via email:
Richard Fang @ Jurus Grafis bilang,
makin lama makin mantab lah!
on 12 Apr 2010 / 20:36
Arham bilang,
sependapat sama Fang
btw
Font nya menarik nih. pakai font jenis apa aja kalau boleh tau?
on 12 Apr 2010 / 22:17
Fikri bilang,
thanks ham
fontnya pake PT Sans. bisa diunduh gratis disini: http://www.fontsquirrel.com/fonts/PT-Sans
on 13 Apr 2010 / 04:25
radityawirayoga bilang,
Wah makin mantep aja ni blog!!!!!!!!!!!
on 18 Apr 2010 / 17:07
Fikri bilang,
thanks
on 18 Apr 2010 / 19:12
Fikri bilang,
wow, thanks chard. desain-desain lu dan tutorial – tutorial di jurusgrafis banyak menginspirasi gue nih
on 13 Apr 2010 / 04:19
rismaka bilang,
Jujur saja, tampilan sekarang makin bagus. namun saya merasa terganggu dengan elemen merah yang “terus melayang” di bagian kanan ini.
TerKadang mata saya juga ingin membaca apa2 yang ada di sidebar, namun terhalangi oleh elemen merah tsb. Ada baiknya sharing page tsb bisa ditutup.
on 12 Apr 2010 / 21:21
Fikri bilang,
thanks untuk masukannya. Yep, banyak yang memberi masukan untuk satu elemen itu agar dimodifkasi lagi. Akan kita cari solusi yang tepat sesegera mungkin
on 13 Apr 2010 / 04:21
yonkironic bilang,
sependapat dg rismaka, elemen merah itu mmg mengganggu, tp bsa diatasi dg merubah warna yg lebih soft, spt abu-abu misalnya, jd ngga’ terlalu mencolok..
..
btw, desainya bagus
on 19 Apr 2010 / 10:58
Fikri bilang,
trims
hihi, hampir semuanya kurang setuju dengan share box itu ya. oke lah, akan diperbaiki 
on 20 Apr 2010 / 05:32
AMYunus bilang,
Wah, selamat!
hehe.
Amin
Bloggingly mempunya8i brand khusus nih kayaknya. ada ‘{…}’ nya
Sangat menginpirasi. Terima kasih atas sharingnya. Semoga nanti bulan Juni Juli blog saya juga udah ganti theme.
on 12 Apr 2010 / 21:46
Fikri bilang,
hihi, tidak ada inspirasi khusus sebenarnya, tapi tutorial2 yang ada di ProBlogDesign itu memang sangat ciamik dan tepat guna. Saya juga sempat menyumbang beberapa tutorial disana
on 13 Apr 2010 / 04:23
ilmanakbar bilang,
huaaaa.. asli keren.. d^^b
hiks hiks.. jadi inget Ayo ngeBlog udah hampir 3 tahun ga ganti2 themesnya.. ga sempet, hiks..
kalo feedback, bener sih, yg kotak share di sebelah kanan itu cukup annoying.. terutama pas di atas mulai scroll pelan2, eh mukanya fikri ketutupan. terus pas scroll lagi, sidebarnya ketutupan tulisannya.
yang paling penting sih sebenernya bukan annoyingnya. pas nulis komen kaya gini, kotak beritahu temannya ada di sebelah kanan komentar. nggak terlalu relevan buat ada di samping kotak komentar kan?
mungkin bisa ditaro di atas, di paragraf awal banget di bawah gambar, biar masih tetep mencolok.. standar ukurannya tombol share di FB & share di twitter dari twitmeme pas banget kok (cek univind.com/blog deh), gede dan cukup mencolok, tapi ga ngeganggu..
overall, mantaaab *jadi ngiri
on 12 Apr 2010 / 22:37
Fikri bilang,
Thanks man. iya tuh, banyak yang ngasih masukan tentang fitur sharenya. sedang kita pikirin lagi dimodifikasinya seperti apa
hihi, ganti atuh itu theme AyoNgeblog. masa headernya masih “di tahun 2008″ saja
on 13 Apr 2010 / 04:29
adhi bilang,
keren, gan :thumbsup:
dengan theme ini jadi lebih keliatan bahwa empunya blog memang seorang wp theme developer. hehehehe…
sekedar saran:
kotak share gak perlu dipaksakan tampil seperti itu. memang keren, tapi tidak fungsional. karena dia menghalangi ini dan itu seperti disebut temen2 di atas. saran saya sih, kotak share itu letakkan di setiap akhir postingan aja, gan…
on 13 Apr 2010 / 08:16
Fikri bilang,
hihi, nuhun kang Adhi, ini mah kecipratan ilmu tmen2 developer theme lainnya
hahay, satu lagi pendapat kalau share element nya nyebelin. roger that gan
on 13 Apr 2010 / 20:09
Agus bilang,
Semua sudah profesional look,mantap, cuman sayang nya ada 1 bagian yg kelupaan.
Bagian fotonya Fikri, harusnya di foto pake DSLR, di touch up, baru di pasang
Kidding loh
on 13 Apr 2010 / 15:06
Fikri bilang,
wahahaha, yang satu itu mah tidak bisa diredesain Pak, sudah bawaan dari sananya :p
on 13 Apr 2010 / 20:25
Panduan Blogging bilang,
WAh redesain theme lagi ya mas, kalau saya lebih suka menggantinya atau memodifnya. Yang penting jadi SEO Friendly lah
on 13 Apr 2010 / 15:48
Fikri bilang,
hihi, selera orang berbeda2 sih. kalau saya saat ini lebih senang dengan kontrol penuh atas desain
on 13 Apr 2010 / 20:29
Jamal Hacker bilang,
Saya coba untuk redesain blog saya, setelah saya membaca tentang tutorial membuat themes diblog ini. Mohon bantuannya mas
on 13 Apr 2010 / 15:50
Fikri bilang,
silahkan diikuti tutorial2nya
on 13 Apr 2010 / 20:29
zam.web.id bilang,
cukup terkejut dengan tampilan baru dan tidak biasa ini, pemakaian css3 di halaman depan (3 kolom) sangat tepat
,
saya kurang sreg dengan kotak “beritahu teman” pakai position fixed, cukup mengganggu
on 13 Apr 2010 / 19:49
Fikri bilang,
hihi, itu terinspirasi dari informationarchitects.jp. Itu juga diberi tahu Richard
hmm.. banyak sekali yang memberi masukan mengenai bagian itu. harus segera diperbaiki nih
on 13 Apr 2010 / 20:38
oglek bilang,
keren redesainnya, semoga isinya juga makin keren
BTW, saya setuju dengan Cak Zam, kotak “beritahu teman” ini agak mengganggu.
on 16 Apr 2010 / 18:13
Fikri bilang,
hihi, thanks. Roger that
on 17 Apr 2010 / 18:33
Asran bilang,
mas gmana carax daftar unt buat blog yg bisa ddeteksi google
on 05 May 2010 / 00:03
Fikri bilang,
struktur markup yang baik, konten yang berkualitas dan bermanfaat untuk pembaca (bukan hasil copy paste / bombardir keyword), dan diketahui oleh blogger lain sehingga blog anda di link dengan suka rela
on 05 May 2010 / 05:27
ardianzzz bilang,
saya juga cukup terganggu dengan kolom ‘beritahu teman’. Jika memang akan dipasang secara agresif mungkin dapat dalam bentuk bar dan diletakkan di bawah, sehingga memperkecil gangguan.
Mungkin juga disetel opacity-nya biar tidak terlalu menjadi pusat perhatian
on 17 Apr 2010 / 08:13
ardianzzz bilang,
satu lagi, tahun 2010 masih pake tag cloud?
hehe, kidding
on 17 Apr 2010 / 08:14
Fikri bilang,
hihi, biarpun menurut salah satu blog web design tag cloud sudah terlalu usable lagi, tapi saya belum menemukan cara yang tepat untuk menunjukan “apa saja yang dibahas” di bloggingly
on 17 Apr 2010 / 18:32
Fikri bilang,
hihi, banyak yang keberatan dengan kolom itu ya. sedang kita cari cara supaya lebih enakeun nih. maunya sih dibuat seperti http://davidwalsh.name/
on 17 Apr 2010 / 18:33
roniwahyu bilang,
saya sangat “terganggu” dengan blog ini…. hehe..kidding
banyak inspirasi dan banyak hal yang bisa saya pelajari disini…
mangstab gan…
nice share matur nuwun
on 17 Apr 2010 / 09:11
Fikri bilang,
hihi, nice to hear that. thanks
on 17 Apr 2010 / 18:31
Askar Sabiq bilang,
bener2 keren kang.. tap yang beritahu teman itu emang cukup annoying
on 18 Apr 2010 / 07:03
Fikri bilang,
hihi, thanks. wah, satu lagi yang punya pendapat sama euy :p
on 18 Apr 2010 / 19:04
kharis sulistiyono bilang,
wow, template barunya keren! iya, aku juga kegangu sama kotak beritahu teman.
Aku sempat clingak-clinguk waktu di halaman home.
Post terbaru ternyata dibagi jadi 3 kolom yah?
on 18 Apr 2010 / 13:38
Fikri bilang,
wihii, thanks. sip deh, semuanya pada memberi masukkan tentang kotak itu.
gimana pendapatnya tentang halaman depan? yap, bisa dibilang 3 column, tapi kalau saya sih lebih suka bilang ini 2 column dengan satu child column karena yang tengah itu ngikut yang kiri sebenarnya :p
on 18 Apr 2010 / 19:25
Yanuar bilang,
Mas fikri, kalu mau buat thread comment tanpa plugins gmna?
on 20 Apr 2010 / 13:19
Fikri bilang,
masuk settings > Discussion > enable threaded comment. Seingat saya, dari versi 2.8 (atau 2.7 ya? CMIIW) sudah bisa kok threaded comment tanpa plugin.
tapi dengan catatan: themenya harus support fitur ini dulu
on 30 Apr 2010 / 21:08
bukan detikcom bilang,
Keren mas Fikri…tampilannya seger, simple…tapi bikin penasaran untuk dibuka halamannya satu-satu. Tampilan thumbnail begitu memang bikin orang penasaran ternyata yah.
Cuma ada satu hal yang saya mau tanyakan nih mas. Waktu saya berkunjung tadi. Saya lihat bagian tulisan headline tentang “halaman about me” itu di halaman depan.
Nah, kalau saya lihat di screen shot di postingan di atas, seharusnya di bagian headline itu ada tombol bertuliskan “selanjutnya” untuk mengunjungi halaman yang di headline. Tapi koq di saya gak keluar yah tombolnya. Sementara title alias judul postingnya gak bisa di klik. Jadi tadi sempet bingung mau mengunjungi halaman posting “Membenahi Halaman About Me” dari mana. Untungnya di sidebar ada linknya.
Btw, Saya browsenya pakai chrome.
on 23 Apr 2010 / 00:02
Fikri bilang,
Oh, tombol “selanjutnya” itu ada tepat setelah excerpt di halaman depan. Agak membingungkan ya kalau title tidak bisa di klik itu? Hmm.. we have to fix this
Anyway, thanks buat masukannya
on 30 Apr 2010 / 21:11
Arif Widi bilang,
Wih mantap, dulu bloggingly desainnya biasa biasa aja, tapi sekarang luar biasa.
Setuju sama yang di atas, box beritahu teman itu cukup mengganggu. Terus drop down menunya jadi kehalangan sama box itu, mungkin z-index nya.
on 23 Apr 2010 / 13:14
Fikri bilang,
yap, z-indexnya boks beritahu teman itu memang diset paling atas.
dari kemarin mau kita bereskan item ini tapi terbentur urusan kerjaan dan akademik terus nih *doh* LOL
anyway, thanks buat masukannya ya
on 30 Apr 2010 / 21:12
Saiful bilang,
Wah.. ajib.. ajib..
aku suka banget nih template yang ini!
Jujur aja,
kalo dulu aku buka Bloggingly malesnya minta ampun, tulisan dan artikelnya sih menarik banget, cuma tampilannya itu loh yang monoton banget *kayak punyaku aja nggak
tapi sekarang seneng banget buka ni blog,
dari tadi cuma bisa geleng2 kepala liat desainnya.. mantap!
on 25 Apr 2010 / 17:09
Fikri bilang,
hihi, kenapa tidak bilang dari dulu, jadi kita bisa percepat redesainnya
sip, terima kasih untuk masukannya
on 30 Apr 2010 / 21:16
gardino bilang,
walah…komeng saya yang sebelumnya ndak muncul neh? Anyway cuma mo info aja, itu tombol bertuliskan selanjutnya di headline halaman depan gak muncul. Jadi susah juga kalau mau baca tulisan yang paling atas. Paling lewat sidebar posting terbaru
on 26 Apr 2010 / 00:04
Fikri bilang,
wah, ada yang mendapati kesulitan seperti itu ya? sip, terima kasih untuk masukannya
on 30 Apr 2010 / 21:17
Tantan bilang,
Mantap nich design barunya
Congratz!
on 05 May 2010 / 23:23
Ivan @ Goorme bilang,
Setelah lama ga mampir, nih Bloggingly jadi makin mantab deh.
You’re definitely growing! Excellent!
Kalo boleh sedikit usulan, perhatiin detailnya. border lah, atau 1-line shadow, begituan yang bikin semakin bagus.
Thumbs up!!
on 16 Jun 2010 / 21:33
Fikri bilang,
Thanks van. Haha, dari segi tampilan udah oke, tapi dari segi konten malah kacau beliau ketarik sana sini waktunya LOL
on 19 Jun 2010 / 12:39
Kojack bilang,
Saya naksir ama cara meletakan tag cloud di footer seperti blog kamu ini.
boleh dunk dibuat tutorialnya?
on 19 Aug 2010 / 14:06
adimaryanto bilang,
wuiih…. mantep neh redesign nya… soft…
on 04 Sep 2010 / 12:07