Karena pergantian thema, saya mohon maaf karena ada beberapa posting yang masih belum sempurna...
Terlalu Keren Buat IE

Mengganti Title Blog dengan Logo

Tanggal : oleh : rudy

Setelah bereksperiment cukup lama akhirnya saya mengganti Title Blog Rudy Azhar dengan Logo, sebelumnya saya memang kurang suka memasang background image maupun logo pada blog saya dikarenakan saya ingin memaksimalkan fungsi CSS, tapi demi untuk kepuasan pribadi saya mencoba menerapkan juga diblog ini biar jangan terkesan terlalu hambar…he..he..he…

Sebelumnya saya mengucapkan terima kasih buat Mas Jepri pemilik blog Desain Digital yang telah membuatkan saya logo dengan tiga variant warna yang disesuaikan dengan element warna yang ada diblog ini, kesan dari logo diatas tidak neko-neko & ukurannyapun tidak terlalu melebar. Moga-moga aja Mas Jepri mau membuatin yang lainnya…he..he..he.. (ngarep mode:ON)

Biar ada kesan efek saat dihover, semula saya memasang element opacity, tapi saat dihover batas gambar jadi kelihatan. Lalu saya menerapkan dengan memasang dua logo yaitu warna dasar merah & saat dihover menjadi hitam.

Penerapannya dengan CSSpun tidak terlalu sulit, saya menggunakan kode sebagai berikut :

#masthead #logo a {width: 880px; height:53px; background:transparent ;outline: none; margin:3px 10px 15px 0px;display: block; float: right;width: 242px;background: url('/wp-content/uploads/2010/08/logo-2.png'); text-indent: -9999px;}

text-indent:-9999px berguna supaya text tetap ada jika CSS dinonaktifkan, tapi tidak kelihatan jika kita melihat secara standart.

Dan saat dihover saya menggunakan kode :

#masthead #logo a:hover, #masthead #logo a:focus {background: url('/logo-1.png');}

Cukup mudah penerapannya & “simple but not simplecity”.

“Update”

Setelah berdiskusi agak panjang tentang Logo diatas yang intinya gambar-gambar logo sebaiknya digabungkan menjadi satu gambar saja & dipanggil dengan CSS Sprite & berkat bantuan juga dari Satrya author dari blog Margasatrya.com maka saya telah menerapkan CSS Sprite untuk Logo diatas.

Sekali lagi saya ucapkan terima kasih buat sahabat yang rela membagi-bagi ilmunya.

We'll love you for it!

Share
This entry was posted in Uncategorized and tagged , . Bookmark the permalink.

Diskusi telah ditutup, jika kamu punya pertanyaan silahkan Hubungi Saya. Terima Kasih.

— Sudah Ada 60 Diskusi —

  2. Padly pada : → Google Chrome 5.0.375.125 ∼ Windows XP

    Bagus Mas Rud…. Top Marko Top :thumbup:

    Wah… Mau juga donk Mas Jefrie :o

      • Padly pada : → Google Chrome 5.0.375.125 ∼ Windows XP

        Ga’ bisa ditawar ya?

        Secara umum Aku setuju dengan pendapat Mas Ardian dan Mas Ris, digabung saja gambarnya Mas. Atas Merah…bawah hitam

      • rudy pada : → Google Chrome 5.0.375.125 ∼ Windows XP

        harga bisa disesuaikan dengan rumit tidaknya suatu desain kok.he..he..he…

    • Rudy Azhar pada : → Google Chrome 5.0.375.125 ∼ Windows XP

      Mana postingan terbarunya bro dalam bentuk blogazine?

    • Jeprie pada : → Google Chrome 5.0.375.125 ∼ Windows 7

      Sebenarnya harga berbanding lurus dengan kualitas bukan sekadar kerumitannya.

      Untuk logo ini, saya menggunakan font Sans Serif agar muncul kontras dengan body text yang hampir semuanya serif.

      Ada tiga warna yang ditawarkan. Semua sesuai dengan color scheme situs. Merah, abu, dan hitam. Merah disamakan dengan warna link yang terlihat cukup dominan. Abu disesuaikan dengan warna latar dan kotak di sebelah judul sidebar. Hitam diambil dari warna body text.

  3. rismaka pada : → Firefox 3.6.8 ∼ Windows 7

    Penggunaan text-indent:-9999 memang lebih baik daripada menggunakan display:none, karena hanya text saja yang akan “lenyap” dari layar komputer.

    Namun penggunaan text-indent:-9999 menurut saya kurang aksesibel bila kita menonaktifkan gambar. Text tetap tidak kelihatan.

    Kalau boleh saya usulkan, gambar/logo lebih baik dipanggil dalam bentuk HTML saja, bukan sebagai CSS image, karena baik ketika gambar ataupun CSS dinonaktifkan, teks tetap akan kelihatan.

    Saran tambahan. Bila tetap keukeh/ngotot menggunakan CSS image, lebih baik kedua gambar (gambar berwarna merah dan gambar berwarna hitam) digabung menjadi satu. Kemudian dipanggil dengan CSS sprites, dengan demikian dapat menghemat 1 buah HTTP request.
    *maaf kalo nyepam bang :)

    • rismaka pada : → Firefox 3.6.8 ∼ Windows 7

      Tambahan lagi, penggunaan text-indent:-9999 tidak cukup baik di peramban opera. Mungkin karena opera tidak/belum mau untuk menerapkan angka extrem seperti itu.

      • rudy pada : → Google Chrome 5.0.375.125 ∼ Windows XP

        tidak cukup baiknya kenapa Mas, saya lihat kok baik-baik saja. :confused:

    • ArdianZzZ pada : → Google Chrome 5.0.375.125 ∼ Windows XP

      Wkwkw.. kalau saya sih membolehkan, saya memakainya juga beberapa waktu lalu… Memang sih jelek jika fungsi gambar dimatikan, tetapi sangat baik jika fungsi css dimatikan.

      1. Mengenai text indent, sudahkan ditambahkan overflow:hidden?
      2. Jangan menggunakan 2 file gambar! gunakan 1 saja dengan teknik CSS sprite/backsliding sehingga proses transisi terkesan realtime.

      • rudy pada : → Google Chrome 5.0.375.125 ∼ Windows XP

        1. fungsi dari overflow:hidden itu apa ya?
        2. tehnik ini yang belum bisa saya terapkan karena saya nggak pandai menggunakan photoshop.he…he..he…

        BTW. blog Ardianzzz tambah polos aja.

      • ArdianZzZ pada : → Google Chrome 5.0.375.125 ∼ Windows XP

        Ha? photoshop itu untuk keperluan grafis bukan untuk markup… :P

        overflow:hidden itu CSS, fungsinya untuk menyembunyikan konten yang “keluar” dari block elemant — CMIIW .

        Hehe, mumpung weekend bisa buat ngoprek kode hehe…

        :)

    • rudy pada : → Google Chrome 5.0.375.125 ∼ Windows XP

      maklum Mas saya masih newbie pembelajar, jadi masih kurang paham boetul dalam hal ini….

      Nah kalau dipanggil dalam bentuk HTML gimana caranya Mas, saya memang kurang paham betul. :(

      Apalagi menggunakan CSS sprites, saya juga kurang paham menggunakan photoshop.wkwkwkwkkwkkk…

      link cuman satu kok dianggap spam :D kalau ada 14 link mungkin iya..he..he..he…

      • rismaka pada : → Firefox 3.6.8 ∼ Windows 7

        Rudy,
        Kalau dipanggil dalam bentuk HTML ya seperti memposting sebuah gambar:
        <img src="logo.png" alt="Rudy Azhar" width="" height="" />

        CSS sprites itu seperti ini: http://www.rismaka.net/wp-content/themes/47/css/images/sprites.png

        Gambar-gambar yang hendak ditampilkan digabungkan dlm satu file dengan format PNG, kemudian dipanggil di CSS, seperti misalnya:
        .date {background: url(http://www.rismaka.net/wp-content/themes/47/css/images/sprites.png) no-repeat 0 -1586px;}

      • rudy pada : → Firefox 3.5.2 ∼ Windows XP

        rismaka, betul juga Mas… setelah saya lihat dengan menonaktifkan image, text tetap tidak kelihatan. Jadi jalan keluarnya harus menggunakan HTML ya….

      • Jeprie pada : → Google Chrome 5.0.375.125 ∼ Windows 7

        Saya tidak membuatkan dalam bentuk sprite karena saya juga belum yakin Pak Rudy bisa memakainya.

        Kalau mau saya buatkan dalam bentuk sprite bilang saja via email.

      • rudy pada : → Google Chrome 5.0.375.99 ∼ Windows XP

        Mas Jeprie,
        Ia Mas saya memang belum pernah menerapkan sprite pada blog, tapi saya coba sendiri dulu ntar kalau ada kendala saya kontak Mas Jeprie via email. Thanks Mas. :D

    • Jeprie pada : → Google Chrome 5.0.375.125 ∼ Windows 7

      Betul, memang lebih baik dijadikan satu gambar jadi sprite. Nanti gambar latar digeser sesuai kondisi hover atau tidak. Katanya itu bisa mengurangi request http (atau semacam itulah istilahnya), efeknya jadi lebih bagus.

      Penggunaan text dengan indent ini, menurut tutorial yang pernah saya ikuti katanya bagus juga buat SEO. Text judul kan tetap dalam heading1 jadi diprioritaskan oleh google, tapi tampilannya lebih bagus jadi lebih menarik buat pengguna.

      • ArdianZzZ pada : → Google Chrome 5.0.375.125 ∼ Windows XP

        Karena teks hanya disembunyikan dari sisi visual, mesin tetap membacanya dengan baik. :)

        Untuk itu penggunaan indent digabung dengan overflow agar tulisan tersembunyi dan tidak mengganggu gambar latar. Dalam kasus ini gambar latarlah yang diutamakan.

  5. isnuansa pada : → Firefox 3.6.8 ∼ Windows XP

    Manggut-manggut baca komentar Mas Adi di atas (kok, kalo di sini dikasih link ya?) tapi tetep aja nggak ngerti :(

    Kalo sama Mas Rudy saya udah pernah kenalan belom ya?

    *keplak diri sendiri* Maaf ya OOT di blog ini tanpa permisi.

    Eh, Mas tadi sempet di hover sebentar hilang gambarnya, tapi pas dicoba lagi enggak…

    • rudy pada : → Google Chrome 5.0.375.125 ∼ Windows XP

      kenalan secara langsung emang nggak pernah Mbak, tapi saya sering berkunjung ke blog Isnuansa & sempat beberapa kali memberi komentar disana kok.he..he..he….

    • rismaka pada : → Firefox 3.6.8 ∼ Windows 7

      Isnuansa,
      Maksudnya dikasih link tuh link alamat website saya ya mbak?

      Saya kurang peduli terhadap alamat website yang diisi di form komentar. Karena sudah tersimpan otomatis, jadi tidak perlu nulis ulang ketika ngasih komen di blog bang rudy ini.

      Kalau di blognya mbak nunik, saya memang jarang ngasih link, soalnya memang sudah tersimpan otomatis, jadi saya langsung nulis komen saja tanpa harus nulis nama, alamat email, dan link :mrgreen:

  6. Bang Dje pada : → Firefox 3.6.8 ∼ Windows XP

    Keren dan rapi sekali. Tapi pas hover pertama kali gambar malah hilang. Saya kira dibuat transparan. Tapi waktu hover lagi jadi hitam. Menarik sekali …

  7. hendro pada : → Firefox 3.6.8 ∼ Windows XP

    hovernya kayanya asik pakai css3,, hovernya mengganti backgrond ya?
    kalu css3 mungkin penambahan opacity atau text-shadow agar mantap gitu..

    • rudy pada : → Google Chrome 5.0.375.99 ∼ Windows XP

      saya pertama udah memakai opacity tapi garis batas jadi kelihatan Mas, kalau text-shadow saya belum coba.

  8. andry sianipar pada : → Google Chrome 5.0.375.125 ∼ Windows 7

    Wah… ilmu baru lagi neeh…
    saya belum begitu paham… jadi izin nyimak dulu ya….
    :beer: :beer: :beer:

  9. imadewira pada : → Firefox 3.6.8 ∼ Windows XP

    saya sih lebih suka pakai text saja, di samping itu saya juga tidak bisa membuatnya, hehe

  10. satrya pada : → Firefox 3.6.8 ∼ Windows XP

    Iya mas rudy saya setuju dengan para Pencinta aksesibel web di atas :Peace: , coba menggunakan CSS sprite, gabungkan saja kedua image logonya di satu layer, setelah itu tinggal panggil imagenya kemudian atur positionnya.

    Untuk text indent memang betul apa kata mas Jepri, baik untuk SEO, saya pernah membaca itu. untuk overflow , kalo belum menembus batas, gak apa2 koq mas gak di pakai juga :D

    Tapi warna merahnya itu pas banget, hebat mas Jepri :thumbup:

  11. Iwan Kus pada : → Firefox 3.5.7 ∼ Windows XP

    wah kereeen
    saya juga rencana bikin logo
    tapi gak bikin2 sampe sekarang
    biar kelihatan profesional hehehe

  12. ganda pada : → Safari 5.0 ∼ Windows XP

    Kayaknya yang ngumpul di sini para designer addict semua. :D *duduk mangut dulu ah menikmati diskusi sambil makan pisang goreng*

    • rismaka pada : → Firefox 3.6.8 ∼ Windows 7

      Ganda,

      Kayak­nya yang ngum­pul di sini para desig­ner addict semua. :D *duduk mangut dulu ah menik­mati dis­kusi sam­bil makan pisang goreng*

      kecuali saya…

      *nyeruput kopi

  13. ISMAIL pada : → Firefox 3.6.8 ∼ Windows XP

    Saya g tahu mana yang bagus karena saya memang bukan pecinta desain ce… tapi suka hasil desainer lhooo..

    Cayoo Trus..

  15. Harry pada : → Firefox 3.5.1 ∼ Windows Vista

    Karena konteksnya adalah mengganti title blog dengan logo, saya cuma mau nulis “sipp… bagus mas Rudy”.
    Tapi jika sebuah gambar di maksudkan sebagai logo pengganti heading, maka sebaiknya menggunakan elemen markah img serta menggunakan atribut alt yang di isi dengan entitas/perihal yang ingin disampaikan tetapi tidak boleh menggunakan kata “logo”. Ah… silahkan tanyakan lebih lanjut dengan mas Adi rismaka.

  16. Andika Alivano pada : → Firefox 3.6.8 ∼ Windows XP

    uugh jd pengen punya logo jg.. btw knp logonya ditempatin di kanan mas? aga ‘ga biasa’ kl liat logo d kanan.. :)

    • rudy pada : → Firefox 3.5.2 ∼ Windows XP

      saya memang suka yang tidak biasa Mas…he..he…he… :sundulgans

  18. Jeprie pada : → Google Chrome 5.0.375.125 ∼ Windows 7

    Sedikit koreksi, logo sebaiknya digeser beberapa pixel ke kiri. Sepertinya alignment-nya jadi terganggu.
    Lebar logo sudah disesuaikan dengan lebar blok judul sidebar.

    • rudy pada : → Firefox 3.6 ∼ Windows XP

      iya Mas, setelah pake Sprite malah jadi tambah kesudut logonya.
      kode yang dipakai repeat scroll -4px -9px, saya masih bingung disini.

  19. dery pada : → Firefox 3.6.3 ∼ Windows XP

    betul.. saya juga menggunakan logo sebagai title blog saya..
    biar serasa lebih berisi.. :D

  21. iskandaria pada : → Google Chrome 5.0.375.99 ∼ GNU/Linux

    Maaf baru berkunjung Bang. Beberapa hari ini koneksi internet saya bermasalah soalnya. Soal logo di atas, sudah bagus dan elegan. Saya tinggal menyimak diskusi tingkat tinggi yang ada di kolom komentar saja deh :lol:

  22. aldy~PF pada : → Firefox 3.6.6 ∼ Windows 7

    Desain tiada henti mas Rudy?
    Ya..ya…title blog ini menjadi tidak ada jika muat gambar otomatis pada peramban ditiadakan, dan memberikan kesan tidak ada title blog.
    Yang disampaikan oleh Manager side22.com dan pimpinan Rismaka.net mungkin secepatnya diterapkan :D

    • rudy pada : → Firefox 3.6.6 ∼ Windows XP

      tulisan tetap ada kok tapi disamarkan, kalau merujuk ke SEO blog ini saya rasa sangat SEO friendly karena penempatan Tag H1 yang dinamis…he..he..he…

      • ArdianZzZ pada : → Google Chrome 5.0.375.126 ∼ Windows XP

        Haha, trik H1 dari Cris Pearson…
        TxP sih udah menerapkannya di template default Mas Rudy. :)

  25. tomi pada : → Opera 10.51 ∼ Windows XP

    cuma manggut² baca koment dari atas mpe bawah.. suhu² css berkomentar dan memberi masukan yang bagus banget :D

  27. indam pada : → Opera Mini 4.2.14912 ∼ J2ME/MIDP Device

    Saya nggak ngerti apa inti tulisan ini. Apa karena saya lagi pusing ya?

    • rudy pada : → Firefox 3.6.6 ∼ Windows XP

      tulisan ini memang ndak ada intinya Mas, sekedar pemberitahuan aja…he..he..he… Minum obat Mas biar ndak pusing…wkwkwkwkkk…