ReDesign Single Post With CSS3

belakangan banyak sobat blogger yang mengganti themes mereka, terinspirasi dari itu sayapun menyetting ulang themes saya #ikutan. themes baru saya ini terinspirasi dari icon-icon yang saya buat dengan css3 kemarin

There comes a point in your life when you realize who matters, who never did, who won't anymore, and who always will. So, don't worry about people from your past, there's a reason why they didn't make it to your present or future.

belakangan banyak sobat blogger yang mengganti themes mereka, terinspirasi dari itu sayapun menyetting ulang themes saya #ikutan. themes baru saya ini terinspirasi dari icon-icon yang saya buat dengan css3 kemarin

Last Modif at July 8th, 2011

kata pertama saya adalah “maaf membuat browser anda lengket”, lengket?
belakangan banyak sobat blogger yang mengganti themes mereka, terinspirasi dari itu sayapun menyetting ulang themes saya #ikutan. themes baru saya ini terinspirasi dari icon-icon yang saya buat dengan css3 kemarin. themes baru ini sama sekali tidak menggukan gambar pada layoutnya, jadi tampilan dengan ‘tidak mencentang load image automatically’ sama dengan tampilan aslinya. coba saja, hilangkan centang pada ‘load image automatically’ lalu tekan F5(refresh) sama kan?

sayangnya themes ini ‘cukup berantakan’ di webkit, saya ngga tahu kenapa webkit ngga bisa menjalankan kode ini

-webkit-box-shadow: 6px -6px 18px, -6px 6px 18px ;

saya emang sengaja ngga memberi warna pada box-shadownya, karena nantinya themes ini akan saya jadikan custom themes, alias warnanya bisa di ganti-ganti oleh pengunjung. jadi, jika saya memberi warna pada box-shadow-nya ‘tentu tidak bisa diganti-ganti kan? ia dong, why? html dom kayaknya belum support css3. contoh, ada ngga syntax seperti ini

Object.style.box-shadow="value";

nggak ada kan(nov 2010)? karena alasan itulah saya tidak memberi value color pada box-shadownya.
lebih jauh, themes baru ini juga sangat berantakan di IE, saya malas merapikan tampilanya di IE, wong IE-nya BELUM support css3. hahahaha, saya lupa, sangat disarankan untuk membuka halaman ini dengan firefox 3+ dan opera 10+. untuk browser lain, saja jamin hancur total.

kekurangan pada themes

mungkin halaman ini sangat sukar di scroll, jika ya “salah satunya karena browser mememerlukan memory yang banyak untuk menjalankan source pada cssnya(46kb+). jadi, jika kemampuan prosesor komputer sobat renda #mfjikasalahtulis, dari lubuk hati yang terdalam “SAYA MOHON MAAF”, saran saya ‘tutup sebagian tab ataupun aplikasi jika ingin membuka halaman ini. jika masih sangat lengket, maaf lagi :)
kekuranagn lainya ialah, sepertinya themes baru ini tidak cocok jika comment thereadnya diaktifkan, entar jika ada komplain saya akan nonaktifkan theread comment-nya(untuk sementara masih active) :). ada apa dengan commnet theread? coba lihat jika ada yang mereply komentar, apakah terlihat seperti komentar balasan? saya rasa tidak? takutnya, nanti malah kebingan jika ngobrol via komentar.
selain dua+ kekuranagn diatas, themes baru ini juga tidak custom lagi atau sobat sudah tidak bisa mengganti warna, latar, font, align, serta beberapa change style lainya, “ingat dengan themes kemarin”?.

kelebihan pada themes

kelebihanya hanya pada tempilan visual saja #nggaklebih, atau dengan kata lain walaupun sobat nge-disable gambarnya, tampilanya akan tetep sama saperti jika gambar ikut di load. bedanya hanya pada bagian komentar, dimananya? yah, gravatarnya tidak akan tampil.

saranya dong :)

menurut sobat, apa yang harus saya perbaiki di halaman single post ini? sekedar catatan “THEMES INI MASIH BETA”, saya kan edit lagi ‘jika ada waktu tentunya :)

property yang digunakan

  • box-shadow
  • text-shadow
  • border-radius
  • transform-rotate(ngga ada di css3)
  • transform-skewX(ngga ada di css3)
  • transform-skewY(ngga ada di css3)
  • linear-gradient(ngga ada di css3)
  • overflow-x

saya masih newbie di bidang CSS ini, jadi ya” hasilnya hancur”, mohon bimbinganya.

halaman depan?

sejujurnya¬† ‘saya sudah sangat bosan melihat halaman depan blog ini. sayangnya lagi “saya ngga bisa photoshop, jadi ‘belum bisa ngedesain ulang. kalaupun di buat ulang, sangat banyak waktu yang saya habiskan di depan photosahop ‘itupun belum tentu bagus, coba lihat halaman depan ‘jorok dan berantakan kan?

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

41 thoughts on “ReDesign Single Post With CSS3”

  1. indam says:

    jika sobat ngga suka dengan tampilan baru ini, akan saya ubah nantinya…

  2. Rudy Azhar says:

    Pertama sekali membuka single-post ini saya terkesan dengan headernya yang begitu cantik, tetapi setelah menelusur kebawah terlalu banyak elemen yang dipakai & Tulisan-tulisan tag header h1,h2,… agak kebesaran Mas.

    1. indam says:

      ia thanks masukanya bro rudy, nanti akan saya edit lagi dan mengurangi ukuran font-nya.

  3. hendro says:

    Saya kalau memberikan saran takut salah,
    Ini udah keren hanya berat saja soalnya box-shadownya banyak. Box shadow kalau inset akan terasa berat ketika menggulungnya, saya pernah coba.
    Keren mas indam

    1. indam says:

      kenapa takuk? wong kita sama-sama belajar ‘aku newbie malah’.
      ia nih, masalah utamanya sepertinya ada di box-shadow, nanti akan saya ”kurusin” box-shadownya.

  4. Fadel says:

    wah berat bagat menggulangnya gan, tapi keren bagat, bisa dikasih keteraqngan system requirements g? :lol:

    1. indam says:

      jika ada waktu akan saya update.

  5. Rudy Azhar says:

    Kok tambah lengket???

  6. aldy says:

    Lebih enak seperti ini Bro, loadingnya juga lebih ringan.

  7. indam says:

    Aldy, Kemarin lelet ya? Saya belum ngedit apa-apa kok.
    Sepertinya hosting saya lg ada masalah kecil(perbaikan mungkin), makanya sukar diakses. Mungkin beberapa hari lg akan normal kembali.

  8. ganda says:

    Beberapa bagian masih kurang. Seperti bagian header. Tapi footernya, looks very great bro. I like it. Tinggal main2kan aja warna atau latar berupa gambar abstrak. :D

    1. indam says:

      nanti saya bagusin dasi sisi keterbacaan, untuk bagian lain sepertinya tidak lagi. mungkin bagian bottomnya aja yang mau saya bagusin. footer kegedean? pengruh layar kali :)

  9. iam says:

    wah keren mas tampilanya :D
    tapi sayangnya agak sedikit berat loadingnya :)

  10. iskandaria says:

    Jika dinilai dari sisi seni, saya acungin 2 jempol deh. Kreatif banget. Pengetahuan teknis saya soal CSS bisa dibilang masih jauh di bawah pemilik blog ini :)

    Saya cuma ingin mengomentari tampilan secara umum saja.

    Header sudah oke. Cuma untuk tampilan konten, line-height masih kurang rengggang sedikit. Lalu area komentar agak berantakan menurut saya (kurang rapi) plus sedikit membingungkan yang mau mengikuti alurnya.

    Terakhir, tampilan list link pada menu navigasi. Paddingnya kurang luas sehingga terkesan mepet ke pembatas/border. Kurang whitespace aja. Footer? Unik banget dan baru saya temukan.

    Tapi secara umum, desain CSS single-page blog ini terkesan terlalu ramai. Terlalu banyak objek/elemen yang seolah-olah berlomba-lomba menonjolkan dirinya. Jadinya, bisa disimpulkan sendiri deh.

    1. indam says:

      wah, aku masih newbie mas, ini juga masih terus belajar kok.
      terima kasih sekali masukanya mas, saya akan mencoba memperbaikinya.

  11. ph-internet says:

    Saya juga mau minta saran dari mas indam soalnya lagi redesign juga.
    Okeh, untuk saran blog ini sepertinya hanya berat saja yang di kurangi seperti value di box-shadow dan saya melihat ada border radius sampai 300px, itu di gambar mungkin ya? untuk membentuk lingkaran.
    Yah..pokonya kesimpulannya hanya berat karena box-shadow saja sebenarnya.

    1. indam says:

      hehehe, ok nanti saya mampir ke website joomlanya :)

    2. indam says:

      ph-internet,
      maaf mas, blognya ngga bisa di akses. coba lihat gambar ini(kilik untuk memperbesar) indam ph internet

      bukanya ngga mau ngasih saran, tapi sitenya emang ngga bisa di buka, maaf ya. nantikalau saya ol lagi pasti saya view :)

  12. JUN says:

    sob, keren banget tampilan blogmu!!!
    Apalagi bagian awal dibuka [belum masuk posting]

    tapi pas masuk posting kenapa gini ya? jadi menghilangkan kesan ‘unik’ di bagian home.

    maaf kalo OOT, salam kenal :D

    1. indam says:

      kalau tampilan single seperti tampilan home, maka sulit bacanya. jadi ya seperti ini :)

  13. ArdianZzZ says:

    Agak membingungkan yah… :D

    1. indam says:

      ia, ini mau diperbaiki lagi :)

  14. Wah pertama sedikit bingung sihhhhhhhhhh…………
    Tapi lama-lama sudah cocok dengan theme yang ini……….

    1. indam says:

      nanti saya bagusin kalau begitu

  15. Wah bung indaam memang penuh dengan seni yaaaaaaaaa………….

    1. indam says:

      biasa aja mas, saya ngga tahu apa-apa kok

  16. iskandaria says:

    Tumben nih sekarang jadi lebih ringan. ngga melekat lagi kayak sebelumnya. Ups, ternyata beberapa efek CSS3 udah dibuang :lol:

    1. indam says:

      belum ada yang saya edit kok, kemarin tuh hosting saya lagi gangguan.

  17. Om Yudi says:

    tulisan yang bagus. design kayak gini apa g capek di lihat bang
    om yudi

  18. tomi says:

    bagus mas.. memang bener scroll nya agak lambat.. ni pake chrome v7..
    tampilan oke.. tp agak ribet menurut saya mas.. border kotak2 komentarnya tll besar.. jadinya malah fokus liat border daripd liat tulisan komentarnya :D
    hanya skedar saran

  19. blognews says:

    designnya keren mas.. tp menurut saya kok malah membingungkan ya.. terlalu banyak kotak2 dan lambat.. atau koneksi saya yg pas2an ya :(

    1. indam says:

      thanks masukanya, akan saya pertimbangkan :)

  20. Fadel says:

    Bagian credit mantab bagat nih, :D

  21. LAston says:

    blog yang anehhh tapi kreatiffffffffffffffff bgt.

  22. Botzzz says:

    wah saya masih bingung nich pertama pas berkunjung kesini…
    tapi stelah di perhatikan baik-baik…wahhh kerenn mas….
    salam knl ya…..

    1. indam says:

      salam kenal balik :)

  23. agoest says:

    waduh..kotak komentar dengan font-nya kurang proposional mas…
    kotakya gede,font imut banget…border kolom komentar juga terlalu tebal [kalau menurut saya sih..he..he..]

  24. manado says:

    mas indaam saya blh tanya gak….???
    aku kan mau pake template 1 coloum maniefest yang saya download dari TEMPLATE GODOWN..
    tapi pas saya mau ganti terjadi eror “Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: Content is not allowed in prolog.” gimana tuh mas cara mengatasinya..

    1. indam says:

      seharusnya masalah seperti itu bisa diatasi, coba cek element xmlnya, siapa tahu ada yang salah syntax

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-