Wajah (agak) baru: Mengubah CSS secara (relatif) gampang


E

ntah kenapa gue tergila-gila pada animated button di web. Itu lho, efek di mana sebuah button akan melakukan sesuatu bila di-“senggol” (mouse over) dengan pointer. Di CSS MP, efek animated button bisa dilakukan dengan mengubah-ubah setting pada class .topt dan .toptsel*. Sialnya, pada salah satu perubahan yang dilakukan oleh MP entah kapan, class .topt dan .toptsel di MP gue menghilang. Itulah sebabnya gue akal2an bikin button sendiri di sebelah kanan, walaupun nggak sesempurna efek menggunakan class .topt dan .toptsel yang asli.


tombol akal2an di sebelah kanan

Bedanya adalah, pada MP yang punya class .toptsel, posisi halaman yang sedang aktif ditunjukkan pada button. Maksudnya gini: kalo elo lagi buka blog, maka tombol blog akan “aktif” dan berbentuk / berwarna beda dengan tombol lainnya.

Waktu itu gue udah berusaha nyari ke mana perginya class .topt dan .toptsel gue, tapi nggak ketemu sehingga “ya sudahlah” pikir gue. Tapi belakangan waktu regular account juga udah bisa make theme di MP, gue mulai bertanya-tanya lagi.

Yang menarik perhatian gue adalah: semua theme tersebut memiliki class .topt dan .topsel, tapi dengan posisi yang berbeda-beda! Coba deh buka2 daftar template theme di sini. Perhatiin letak tombol2nya. Ada yang di atas, dan ada yang di samping, kan?

Tadinya gue kira semua theme di MP memiliki struktur HTML yang sama, cuma CSS-nya doang yang beda, ternyata enggak – antara satu theme dengan lainnya terdapat perbedaan struktur HTML juga.

Rasa penasaran gue jadi bangkit lagi, apalagi dengan masuknya sebuah personal message dari user myhaura yang menanyakan soal tombol. Maka, mumpung hari ini gue “libur”, sekalian aja gue bongkar ulang site MP gue, tentunya dengan memanfaatkan account dummy mbotx buat rusak2an. Biar kalo gagal nggak mengacaukan account gue yang ini, gitu loh.

Pertama-tama gue pasang theme “myokonos” di account mbotx. Gue view source, dan di bagian head ternyata ada 4 file CSS yang berfungsi secara bersamaan di sana. Dua file CSS yang pertama nggak penting, itu adalah file CSS basic untuk mengatur fungsi2 dasar di MP. Yang menarik adalah 2 file CSS yang terakhir dengan susunan sebagai berikut:

<link rel=”stylesheet” type=”text/css” href=”http://multiply.com/style/custom/mykonos/5.css”&gt;
<link rel=”stylesheet” type=”text/css” href=”http://mbotx.multiply.com/style-custom/mbotx/73/custom.css”&gt;

Artinya, bila kita menerapkan sebuah theme DAN mengcustomize CSS dari sini, maka KEDUA file CSS tersebut akan berfungsi secara bersamaan, dengan CSS custom kita dalam posisi mengoverride / menimpa CSS theme!

Maksudnya gini: dalam CSS ada prinsip ‘inherit‘ atau ‘turunan / warisan’. File CSS yang atas menurunkan perintahnya ke file CSS yang bawah BILA di file CSS yang bawah tidak ada perintah yang serupa. Sedangkan bila ada 2 perintah yang sama, maka file CSS yang bawah yang akan berlaku. Ih ribet ya? Mending pake contoh kali ye…

Contohnya, kita punya sebuah file html yang diatur dengan file CSS A dan file CSS B secara bersamaan.

Bila di file CSS A yang letaknya lebih di atas ada perintah sbb:

body {
font-size: 10pt;
line-height: 150%;
font-family: tahoma
}

yang artinya: seluruh tulisan di body akan berukuran 10pt dengan 1.5 spasi dan huruf tahoma.

Maka bila kita mau mengubah bentuk hurufnya DOANG menjadi arial tapi membiarkan seluruh setting lainnya, maka kita nggak perlu mengutak-atik file CSS A. Cukup di file CSS B yang terletak di bawah file CSS A kita masukkan perintah sbb:

body {
font-family: arial
}

sedangkan perintah lainnya seperti spasi dan ukuran font akan mengikuti perintah yang tercantum di file CSS A karena perintah2 tersebut diturunkan / diwariskan (inherited) dari file CSS A ke file CSS B.

Dengan demikian memodif tampilan MP sebenarnya bisa menjadi (relatif) mudah yaitu cukup dengan menerapkan sebuah theme dan menambahkan modifikasi di bagian2 yang mau kita ubah melalui link custom CSS. Kenapa gue bilang “relatif” mudah? Karena ternyata untuk melakukannya menghabiskan waktu seharian juga sih, krn bolak-balik salah dan kacau… hehehe… tapi at least langkah ini jauh lebih mudah daripada menyusun file CSS dari nol yang disesuaikan dengan puluhan class yang berlaku di MP.

Sebagai contoh, gue mengubah gambar background header yang tadinya berbentuk seperti ini:

yang di file CSS theme dilengkapi dengan perintah seperti ini:

div.owner_nav {
border: none;
margin: 0 auto;
margin-top: 20px;
height: 310px;
height: 280px;
width: 680px;
border: 5px solid #fff;
border-bottom: none;
padding: 10px 20px 0 0;
background-color: none;
background: url(http://images.multiply.com/multiply/style/mykonos/top2.jpg) no-repeat top left;
background-position: 0 -100px;
}

menjadi seperti ini:

dengan cara menambahkan perintah berikut di file CSS yang custom:

div.owner_nav {
background: url(http://images.mbot.multiply.com/image/1/photos/upload/orig/3708.274228/1.jpeg?et=OvKYyesPrZ5qiNqw16lxTg) no-repeat bottom left;
}

Sedangkan masalah ukuran, setting font, margin dan padding serta segala tetek-bengek yang ribet2 itu nggak gue utak-atik sama sekali – cukup gue ganti elemen yang perlu-perlu aja. Nggak lupa tentunya class .topt dan .toptsel favorit gue itu, gue tambahin background image yang bisa berubah-ubah.

Hasilnya, MP gue sekarang punya tampilan baru yang jauh lebih rapi ketimbang tampilannya yang lama dan secara “relatif” lebih gampang.

Ada yang tertarik mencoba? 🙂

*.topt adalah class untuk tombol navigasi dalam kondisi normal, dan .toptsel adalah tombol navigasi yang sedang aktif (dibuka).

Iklan
Tinggalkan komentar

98 Komentar

  1. same question nih..gimana cara nya ya?kasi tau dunks?

    Suka

    Balas
  2. hallo mbot…tolong dong gua mo merubah tampilan header gua tapi nggak bisa2 euy, gimana gua mo ngerubah tampilan di header atas tuh gambar rumah gua, tapi naro gambarnya mesti kemana dulu….dan cssnya gimana yhhh

    Suka

    Balas
  3. oom mo tanya neh..kalo mo posting journal/blog gimana bisa seperti yangom buat diatas iniy, ada gambar ada link..apa ada css ato html (bener ga siy?) khususnya??thks before….

    Suka

    Balas
  4. wah om kalo mo liat theme yang udah kita pake dimana yah soalnya saya dah coba liat si costom css gak muncul beda sama blogg yang bisa kita edit langsung css nya

    Suka

    Balas
  5. lumayan buat bikin yang lebih keren lagi, thank u !

    Suka

    Balas
  6. Mas… Tak copy ya .. buat belajar..

    Suka

    Balas
  7. triofandi said: salam kenal masmo nanya nih, aku pengen nambahin web counter (Page tracking). AKu udah dapat code html-nya, dimana harus aku copy code tersebut ? Thx B4

    jawabannya mungkin ada di sini 🙂http://mbot.multiply.com/journal/item/154tapi kondisi di MP sekarang udah beda dengan saat journal itu ditulis, yaitu sekarang udah nggak bisa naro javascript di title. sebagai gantinya, pilih hit counter yang image-based aja ya

    Suka

    Balas
  8. salam kenal masmo nanya nih, aku pengen nambahin web counter (Page tracking). AKu udah dapat code html-nya, dimana harus aku copy code tersebut ? Thx B4

    Suka

    Balas
  9. melegakan hati ……akhirnya kutemukan juga blog saudara……saya pengen banget belajar trik css-nya…thanks a lot

    Suka

    Balas
  10. makasih buanget……..

    Suka

    Balas
  11. makasih Mbok atas triknya dan turoialnya…wassalamu alaikum

    Suka

    Balas
  12. Keren mas. Lihat punya ku juga ya:)

    Suka

    Balas
  13. jalan2 di gugle .. eh nemu MP keren, terdamparlah aku disini …makasih ya tips2nya :Dsalam kenal

    Suka

    Balas
  14. pulsatwelev said: maaf nih sebelumnya, saya pemula banget di multiply…Saya mau tanya gimana untuk merubah tampilan site kita dengan gambar2 theme yg kita inginkan???Apakah bisa mengubahnya dengan gambar kita sendiri ato gambar yang kita inginkan???Terima kasihFahmi

    tentu aja bisa pake gambar kita sendiri, lha contohnya mbot’s hq ini kan gambarnya bikinan sendiri :-)kalo males repot, bisa ambil theme yang udah jadi dari http://customizedthemes.multiply.com/kalo mau coba2 css, bisa baca2 posting di http://mbot.multiply.com/tag/css

    Suka

    Balas
  15. livingyourdream said: boleh nge bookmark page nya ya?heuhuehue..

    silakan… 🙂

    Suka

    Balas
  16. b12utuz said: Salam kenal ?? kalo pengen mp kita dikenal alias pengen nge promosiin MP gimana caranya ??

    kalo promosi di lingkungan MP sih gampang, sering2 aja mampir di posting milik orang lain. kasih reply yang menarik sambil ngajak kenalan. ntar pasti ada aja yang mengadakan kunjungan balasan. selain itu, jgn lupa daftarkan multiplynya di search engine, misalnya google.

    Suka

    Balas
  17. enkoos said: Boleh kan?Matur nuwun sebelumnya.

    bolehh… monggo…

    Suka

    Balas
  18. maaf nih sebelumnya, saya pemula banget di multiply…Saya mau tanya gimana untuk merubah tampilan site kita dengan gambar2 theme yg kita inginkan???Apakah bisa mengubahnya dengan gambar kita sendiri ato gambar yang kita inginkan???Terima kasihFahmi

    Suka

    Balas

Ada komentar?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

  • Komentar Terbaru

    mbot di Yang Terjadi Pada Bahu Ayah In…
    Tjetje [binibule.com… di Yang Terjadi Pada Bahu Ayah In…
    [sharing HRD] negosi… di [sharing HRD] WASPADA! 5 gelag…
    Koper | (new) Mbot… di Realita, Cinta, dan Rock n…
    mbot di Yang Terjadi Pada Bahu Ayah In…
    ganganjanuar di Yang Terjadi Pada Bahu Ayah In…
    mbot di OGC 2017: Udah Pernah ke Roma,…
    Tjetje [binibule.com… di OGC 2017: Udah Pernah ke Roma,…
    mbot di OGC 2017: Udah Pernah ke Roma,…
    enkoos di OGC 2017: Udah Pernah ke Roma,…
  • Terfavorit

  • Terbanyak diklik

  • Masukin email lu di sini agar dapat notifikasi tiap kali ada tulisan baru

    Bergabunglah dengan 4.241 pengikut lainnya

  • Twitnya @mbot

  • Agung ‘si mbot’ Nugroho

  • Arsip

  • Penunggu blog ini

    mbot

    mbot

    Seorang pegawai biasa-biasa aja

    Layanan Terverifikasi

    Tampilkan Profil Lengkap →

  • RSS Nonton Deh!

    • Sensasi Nonton Pengabdi Setan Bareng Emak-Emak Setan 8 Oktober 2017
      Sejak lama, Joko Anwar terobsesi dengan film horor. Menurutnya, horor adalah genre film yang paling jujur. Tujuannya ya nakut-nakutin penonton, bukannya mau ceramah, motivasi, atau menyisipkan pesan moral. Di kesempatan berbeda, gue juga pernah denger dia bilang, secara komersial film horor lebih berpotensi laku. Alasannya sederhana: karena takut, orang cend […]
    • Parodi Film: Jailangkung (2017) 26 Juni 2017
      SPOILER ALERTSPOILER ALERTSPOILER ALERTSPOILER ALERTSPOILER ALERTSPOILER ALERTFerdi (Lukman Sardi) diketemukan nggak sadar di sebuah rumah terpencil oleh pilot pesawat carterannya. Dia dirawat di ICU, tapi dokter nggak bisa menemukan apa penyakitnya.Anak Ferdi, Bella (Amanda Rawles), tentu kepikiran. Dia minta bantuan Rama (Jefri Nichol), seorang... yah, dib […]
    • Parodi Film: Suicide Squad (2016) 14 Agustus 2016
      SPOILER ALERT!Jangan baca kalo masih ingin penasaran dengan cerita film ini.SPOILER ALERT!SPOILER ALERT!SPOILER ALERT!Amanda Waller, pejabat intelijen, presentasi di depan sekumpulan pejabat militer. AMANDA: “Kita beruntung Superman yang barusan ini, yang sekarang lagi mati suri dan dipastikan akan hidup kembali dalam film berikut karena demikianlah pakem da […]
    • Parodi Film: Bangkit (2016) 12 Agustus 2016
      SPOILER ALERT!Jangan baca kalo masih ingin penasaran dengan cerita film ini.SPOILER ALERT!SPOILER ALERT!SPOILER ALERT!Ada bus kejeblos jurang. Muncul sang pahlawan, anggota Basarnas, bernama Addri. Ya, dengan 2 huruf D. Addri: “Saya akan menyelamatkan Anda semua, satu per satu. Kita mulai dari wanita dan anak-anak!”Beberapa menit kemudian, hampir semua penum […]
    • Kalo Fans Turun Tangan Ngeberesin Trailer Film 15 Mei 2016
      Hari gini, jadi produsen film 'mainstream' itu semakin nggak gampang. Masalahnya, software pembuat film makin gampang didapat, film bisa dibikin secara "rumahan" dan akibatnya: penonton makin kritis. Sepuluh tahun lalu, saat produsen film melempar trailer promosi ke pasar, kemungkinannya cuma dua: orang tertarik atau nggak tertarik. Sekar […]
    • Review: My Stupid Boss (2016) 14 Mei 2016
      Nggak kerasa udah 7 tahun sejak gue pertama kali bikin review tentang buku My Stupid Boss. Dalam kurun waktu tersebut bukunya udah masuk jilid 5, plus sempet ada antologi cerita boss-boss bego kiriman pembaca juga, dan… difilmkan!Kemarin gue kembali beruntung dapet kesempatan nonton premiere film My Stupid Boss the Movie, sebagai (kalo nggak salah) premiere […]
    • Review: 5th Wave (2016) 17 Januari 2016
      Coba deh tonton trailer film ini:Action? Check.Alien? Check.Chloë Grace Moretz? Check.Jelas, gue langsung memutuskan nonton.Ekspektasi gue adalah film sejenis Battle Los Angeles (2011) atau War of the Worlds (2005) atau Independence Day (1996), tentang bumi yang diserang alien jahat dan berisi adegan-adegan perang seru.Begitu filmnya mulai, adegan dibuka den […]
    • Review: Ngenest: Kadang Hidup Perlu Ditertawakan (2015) 5 Januari 2016
      Tentang kenapa di sini kaum Cina ‘diperlakukan khusus’ adalah pertanyaan yang belum berhasil gue temuin jawabannya. Kenapa kita bisa santai bilang, “Si Joko Jawa, Si Tigor Batak, Si Asep orang Sunda,” tapi giliran “Si Ling Ling” mendadak kagok, lantas jadi nginggris: “Chinese”? Atau yang lebih absurd lagi: pencanangan sebutan Cina diganti jadi Tionghoa oleh […]
    • Obrolan Film Merangkap Ujian Kesabaran 9 April 2015
      Setiap orang punya penghayatan beda tentang film. Ada yang suka ngapalin berbagai detil tentang film favoritnya, ada juga yang bisa inget judul aja udah syukur. Sah-sah aja sih sebenernya. Yang bikin senewen adalah NGEDENGERIN orang-orang tipe terakhir saling ngobrol. Kemarin, karena udah kemaleman untuk jalan kaki, gue pulang naik angkot. Di dalemnya ada 2 […]
    • Review: Guru Bangsa: Tjokroaminoto (2015) 6 April 2015
      Baru kali ini gue sampe merasa perlu "belajar" dulu sebelum nonton film. Ada dua pemicunya. Pengalaman nonton film Lincoln: udah mana pengetahuan gue tentang sejarah Amerika minim banget, cuma ngerti Lincoln itu anti perbudakan dan matinya ditembak, eh di filmnya muncul tokoh banyak banget yang mukanya nampak sama semua karena rata-rata berewokan.  […]
  • RSS Bisnis bareng Ida Yuk!

    • Banyak orang gagal jalanin MLM? Bukan..mereka BERHENTI. 1 September 2016
      'Udah pernah join dulu mbak, tapi gagal….’ Pernah denger kalimat ini saat mengajak seseorang join oriflame? Saya sering..  Alasan ‘kegagalan’-nya macam-macam.. Ada yg karena modalnya mandeg gara-gara jualan produk oriflamenya sistem hutang maka menilai bisnisnya gagal , ada yg ditolak 10 orang lalu merasa gak bakat dan gagal, ada yg gak naik-naik level […]
    • Konsultan Oriflame seperti siapakah Anda: Neil Armstrong atau Lance Armstrong? 26 Agustus 2016
      Ada dua orang Armstrong yang menempati ruang khusus di hati rakyat Amerika. Keduanya berjasa, telah terbukti komitmennya, dan menunjukkan keberanian yang menginspirasi banyak orang. Namun, kisah mereka memiliki akhir yang berbeda. Yang pertama adalah Neil Armstrong, astronot Amerika. Sebagai orang pertama yang menginjakkan kaki di bulan, namanya kondang ke s […]
    • Bangga Jualan, Sekarang Juga! 25 Agustus 2016
      "Malu Jualan", barengan sama "Gampang Percaya Hoax" dan "Jam Karet"adalah kebiasaan-kebiasaan yang penting segera diberantas karena bikin Indonesia susah maju. Tapi "Malu Jualan" adalah yang paling parah. Beberapa waktu lalu, seorang teman yang lama nggak kedengeran kabarnya tiba-tiba muncul dengan pertanyaan, "Gu […]
    • Kerja Oriflame itu seperti apa sih? 24 Agustus 2016
      Dulu, waktu pertama kali baca tentang Oriflame, liat cerita sukses para top leader yang berhasil dapat penghasilan bulanan hingga puluhan juta, dapat mobil, jalan-jalan ke luar negeri, aku bertanya-tanya, "Ini kerjanya gimana sih sebenernya? Kok kayaknya seru banget. Nggak harus terikat jam kerja kayak kantoran tapi bisa pada punya uang jutaan!" Se […]
    • Skin Pro Oriflame, Membersihkan Wajah 5x Lebih Bersih 23 Agustus 2016
      Membersihkan wajah itu penting! Aku menyarankan metode 2 langkah untuk pembersihan wajah, yaitu: 1. Susu Pembersih 2. Toner Untuk menuntaskan pembersihan, kita mencuci muka menggunakan sabun muka yang sesuai dengan jenis kulit. Cuci muka pakai tangan saja hasilnya ternyata kurang maksimal, karena kotoran dalam pori-pori tidak bisa terangkat sepenuhnya. Orifl […]
    • Edukasi MLM untuk Abang Gojek 22 Agustus 2016
      Aku baru pulang dari training skin care di Oriflame Daan Mogot. Pulangnya seperti biasa panggil Gojek. Di jalan, abang Gojeknya tanya, kenapa ramai sekali kantor Oriflame Daan Mogot hari itu. Rupanya dia biasa mangkal di depan kantor Oriflame dan keramaian hari itu lebih dari biasanya. Aku bilang, habis ada training besar, yang pesertanya sampai 300 orang. T […]
    • Scrub Bibir ala Ida dengan Tendercare dari Oriflame 21 Agustus 2016
      Banyak downline dan pelanggan yang menanyakan, apakah Oriflame sudah mengeluarkan produk scrub untuk bibir. Sayangnya, sampai hari ini belum. Tapi kita bisa membuat scrub bibir sendiri lho, dengan memanfaatkan produk andalan Oriflame, si kecil mungil ajaib Tendercare. Silakan tonton videonya ya! Bonus: Di menit 4:55 ada kejutan khusus gara-gara shootingnya d […]
    • NovAge, Skin Care favorite aku! 19 Agustus 2016
      Soal urusan merawat wajah, aku udah buktiin sendiri deh pokoknya. Produk Oriflame yg sesuai kalau dipakainya secara KONSISTEN dan SABAR, hasilnya beneran NYATA. Sebagai yg kulit wajahnya cukup rewel--sensitif maksudnya, aku dulu takut sekali coba sembarang skin care. Soalnya salah-salah pakai produk pastiii jerawatan dan bruntusan. Ah sedih deh pokoknya. Mak […]
    • Oriflame bagi-bagi Tab Advan, ini pemenang dari teamkuu.. :-) 17 Agustus 2016
      Bulan April 2016 lalu Oriflame bikin challenge KEREN BANGET!Apalagi kalau gak bagi-bagi hadiah kan? Judul challenge-nya 'NOW OR NEVER'.Persyaratannya bisa dibilang MUDAH SEKALI lho. Para konsultan yang ingin dapat hadiah ini cukup meraih level baru 9% atau 12% atau 15% di bulan April 2016, lalu mempertahankannya di bulan berikutnya. Serta ada syara […]
    • Merawat wajah itu SABAR dan KONSISTEN. 20 Juni 2016
      Yang namanya perawatan kulit wajah itu BUTUH WAKTU ya teman2. Minimal banget hasil mulai terlihat nyata pada minggu ke 4 ya.. sekitar 28 hari, sesuai siklus pergantian kulit kita. Baca lagi, aku tulis-- 'MULAI terlihat nyata'. Bukan berarti langsung tau2 muka berubaaaaah gitu. Gak bisa. Tapi umumnya akan terlihat perbedaan pada minggu ke 4. Apalagi […]
%d blogger menyukai ini: