Tips Mengutip Lebih dari Satu Bagian Waktu Mereply

Uncategorized

Pengantar:

Tips ini dibuat oleh orang yang nggak pernah makan sekolahan HTML, jadi harap maklum kalo ada istilah2 yang kurang pas bahkan ‘kampring’. Buat yang lebih tau, jangan sungkan2 lho untuk meralat. Makasih sebelumnya.

Permasalahan:

Multiply udah memberikan pilihan untuk mengutip (quote) sebagian isi posting yang mau kita reply. Tapi permasalahannya, gimana kalo yang mau kita kutip ada dua bagian, atau bahkan beberapa bagian?

Pendahuluan:

Multiply ini didesain dengan menggunakan CSS. Dalam CSS-nya multiply, ditentukan format berbagai “bagian” (atau “DIV” – singkatan dari Division kali ya?) dengan memberikan nama kepada bagian tersebut.
Contohnya: udah ditentukan di file CSS tersebut bahwa DIV yang namanya “header” (bagian atas) memiliki background image shading abu-abu. Jadi, apapun yang diapid di antara kode <div class=”header”> dan </div> otomatis akan memiliki format seperti yang udah ditentukan di dalam file CSS-nya, yaitu ada background image warna abu-abu.

Hal yang sama juga berlaku untuk quote box-nya reply. Format quote box reply diatur di CSS-nya dengan DIV bernama “quotet” dan link berisi nama orang yang kita quote bernama “quotea”. Biar nggak bingung lihat image di bawah ini:

Image hosting by Photobucket

Dengan demikian bisa disimpulkan bahwa efek pengutipan saat reply bisa kita atur secara manual dengan menambahkan kode <div class=”quotet”> dan <div class=”quotea”>.

Caranya:

  1. Ambil contoh kasus replynya Bayu di review gue tentang film “Flightplan“. Bayu waktu itu mereply sbb:
    kangbayu
    kangbayu wrote on Jan 8

    Tumben gung, gak banyak komentar…? =D

    Tapi emang ni pilem patut dipuji dalam maenin teka-tekinya, kereeenn… penuh story twist disana-sini. Walaupun buat gw saat2 jawabannya terungkap malah jadi rada basi… Terlalu banyak kebetulan yang dipaksakan… Tapi dari segi experience, oke deh…!
  2. Gue ingin mengutip 2 bagian terpisah dari reply tersebut, yaitu bagian “Tumben gung…dst.” dan “Tapi emang ni pilem…dst.” Maka yang gue lakukan adalah mengcopy paste (secara manual) bagian yang ingin gue kutip dan menambahkan kode-kode div yang sesuai biar tampilannya nanti jadi mirip. Selain kode div, link menuju multiplynya Bayu, tulisan “kangbayu wrote” dan image tanda kutipnya juga perlu ditambahkan secara manual. Sehingga kode yang gue tulis adalah:
    <div class=quotet>
    <div class=quotea>
    <a href=http://kangbayu.multiply.com>Bayu Amus</a> berkata:</div>
    <img align=left src=http://images.multiply.com/common/misc/quote-start.gif>
    <i>Tumben gung, gak banyak komentar…? =D</i>
    <img src=http://images.multiply.com/common/misc/quote-end.gif></div>

    Hasilnya adalah seperti image yang gue muat di atas.

  3. Perhatikan bahwa dengan mengutip manual seperti ini, gue jadi bisa meng-customize tulisan “kangbayu wrote” menjadi “kangbayu berkata”, “kangbayu ngomong”, “kangbayu bilang”, atau apapun sesuka gue :-). Selain itu, kalo elo punya image tanda kutip sendiri yang udah dihost di salah satu imagehosting di net, lo bisa pake untuk menggantikan quote-start.gif dan quote-end.gif, tanda kutip standarnya multiply.

Selamat mencoba!

Buat yang mau liat-liat file CSS-nya multiply, klik di sini.

52 comments


  6. menhariq said: itu kan dibuat 25 februari… gue lagi cuti.. jadi.. meneketeheee…

    lagian sapa suruh cuti mp, kan jadi ketinggalan topik. hareee geeeneeee baru tau tentang auto line break mp yang muncul lagi????


  8. menhariq said: gung… kayanya sekarang ada modifikasi dikit deh, trik lo yang dulu ga bisa jalan sempurna..kalau pakai yang diatas itu<div class=quotet><div class=quotea><a href=http://kangbayu.multiply.com>Bayu Amus</a> berkata:</div><img align=left src=http://images.multiply.com/common/misc/quote-start.gif><i>Tumben gung, gak banyak komentar…? =D</i><img src=http://images.multiply.com/common/misc/quote-end.gif></div>hasilnya kayak gini:Bayu Amus berkata:Tumben gung, gak banyak komentar…? =D

    lah soal itu kan udah dibahas di http://mbot.multiply.com/journal/item/342


  9. gung… kayanya sekarang ada modifikasi dikit deh, trik lo yang dulu ga bisa jalan sempurna..kalau pakai yang diatas itu<div class=quotet><div class=quotea><a href=http://kangbayu.multiply.com>Bayu Amus</a> berkata:</div><img align=left src=http://images.multiply.com/common/misc/quote-start.gif><i>Tumben gung, gak banyak komentar…? =D</i><img src=http://images.multiply.com/common/misc/quote-end.gif></div>hasilnya kayak gini:Bayu Amus berkata:Tumben gung, gak banyak komentar…? =Dkalo mau bagus, mesti kayak gini sepertinya:<div class=”quotet”><div class=”quotea”><a set=”yes” linkindex=”263″ href=”http://kangbayu.multiply.com” target=”_blank”>Bayu Amus</a> berkata:</div><img src=”http://images.multiply.com/common/misc/quote-start.gif” align=”left”><i>Tumben gung, gak banyak komentar…? =D</i><br><img src=”http://images.multiply.com/common/misc/quote-end.gif”></div>hasilnya:Bayu Amus berkata:Tumben gung, gak banyak komentar…? =D


  13. mbot said: ah mana, nggak ada. halusinasi kali…

    Halah Sri… Agung gak bisa liat itu email karena aku ccnya kan cuma ke kamu ama Iwan selaku alamat yang tercantum di email pendaftaran itu…fdev dah masuk milis koq Gung…


  19. kyllian said: gimana bikin reply box seperti punya mas Agung (dengan warna yang agak pink pudar begitu) ?

    itu kan tadinya image warna abu2 (standar multiply), nah tinggal copy image tsb terus diubah sedikit warnanya pake photoshop. Habis itu disave dengan nama berbeda, dihost di photobucket.com, terus dilink ke sana lewat file CSS-nya. Ubah di bagian replybox dan quotetnya menjadi seperti ini:.replybox { padding: 5px; margin: 0 0 10px 0; background: url(http://link-image) repeat-x top left; background-color: #ffffff; border: none; border-top: 1px solid #b22222; color: #B28383;}.quotet { background: url(http://link-image)


  23. mbot said: oh iya, satu lagi kelupaan:buat yang mau coba tips ini, pastikan bahwa kode div yang lo tulis dilengkapi dengan tag penutup (/div), sebab kalo enggak, maka reply tsb akan jadi kacau balau (misalnya: link untuk mereply, mengedit dan mendelete jadi hilang). ini berlaku untuk semua kode div, harus teliti banget makenya.

    wakakakakka…gue pernah mengalami iniiiii…hahahahahahhahadan gue kelimpungan sendiri…


  25. mbot said: trus cara balikinnya gimana?

    kalo ga salah dulu ada yg nge-post cara betulinnya…cuma sempet berhari2 gak bisa…sampai akhirnya entah dapet wahyu darimana…tuh multiply tiba2 normal lagi…cuma gara2 itu rada2 kapok utak-atik css lagi….0_o


  38. mbot said: oalaaaah… itu toh maksudnya. itu pake HTML entities Riq. Jadi tanda “<" yang kalo di kode HTML akan lenyap karena dianggap perintah, bisa digantikan dengan kode lain supaya dia muncul sebagaimana adanya (apa sih bahasanya nih). Untuk tanda < bisa digantikan dengan & l t ; (tentunya tanpa spasi krn kalo gue kasih spasi dia berubah bentuk lagi)Untuk tanda > bisa digantikan dengan & g t ;Biar gampang ngingetnya, anggep aja lt=less than/ lebih kecil dari, dan gt=greater than/lebih besar dari. trus tinggal ditambahin “&” dan “;” di depan dan di belakangnya. Untuk daftar lengkap HTML entities, bisa dilihat di siniInfo ini gue dapet dari Ferdina, si HTML/javascript/design master yang sayang sekali sekarang udah non-aktif di MP.

    oalaa.. ternyata bisa pake kayak gitu..jadi kalo mo nerangin cara pasang img srcbisa kayak gini *numpang test*:<img src=”http://pages.prodigy.net/bestsmileys1/emoticons3/anigrla2.gif”>horeee.. thanks a lot gung.. tapi kalo diedit, tandanya jadi berubah.. agak repot sih emang..


  40. menhariq said: padahal aku maunya nerangin script tentang div nya tanpa harus pake image.. biar bisa dicopy paste tapi juga ga dijalanin scriptnya..

    oalaaaah… itu toh maksudnya. itu pake HTML entities Riq. Jadi tanda “<" yang kalo di kode HTML akan lenyap karena dianggap perintah, bisa digantikan dengan kode lain supaya dia muncul sebagaimana adanya (apa sih bahasanya nih). Untuk tanda < bisa digantikan dengan & l t ; (tentunya tanpa spasi krn kalo gue kasih spasi dia berubah bentuk lagi)Untuk tanda > bisa digantikan dengan & g t ;Biar gampang ngingetnya, anggep aja lt=less than/ lebih kecil dari, dan gt=greater than/lebih besar dari. trus tinggal ditambahin “&” dan “;” di depan dan di belakangnya. Untuk daftar lengkap HTML entities, bisa dilihat di siniInfo ini gue dapet dari Ferdina, si HTML/javascript/design master yang sayang sekali sekarang udah non-aktif di MP.


  41. mbot said: script html yang mana sih riq? perasaan div itu nggak ada hubungannya dengan script…*garuk2 kepala*

    kalo mo nerangin ke orang lain tentang suatu script divkayak yang agung tulis:itu kan munculnya :Bayu Amus berkata:Tumben gung, gak banyak komentar…? =D padahal aku maunya nerangin script tentang div nya tanpa harus pake image.. biar bisa dicopy paste tapi juga ga dijalanin scriptnya..


  42. menhariq said: iya.. tapi maksudnya.. klo mo nulis isi dari div itu tapi ga dijalanin script hmtlnya gimana? masih blum ngerti..

    nah sekarang gue yang bingung…script html yang mana sih riq? perasaan div itu nggak ada hubungannya dengan script… *garuk2 kepala*


  44. oh iya, satu lagi kelupaan:buat yang mau coba tips ini, pastikan bahwa kode div yang lo tulis dilengkapi dengan tag penutup (/div), sebab kalo enggak, maka reply tsb akan jadi kacau balau (misalnya: link untuk mereply, mengedit dan mendelete jadi hilang). ini berlaku untuk semua kode div, harus teliti banget makenya.


  45. menhariq said: oiya gung.. nanya dong.. untuk bikin quote box kuning kayak agung buat tapi ga dijalanin scrip htmlnya gimana sih? thanks in advance..

    Itu pake -div- juga, tapi ditambah dengan kode style untuk ganti backgroundnya. jadinya div style=background-color:#FCF0ABditulisnya langsung di source-nya, nggak bisa dari WYSIWYG editor.


  49. mbot said: Tips ini dibuat oleh orang yang nggak pernah makan sekolahan HTML, jadi harap maklum kalo ada istilah2 yang kurang pas bahkan ‘kampring’. Buat yang lebih tau, jangan sungkan2 lho untuk meralat. Makasih sebelumnya.

    gilee.. ga pake belajar HTML aja bisa kayak gini.. another great tips from agung.. eh btw.. tadi bilangnya :Agung bilang:Riq.. katanya mo makan² dirumah ? dah ditunggu nih.. kok dicari dihalaman ini ga ada quote nya yah.. kidding broo… cuma iseng aja.. oiya gung.. nanya dong.. untuk bikin quote box kuning kayak agung buat tapi ga dijalanin scrip htmlnya gimana sih? thanks in advance..