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 )

Foto Google+

You are commenting using your Google+ 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 )

w

Connecting to %s

  • Komentar Terbaru

    Feni Febrianti di siapa yang sering kesetrum sep…
    mbot di My Wonder Woman
    bayutrie di My Wonder Woman
    mbot di My Wonder Woman
    p3n1 di My Wonder Woman
    mbot di My Wonder Woman
    enkoos di My Wonder Woman
    Rafi: manggung lagi,… di demi anak naik panggung…
    mbot di My Wonder Woman
    Johana Elizabeth di My Wonder Woman
  • Terfavorit

  • Terbanyak diklik

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

    Bergabunglah dengan 6.575 pengikut lainnya

  • Twitnya @mbot

  • Agung ‘si mbot’ Nugroho

  • Arsip

  • Penunggu blog ini

    mbot

    mbot

    Seorang pegawai biasa-biasa aja

    Tautan-tautan Pribadi

    Layanan Terverifikasi

    Tampilkan Profil Lengkap →

  • RSS Nonton Deh!

    • Hal yang Perlu Disiapin Sebelum Nonton "A Quiet Place" 15 April 2018
      Buat yang belum tau, "A Quiet Place" menceritakan kehidupan sebuah keluarga dengan 3 anak yang hidupnya sama sekali nggak boleh berisik, karena kalo bersuara dikit aja bisa diserang oleh 'sesuatu' (no spoiler ahead).Tentunya ini sedikit menimbulkan pertanyaan bagi gue, lantas gimana kalo mereka eek. Mungkin suara ngedennya bisa diredam, s […]
    • Benarkah Pacific Rim Uprising Jelek? 25 Maret 2018
      Soal keputusan untuk nonton atau nggak nonton sebuah film kadang cukup pelik. Di satu sisi, inginnya nonton semua film yang rilis. Di sisi lain, tiket bioskop deket rumah sekarang udah mencapai 60 ribu (harga weekend). Belum termasuk pop corn yang ukuran mediumnya 50 ribu dan air putih di botol 330 ml seharga 10 ribu*. Artinya: filmnya harus beneran dipilih […]
    • Review: Designated Survivor (Serial TV 2016) 15 Maret 2018
      Semua berawal gara-gara Netflix.Di suatu hari yang selo, nyalain Netflix tanpa tau mau nonton apa, tiba-tiba trailer film ini muncul.Ida langsung tertarik. "Nonton ini aja, suami. Istri seneng nonton film yang gini-gini," katanya, tanpa keterangan yang lebih operasional mengenai batasan film yang masuk dalam kategori 'gini-gini'.Ternyata […]
    • Review: Peter Rabbit (2018) Bikin Penonton Doain Tokoh Utama Celaka 11 Maret 2018
      Biasanya film kan dikemas sedemikian rupa biar penonton bersimpati pada tokoh utamanya, ya. Biar kalo tokoh utamanya dalam posisi terancam, penonton deg-degan, berdoa biar selamat sampai akhir film. Khusus untuk film ini, gue sih terus terang doain Peter Rabbit-nya cepetan mati. Digambarkan dalam film ini Peter Rabbit adalah kelinci yang sotoy, sangat iseng […]
    • 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 […]
  • RSS Bisnis bareng Ida Yuk!

    • Diamond Conference Tokyo 2018: Part 1-- Keberangkatan! 8 Mei 2018
      [Senin, 17 April 2018] Jalan-jalan Conference kali ini rasa excitednya agak sedikit beda karenaaaaa ini adalah DIAMOND CONFERENCE PERTAMA AKU... 😍😍😍😍😍😍 Selama ini aku pergi kan untuk Gold Conference, yaitu reward buat title Gold Director and up. Sedangkan seperti namanya, Diamond Conference ini adalah reward khusus buat yg titlenya Diamond and up! Selama ini […]
    • Seminar "Katakan TIDAK Pada Investasi Ilegal"-- MLM vs Money Game. 8 Mei 2018
      Diamond and up Oriflame bersama Top Management Oriflame foto bareng. Tanggal 2 Mei 2017 tahun lalu, sebagai salah satu Diamond Director-nya Oriflame, aku dapat sebuah undangan eksklusif untuk hadir ke acara Seminar Nasional yg diselenggarakan oleh Satuan Tugas Waspada Investasi dan APLI (Asosiasi Penjualan Langsung Indonesia). Judul seminar ini adalah-- KATA […]
    • Sewa Modem Wifi Buat Ke jepang? Di HIS Travel Aja! 26 April 2018
      Ceritanyaaa.. aku dan agung baru aja pulang dari Diamond Conferencenya Oriflame di Tokyo.. Ada banyaaaaak banget yg pengen aku ceritain. Satu-satu deh ya nanti aku posting. Tapi aku mau mulai dari soal INTERNETAN selama di sana.. ahahahaha.. PENTING iniii! Untuk keperluan internetan di tokyo kemarin aku dan agung sempet galau. Mau pakai roaming kartu atau se […]
    • Penyebab Kapas Ini Kotor Adalah... 17 Maret 2018
      Kapas ini bekas aku bersihin muka tadi pagi bangun tidur.. Lhoo kok kotor?Emangnya gak bersihin muka pas tidur?Bersihin dong. Tuntas malahan dengan 2+1 langkah.Lalu pakai serum dan krim malam. Kok masih kotor? Naaah ini diaaaa.. Tahukah teman2 kalau kulit wajah kita itu saat malam hari salah satu tugasnya bekerja melakukan sekresi atau pembersihan?Jadi krim […]
    • Join Oriflame Hanya Sebagai Pemakai? Boleh! 16 Maret 2018
      Aku baru mendaftarkan seseorang yg bilang mau join oriflame karena mau jadi pemakai..Dengan senang hatiiii tentunyaaa aku daftarkan..😍😍😍 Mbak ini bilang kalau udah menghubungi beberapa orang ingin daftar oriflame tapi gak direspon karena dia hanya ingin jadi pemakai aja.. Lhoooooo.. Teman2 oriflamers..Member oriflame itu kan ada 3 tipe jenisnya--Ada yg join […]
    • Semua karena AKU MAU 16 Maret 2018
      Lihat deh foto ini..Foto rafi lagi asyik mainan keranjang orderan di Oriflame Bulungan dulu sebelum pindah ke Oriflame Sudirman sekarang. Tanggal 1 Juli 2010.Jam 00.20 tengah malam. Iya, itu aku posting langsung setelah aku foto.Dan jamnya gak salah.Jam setengah satu pagi. Hah?Masih di oriflame? IyaNgapain? Beresin tupo. Jadi ya teman2, jaman sistem belum se […]
    • Kerja Keras yang Penuh Kepastian... Aku Suka! 15 Maret 2018
      Dari club SBN--Simple Biznet, ada 3 orang yg lolos challenge umroh/uang tunai 40 juta.Sedangkan dari konsultan oriflame se-indonesia raya konon ada total sekitar 60-an orang yg dapat hadiah challenge ini. Inilah yg aku suka dari oriflame.Level, title, cash award, maupun hadiah challengenya gak pernah dibatasin jumlahnya! Mau berapapun jumlah orang yg lolos k […]
    • Tendercare Oriflame: Si Kecil Ajaib 14 Maret 2018
      Buat teman-teman yg pemakai oriflame, atau at least pernah liat katalognya, mungkin pernah dengar atau justru pemakai setia si Tender Care ini.Bentuknya keciiil, mungiiil, lha cuma 15 ml doang.. Eh tapi kecil-kecil gini khasiatnya luar biasa.Tender Care ini produk klasiknya oriflame, termasuk salah satu produk awal saat oriflame pertama kali mulai dagang di […]
    • Sharing di Dynamics Sunday Party 4 Maret 2018
      Agenda hari minggu ini berbagi ilmu dan sharing di acara bulanannya teh inett Inette Indri-- DSP, Dymamics Sunday Party! Yeaaaaay! Teh inet udah lama bilang kalau pengen undang aku kasih sharing di grupnya. Aku dengan senang hari meng-iya-kan. Karena buatku berbagi ilmu gak pernah rugi. Jadilah kebetulan wiken ini aku ke Bandung untuk kasih kelas buat team b […]
    • Kelas Bandung, Sabtu 3 Maret 2018 3 Maret 2018
      Ah senaaaang ketemuan lagi sama team bandungku tersayang..😍😍😍😍😍 Hari ini aku bawain materi tentang mengelola semangat.Ini materi sederhana tapi sangat amat POWERFULL.Karena betul2 bikin ngaca sama diri sendiri.Yang banyak dibahas adalah soal MINDSET. Kelas kali ini Agung Nugroho juga ikut berbagi ilmu..Bapak Diamond kasih kelas juga lhooo..😍😍😍😍😍 Seneng […]
  • Iklan
%d blogger menyukai ini: