[ALAMIN] Mga Aralln at Tutorial sa BBCode [+mga tutorial video!]

[Meowth05]

Napansin kong marami sa ating mga Pilipino ang walang ideya kung paano nga ba ginagawa ang BBCode. Kaya naman, napagpasyahan kong magsimula ng isang thread sa ating local board na kung saan maibabahagi ko ang aking natutunan tungkol sa BBCode ng Forum. Sundin ang mga aralin at tutorial na aking isinalin at nang madagdagan ang iyong mga kasanayan, malaman kung paano mag-disenyo at lumikha ng iyong sariling BBCode signature o lumikha ng isa para sa ibang tao.

Orihinal na thread: [LEARN]BBCode Lessons & Tutorials [+tutorial videos'] ni roslinpl

		........................................Link.sa.aralin:........................................	..................Link.sa.Tip.at.Trick:..................
███████████████████████████████████████ ██████████████████████████████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ ██████████████████████████████████████████ ███████████████████████████████████████	..............	Aralin 1:.Panuntunan ng Forum sa estilo ng signature Aralin 2:.Maximum na taas ng BBCode signature Aralin 3:.Senior/Hero/Legendary.Members.signature.table.template.(.at.iba pa.tungkol sa.mga table...) Aralin 4:.Mga Mahahalaga sa Pagguhit ng BBCode lvl.I Aralin 5:.Mga Mahahalaga sa Pagguhit ng BBCode lvl.II Aralin 6:.Mga Kulay Aralin 7:.Mga Kulay- Gradient Aralin 8:.Mga Mahahalaga sa Pagguhit ng BBCode lvl.III (kasama na ang video tutorial) Aralin 9:."Ang Laman ng mga table": Sukat ng imahe Aralin 10:."Advanced na Teknik sa Pagguhit ng BBCode lvl.I" Aralin 11:."Advanced na Teknik sa Character Saving part I" Aralin 12:.Susunod	I II III IV V VI

Aralin1: Panuntunan ng Forum sa estilo ng signature

RANGGO	LINK	ESTILO	BOLD NA LETRA	ITALICIZED	UNDERLINED	TABLE	MAX CHARS
Newbies	hindi	hindi	hindi	oo	oo	hindi	50
Jr. Members	hindi	hindi	hindi	oo	oo	hindi	150
Members	oo	hindi	hindi	oo	oo	hindi	4000
Full Members	oo	font color, font face	oo	oo	oo	hindi	4000
Sr. Members	oo	oo (walang 'glow')	oo	oo	oo	oo	4000
Hero/Legendary.Members	oo	oo	oo	oo	oo	oo	4000

Aralin 2: Maximum na taas ng BBCode signature

Ang maximum na taas ng signature ay parehas para sa lahat ng ranggo.
Simpleng paraan para malaman kung ano ang posibleng maximum na taas: Habang nagdedesenyo ng signature - lumikha ng table column na may 3 mga linya ng teksto, kada linya ay magsulat ng letrang 'p'.

Tandaan: Ang profile signature space ay may 'parehong' cascading style sheets bilang 'quote' -
- Kaya naman ang alinmang mas mababa sa ika-3 linyang 'p'ay hindi makikita sa espasyo ng iyong signature.

p
p
p

Aralin 3: Senior/Hero/Legendary Members signature table template (at iba patungkol sa mga table...)

Ang mga table ay binubuo ng mga column at row.
Upang makabuo ng table kailangan mong bumuo ng frame at row. Ang mga Row ay naglalaman ng mga column.

Simpleng paliwanag sa mga halimbawa:
Buksan ang table -> buksan ang row na may hal. 4 na mga column-> isara ang row -> bumuo ng panibagong row na may 4 na mga column-> isara ang row -> isara ang table

Sa code ang parehong halimbawa ay magmumukhang ganito:

Code:

[table]
[tr]
[td]
Row_1_column_1
[/td]
[td]
Row_1_column_2
[/td]
[td]
Row_1_column_3
[/td]
[td]
Row_1_column_4
[/td]
[/tr]
[tr]
[td]
Row_2_column_1
[/td]
[td]
Row_2_column_2
[/td]
[td]
Row_2_column_3
[/td]
[td]
Row_2_column_4
[/td]
[/tr]
[/table]

Prebiu:

Row_1_column_1	Row_1_column_2	Row_1_column_3	Row_1_column_4
Row_2_column_1	Row_2_column_2	Row_2_column_3	Row_2_column_4

Kung gusto mong luumika ng bagong disenyo ng signature(Para sa Senior/Hero/Legendary Members) maaari kang magsimula na may template na magpapatipid ng iyong oras:

Code:

[quote][table]
[tr]
[td]
p 
p
p - MAX. HEIGHT - 
[/td]
[td]
CONTENT
[/td]
[/tr]
[/table][/quote]

Kapag handa na ang disenyo ay alisin ang 'quote' na tag at ang iyong BBCode signature code ay handa na 🙂


Aralin 4: Mga Mahahalaga sa Pagguhit ng BBCode lvl.I

Kung nais nating magparami ng imahe sa BBCode kailangan nating tandaan ang ilang napakahalagang mga prinsipyo ng BBCode ng Forum:

Personal kong sinubukan ang maraming iba't ibang mga paraan at sigurado ako na ang pinakamahusay na paraan ay ang mano-manong pagguhit ng imahe sa pamamagitan ng pixel by pixel na paraan. Ang mga converter / generator ng BBCode ay hindi nakakatugon sa aking mga inaasahan, hindi ko inirerekomenda ang anuman at hindi ko ginagamit ang alinman sa mga ito.

Ang pinakamahusay na mga karakter na ASCII na inirerekumenda kong gamitin para sa iyong mga larawan ng BBCode ay ito: " ▀ ▄ █ ▌ ▐ ░ ▒ ▬ ▂ ▃ ▅ ▆ "
Pero kadalasan ito ang ginagamit ko " █ " at laging nasa sukat na 2pt. Na siyang ang pinaka-tugma para sa iba't ibang mga web browser at iba't ibang mga operating system.


Bakit hindi ko ginagamit ang 2px o 1pt o 1px?
Kung ang lahat ay gagamit ng Google Chrome, kung gayon ay medyo cool na gamitin ang 2px, 1px o ikahit ano na mas maliit sa 2pt. Maaari kang makakuha ng higit pang mga detalye imahe ng iyong BBCode.

Sa kasamaang palad ang mga character na mas maliit kaysa sa 2pt na ginagamit sa mga BBCode signature ay mukhang stretchy o masyadong maliit sa iba't ibang mga web browser at mga operating system na nangangahulugan ang signature ay mukhang mahusay para sa mas maliit na bahagi ng mga bumibisita.

Ang disenyo ng Signature BBCode ay hindi flexible gaya ng disenyo ng HTML + CSS, na maaaring mukhang iba din sa iba't ibang mga web browser.

Sa kasalukuyang bersyon ng Chrome/Mozilla/Safari browser inererekomenda ko na gumamit ng 2px Monospace font kapag gagawa ng BBCode.
Ito ay nasabi sa Aralin10.

Eksperimento: Gumawa ng parisukat sa loob ng BBCode. Gamitin ang parehong ASCII character " █ " na may iba't ibang sukat: 2pt, 2px, 1pt, 1px.

Prebiu ng BBCode na parisukat sa ibaba ng iba't ibang mga browser tulad ng Chrome/Mozilla/Opera/Edge/Safari/etc.

2pt→

███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████

2px→

████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████

1pt→

██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████

1px→

██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████

Tandaan na ang parisukat na iginuhit na character na may sukat na 2pt sa karamihan ng mga browser ay magkatulad. Ito ay ang pinaka-tugma. Ang iba pang mga parisukat na iginuhit na may parehong ASCII na character sa iba't ibang mga laki ng character ay mukhang stretchy / shrunken sa iba pang mga web browser. Ang 2pt ASCII character ay hindi 100% na tugma ngunit pagkatapos ng mga taon ng mga eksperimento  ay sigurado ako na ito ay lubos na tugma.

Sa kasalukuyang bersyon ng Chrome/Mozilla/Safari browser inererekomenda ko na gumamit ng 2px Monospace font kapag gagawa ng BBCode.
Ito ay nasabi sa Aralin10.

[1714599735]

1714599735

[1714599735]

1714599735

[Meowth05]

Aralin 5: Mga Mahahalaga sa Pagguhit ng BBCode lvl.II


O.K. Ngayon, hindi natin alam na ito ay isang mahusay na desisyon upang gamitin ang 2pt █ ASCII character para sa imahe ng ating BBCode. Ngunit paano gumuhit ng maganda gamit ito?

Ang pasensya at kaunting artistikong kaisipan ay ang magdadala sa atin sa ating layunin 🙂

Kailangan mong magsanay at mag-eksperimento upang matutunan mo ito nang mabuti.

Sa kasalukuyang bersyon ng Chrome/Mozilla/Safari browser inererekomenda ko na gumamit ng 2px Monospace font kapag gagawa ng BBCode.
Ito ay nasabi sa Aralin10.

Pagsasanay: Ang napiling ASCII na mga character para sa imahe ng ating BBCode: ░ at █

Hakbang 1) Gumawa ng parihaba gamit ang█ ASCII chars. Tandaan ang max. na taas (Aralin 2).

█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████

Hakbang 2) Gumawa ng Pad arrows gamit ang░ ASCII chars.

█████████████████████████████████████
███████░░░░░░░███████████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
██░░░░░░█████░░░░░░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████

Hakbang 3) Gumawa ng Pad buttons gamit ang ░ ASCII char.

█████████████████████████████████████
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████

Hakbang 4) Paligiran ang Pad border ng ░ ASCII char.

░███████████████████████████████████░
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
░███████████████████████████████████░

Code ng Pagsasanay:

Code:

[b]Step 1)[/b] Draw a rectangle with █ ASCII chars. Remember about max. height. ([url=https://bitcointalk.org/index.php?topic=1727100.msg17283187#msg17283187]Lesson 2[/url]).
[quote][size=2pt]█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████[/size][/quote]

[b]Step 2) [/b]Draw Pad arrows with ░ ASCII chars.
[quote][size=2pt]█████████████████████████████████████
███████░░░░░░░███████████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
██░░░░░░█████░░░░░░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████[/size][/quote]

[b]Step 3) [/b]Draw Pad buttons with ░ ASCII char.
[quote][size=2pt]█████████████████████████████████████
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████[/size][/quote]

[b]Step 4)[/b] Round the Pad border with ░ ASCII char.
[quote][size=2pt]░███████████████████████████████████░
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
░███████████████████████████████████░[/size][/quote]

Aralin 6: Mga Kulay

Upang mabago ang kulay ng mga elemento ng disenyo ng BBCode signature ay idagdag lamang ang isang katangian ng kulay.

Code:

[color=#value][/color]

Ang katangian ng kulay ay tumatanggap ng verbal na pangalan ng kulay gaya"Black, White, Red, Yellow, Pink, Green, Orange, Purple, Blue, Beige, Brown, Teal, Navy, Maroon, Lime Green"
ngunit tumatanggap din ng hexadecimal na anyo atshorthand hexadecimal na anyo na magpapakaunti sa mga character. (Ang limitasyon ng signature char. ay hindi kalakihan, tipirin ang mga character hangga't kaya mo 🙂 )

Shorthand hexadecimal mula sa mga halimbawa:

Hexadecimal.na anyo	........Shorthand.hexadecimal.na anyo........
#000000	#000
#ffffff	#fff
#77CC33	#7C3
#33CC99	#3C9

Mayroon ding 'transparent' BBCode na katangian ng kulay na lubusang mahalaga sa imahe ng BBCode.

Ang tekstong ito ay nakikita NGUNIT ITO AY HINDI Ang tekstong ito ay nakikita

Code:

Ang tekstong ito ay nakikita [color=transparent]NGUNIT ITO AY HINDI[/color] Ang tekstong ito ay nakikita

Aralin 7: Mga Kulay- Gradient

Upang makalikha ng gradient para sa iyong mga teksto o larawan ng iyong BBCode ay maaaring makatipid ng maraming oras gamit ang 'Text Color Fader' [/ b] - gradient generator 🙂

Nung kakaunti ang karanasan ko sa BBCode, ang paggawa ko ng gradient ay mano-mano. Sa tulong ng mga graphic editor ay nakabuo ako ng parisukat na may gradient background at pagkatapos ay mano-mano at naglagay ako ng mga linya ng gabay sa lahat ng distansya mula sa isa't isa at nakuha ko ang mga kinakailangang mga kulay na may color picker. Pagkatapos ay natagpuan ko ang isang napakagandang gradient generator:)

http://patorjk.com/text-color-fader/

Ito ang aking paboritong tool upang makagawa ng mga mahusay na gradient at maaari mong itakda ang "Output Code" sa "Standard Forum Code".


Ang http://patorjk.com/text-color-fader user interface ay napaka simple. Sumulat ng mensahe, pumili ng bilang ng mga kulay at itakda ang output code sa 'Standard Forum Code'. Pindutin ang 'generate color faded text'' at tapos na 🙂 (halos).

Halimbawa:

Lesson 7: something about gradients xD

Code:

[color=#9600ff]L[/color][color=#9c07f2]e[/color][color=#a10de4]s[/color][color=#a714d7]s[/color][color=#ac1bc9]o[/color][color=#b221bc]n[/color] [color=#bd2fa1]7[/color][color=#c23594]:[/color] [color=#cd4379]s[/color][color=#d34a6b]o[/color][color=#d8505e]m[/color][color=#de5751]e[/color][color=#e35e43]t[/color][color=#e96436]h[/color][color=#ee6b28]i[/color][color=#f4721b]n[/color][color=#f9780d]g[/color] [color=#f9780e]a[/color][color=#f3711c]b[/color][color=#ed6a2b]o[/color][color=#e86339]u[/color][color=#e25c47]t[/color] [color=#d64e63]g[/color][color=#d04771]r[/color][color=#ca3f80]a[/color][color=#c5388e]d[/color][color=#bf319c]i[/color][color=#b92aaa]e[/color][color=#b323b8]n[/color][color=#ad1cc6]t[/color][color=#a715d4]s[/color] [color=#9c07f1]x[/color][color=#9600ff]D[/color]

Ngayon alam na natin kung paano mapabilis ang pagbuo ng isang teksto na may gradient na kulay ngunit kung paano gamitin ang parehong generator upang makabuo ng gradient para sa BBCode mga imahe?
Buweno, ito ay medyo mas kumplikado dahil depende ito sa ating mga pangangailangan. Iba't ibang disenyo = iba't ibang pangangailangan.

Magsimula tayo sa isang simpleng halimbawa.

Pagsasanay:

████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████

████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████

Code:

[table]
[tr]
[td]
[size=2pt]
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████


████████
████████
████████
████████
[/td]
[td]
[size=2pt]
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████


████████
████████
████████
████████
[/td]
[/tr]
[/table]

Mayroon kaming dalawang itim na eksklamasyon at gusto naming ipinta ang kulay na gradient.
Sa aming halimbawa, ang bawat eksklamasyon ay naglalaman ng 17 linya ng █ ASCII na mga character na may sukat na 2pt.

Upang makabuo ng mga hexadecimal value para sa ating gradient, buksan ang http://patorjk.com/text-color-fader/

para sa "mensahe" isulat ang:

12345678901234567

Maaari kang magsulat ng iba pang bagay na isip mo ngunit dapat ay hindi ito lalagpas sa 17 na character. Dahil kailangan natin ng 17 mga kulay para sa 17 na mga linya.

Pumili kayo ng mga kulay (nagtakda ako ng 2 kulay, #0040ff at #bd0021) at pindutin ang 'generate color faded text'. Magdagdag ng tag ng kulay sa bawat linya ng BBCode na iyong binuo at kopyahin ang mga nabuong kulay ng larawan o imahe ng BBCode bilang mga bagong kulay.
Subukan na ipinta ang pangalawang eksklamasyon nang 'paurong'.

Resulta ng pagsasanay:

████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████

████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████

Code:

[table]
[tr]
[td]
[size=2pt]
[color=#0040ff]████████
[color=#0c3cf1]████████
[color=#1838e3]████████
[color=#2334d5]████████
[color=#2f30c8]████████
[color=#3b2cba]████████
[color=#4728ac]████████
[color=#53249e]████████
[color=#5f2090]████████
[color=#6a1c82]████████
[color=#761874]████████
[color=#821466]████████
[color=#8e1059]████████


[color=#9a0c4b]████████
[color=#a5083d]████████
[color=#b1042f]████████
[color=#bd0021]████████
[/td]
[td]
[size=2pt]
[color=#bd0021]████████
[color=#b1042f]████████
[color=#a5083d]████████
[color=#9a0c4b]████████
[color=#8e1059]████████
[color=#821466]████████
[color=#761874]████████
[color=#6a1c82]████████
[color=#5f2090]████████
[color=#53249e]████████
[color=#4728ac]████████
[color=#3b2cba]████████
[color=#2f30c8]████████


[color=#2334d5]████████
[color=#1838e3]████████
[color=#0c3cf1]████████
[color=#0040ff]████████
[/td]
[/tr]
[color/table]

[ Tip at Trick (3):[/b][/color] pagpapakaunti sa mga character (I)

Habang gumagawa ng BBCode signature, hindi natin kailangang isarado ang color tag bago magdagdag ng iba pang color tag. Ito ay makakatipid ng higit pang mga character.
Hindi natin kailangan ang magsara ng madaming tag, gaya ng [/b], [/size], [/font] at iba pa. Marami pang mga tip ang paparating 🙂
Aralin 8: Mga Mahahalaga sa Pagguhit ng BBCode lvl.III

Alam na natin ang pinakamahalagang mga bagay tungkol BBCode signature. Ito na ang oras upang lumikha ng isang simpleng signature para sa mga Serior/Hero/Legendary Member.
Sabihin nating gusto nating lumikha ng isang signature na magmumukhang ganito:

░░░░░░░▄▄▄▄▄▄ ░░░░▄██████████▄ ░░░██████████████ ░░██████░▐▌░██████ ░█████░░░░░░░▀█████ ██████▄▄░░▄▄░░██████ ████████░░▀▀░▄██████ ████████░░▄▄▄░░█████ ██████▀▀░░▀▀▀░░█████ ░█████░░░░░░░░█████ ░░██████░▐▌░██████ ░░░██████████████ ░░░░▀██████████▀ ░░░░░░░▀▀▀▀▀▀ ░░░▀▀▀████████▀▀▀

We ♥ Bitcoin

Hindi ako magsusulat ng mga hakbang ngunit sa halip ay nag-upload ako ng isang video tuorial para sa inyo kung saan ipinakita ang proseso ng paglikha. Dinoble ko ang bilis ng clip, sa katotohanan ito ay umabot ng 18.5min. Ang haba ng video ay 9min12sec.

Aralin 8 video tutorial: https://youtu.be/McKHrx1tBK0

Kung nais natin na mag-replicate ng isang imahe / logo sa BBCode, ito ay mabuti upang makapag-handa at makapag-upload ng isang file ng imahe na maaari nating masuri ang mga resulta sa pag-run gamit ang orihinal na imahe.

Aralin 8 Imahe ng Bitcoin logo: https://i.imgur.com/gPmC4Xi.png

Ito ay ang pinasimpleng Bitcoin logo - Inayos ko ang anggulo ng pitch upang gawing mas mahusay ang hitsura nito sa BBCode. Ang 2pt ASCII na character ay hindi perpekto para sa mga guhit ng BBCode ngunit hindi bababa sa 2pt ang pinaka-tugmang bilang na alam natin mula sa Aralin 4.

Sa kasalukuyang bersyon ng Chrome/Mozilla/Safari browser inererekomenda ko na gumamit ng 2px Monospace font kapag gagawa ng BBCode.
Ito ay nasabi sa Aralin10.

BBCode signature code ng Aralin 8:

Code:

[center][table]
[tr]
[td]
[size=2pt][color=#f90][color=transparent]░░░░░░░[/color]▄▄▄▄▄▄
[color=transparent]░░░░[/color]▄██████████▄
[color=transparent]░░░[/color]██████████████
[color=transparent]░░[/color]██████[color=transparent]░[/color]▐▌[color=transparent]░[/color]██████
[color=transparent]░[/color]█████[color=transparent]░░░░░░░[/color]▀█████
██████▄▄[color=transparent]░░[/color]▄▄[color=transparent]░░[/color]██████
████████[color=transparent]░░[/color]▀▀[color=transparent]░[/color]▄██████
████████[color=transparent]░░[/color]▄▄▄[color=transparent]░░[/color]█████
██████▀▀[color=transparent]░░[/color]▀▀▀[color=transparent]░░[/color]█████
[color=transparent]░[/color]█████[color=transparent]░░░░░░░░[/color]█████
[color=transparent]░░[/color]██████[color=transparent]░[/color]▐▌[color=transparent]░[/color]██████
[color=transparent]░░░[/color]██████████████
[color=transparent]░░░░[/color]▀██████████▀
[color=transparent]░░░░░░░[/color]▀▀▀▀▀▀
[color=transparent]░░░[/color][color=#e1e1e1]▀[color=#d3d3d2]▀[color=#c6c4c3]▀[color=#b8b6b4]█[color=#aaa8a5]█[color=#9c9a96]█[color=#8f8b87]█[color=#817d78]█[color=#918e8a]█[color=#a19e9b]█[color=#b1afad]█[color=#c1c0be]▀[color=#d1d0d0]▀[color=#e1e1e1]▀
[/td]
[td]
[size=25pt][b][i][color=#f90]We [color=red]♥[/color] Bitcoin[/b][/size]
[/td]
[/tr]
[/table][/center]

Aralin 9: "Ang Laman ng mga table": Sukat ng imahe

Ito ay mabilis na aralin o marahil ay isang mabilis na tip lamang.
Ang Aralin 9 ay walang kaugnayan sa signature ngunit ito ay may kaugnayan sa BBCode at mabuti na malaman mo ito kapag naisip mo ang tungkol sa pagpapabuti ng disenyo ng thread atbp.

Kung nais mong lumikha ng isang table at maglagay ng ilang mga larawan sa loob ng mga table row, ang iyong imahe ay maaaring magbago ng sukat(sa mas maliit).
Ang pagdaragdag ng katangian ating imahe ay hindi maglulutas ng problema.

Halimbawa:

150px x 150px Bitcoin logo Ngunit ito ay hindi 150x150...

150px x 150px Bitcoin logo Ang lapad na 150 ay idinagdag. Ngunit ito ay hindi pa din 150x150..

Halimbawang code:

Code:

[quote][table]
[tr]
[td]
[img]https://i.imgur.com/OaJobp5.png[/img]
[/td]
[td]
150px x 150px Bitcoin logo
Ngunit ito ay hindi pa din 150x150...
[/td]
[/tr]
[/table][/quote]

[quote][table]
[tr]
[td]
[img width=150]https://i.imgur.com/OaJobp5.png[/img]
[/td]
[td]
150px x 150px Bitcoin logo
Ang lapad na 150 ay idinagdag. Ngunit ito ay hindi pa din 150x150..
[/td]
[/tr]
[/table][/quote]

Pano mareresolba ang problema?
Sa parehong hanay kung saan ang imahe ay kailangan nating mag-type ng random na linya ng teksto ay mas mahaba kaysa sa lapad ng imahe.
At gawin itong transparent. ( color=transparent ).

fffffffffffffffffffffffffffffff

150px x 150px Bitcoin logo Ngayon ay walang anumang katangian ng lapad ang ipinakita bilang 150px x 150px

Code:

Code:

[quote][table]
[tr]
[td]
[img]https://i.imgur.com/OaJobp5.png[/img]
[color=transparent]fffffffffffffffffffffffffffffff[/color]
[/td]
[td]
150px x 150px Bitcoin logo
Ngayon ay walang anumang katangian ng lapad ang ipinakita bilang 150px x 150px
[/td]
[/tr]
[/table][/quote]

[Meowth05]

Aralin 10: "Advanced na Teknik sa Pagguhit ng BBCode lvl.I"

Ipinangako ko na sabihin ang higit pang tungkol sa pagguhit gamit ang font na 'Monospace'.

Ang 'Monospace' ay tila ang tanging font na kung saan napapanatili nito ang 'parehong' lapad ng character, puwang sa pagitan ng dalawang character - sa gayon ito ay karaniwang  'pareho' sa ilalim ng iba't ibang mga operating system.
(Ngunit tiyak na hindi sa ilalim ng lahat ng mga ito).

Kaya kahit na ang mga gumagamit ng Mac na may mas lumang mga bersyon ng Safari ay makakakita ng 'parehas' bilang sabihin natin ay nasa pinakabagong Bersyon ng Chrome. Idinagdag ko ang 'sabihin natin' dahil ang pinakabagong Chrome ay makalat ng kaunti sa ating mga disenyo


Kaya ang tanging problema ay ang mga 'Monospace' ay hindi mukhang solido katulad ng parehong pagguhit na ginawa gamit ang isang default na font.
Ngunit ito ay may ilang mahalagang mga pakinabang.

Hindi lamang mukang 'parehon' ng nasa ilalim ng iba't ibang mga browser. Ngunit gayundin! maaari kang ding gumuhit ng iyong mga disenyo gamit ang 1px, 1pt, 2px, 2pt at magmumukha pa rin itong parehas sa ilalim ng iba't ibang mga browser.
Ngunit! Ang parehong imahe na nilikha sa iba't ibang laki ng font ng 'Monospace' ay magkakaroon ng iba't ibang saturation ng kulay depende sa laki ng font.

Sa kasalukuyang bersyon ng Chrome/Mozilla/Safari browser inererekomenda ko na gumamit ng 2px Monospace font kapag gagawa ng BBCode.
Ito ay nasabi sa Aralin10.

Halimbawa:

░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██ Sukat=2pt

░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██ Sukat=2px

░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██ Sukat=1pt

░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██ Sukat=1px

Code:

Code:

[table]
[tr]
[td]
[font=Monospace][size=2pt][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=2pt[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=2px][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Sukat=2px[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=1pt][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Sukat=1pt[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=1px][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Sukat=1px[/b][/size][/center]
[/td]
[/tr]
[/table]

Aralin 11: "Advanced na Teknik sa Character Saving part I"

                                          THE BIGGEST NIGHTMARE                                          
SLEEPLESS NIGHTS & HOURS SPENT ON SQUEEZING THE CODE...
                                4K LIMIT                                

Ang character limit ay hindi kapansin-pansin isa mga disenyo ng signature para sa mga Member at Full Member, na may 4k character ay sapat na.

Ang bangungot ay nagsisimula sa pagdidisenyo ng signature para sa mga Senior, Hero and Legendary member 🙂
Suablit... hindi ito isang totoong bangungot - mas mukhang isang hamon  😎

Hayaan ninyo akong ibahagi sa iniyo ang ilang mga character saving na mga teknik na ginagamit ko upang labanan sa mga demonyo na may 4k na limitasyon  

Susubukan kong gumawa ng isang uri ng listahan upang madaling itong mabasa (sana).

Hint 1: Hindi mo kailangang isara ang bawat tag sa table column.

Hindi mo kailangang isara ang bawat tag sa table column. Maaari mo itong palitan ng isa pang tag.
Halimbawa, sa halip na isara ang tag ng kulay, maaari mo lamang baguhin ang kulay gamit ang bagong tag.

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[color=#7b2d2d]█[color=#382877]█[color=#3a6921]█
[/td]
[/tr]
[/table][/center]

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[/color][color=#7b2d2d]█[/color][color=#382877]█[/color][color=#3a6921]█[/color][/font][/size]
[/td]
[/tr]
[/table][/center]

Hint 2: Hindi mo kailangang isara ang anumang mga tag bago isara ang tag ng table column.

Hindi mo kailangang isara ang font, size etc. (kahit na anong) mga tag bago mo isara ang table column tag.

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█
[/td]
[/tr]
[/table][/center]

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=20px][color=#3a75bf]█[/color][/font][/size]
[/td]
[/tr]
[/table][/center]

Hint 3: Magtakda ng pangunahing kulay bilang nauna...

Habang ikaw ay gumagawa ng kahit ano sa BBCode - sa logo atbp. - subukan tukuyin ang kulay na ginagamit nang madalas at ilagay ang tag nito sa harap.
Kapag ang ibang element ay nangangailangan ng ibang kulay, baguhin ang kulay at isara ang bagong tag ng kulay sa dulo ng element na iyon.

Ang mga susunod na character ay papailalim sa kapangyarihan ng unang kulay  😉
Mas madaling ipakita ito halimbawa ^_^:

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=2px][color=#3a75bf]
█████████████████████████████████████
████████[color=#765aa2]█████████████████████[/color]████████
████████[color=#1d847f]█████████████████████[/color]████████
█████████████████████████████████████
[/td]
[/tr]
[/table][/center]

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=2px][color=#3a75bf]
█████████████████████████████████████
████████[color=#765aa2]█████████████████████[color=#3a75bf]████████
████████[color=#1d847f]█████████████████████[color=#3a75bf]████████
█████████████████████████████████████
[/td]
[/tr]
[/table][/center]

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=2px]
[color=#3a75bf]█████████████████████████████████████
[color=#3a75bf]████████[color=#765aa2]█████████████████████[color=#3a75bf]████████
[color=#3a75bf]████████[color=#1d847f]█████████████████████[color=#3a75bf]████████
[color=#3a75bf]█████████████████████████████████████
[/td]
[/tr]
[/table][/center]

Hint 4: Ilagay ang mga font face/font syle tag sa harap...

Kapag ikaw ay magtatakda ng font style at nais mong gamitin ito hanggang sa matapos ang table column, maglagay anumang mga styling tag sa harap.
Ngunit hindi bago mag URL at (kung) align (center/left/right) tag. Alam kong ito ay medyo kumplikado....

Kaya hayaan mo akong magbigay ng mga halimbawa  

Code:

[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][b][font=Arial][size=25px][color=#000]Ang halimbawang teksto.[/b]
At iba isa pang linya ng teksto.
[/td]
[/tr]
[/table][/center]

Ang nangyari: Isinara ko ang 'Bold' tag at hindi sinasadya sa 'bold' tag closure ay ang ibang mga tag na may range of 'bold' tag ay nagsarado.
Ngunit kung ilipat natin ang mga ito sa labas ng 'bold' tag range ay mapapanatil nila ang kanilang properties  😉

Code:

[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][font=Arial][size=25px][b][color=#000]Ang halimbawang teksto.[/b]
At iba isa pang linya ng teksto.
[/td]
[/tr]
[/table][/center]

Ang nangyari: Parehong bilang ng mga character gaya ng sa halimbawang 1 - magkaibang mga resulta.

Napakaraming pagsulata ang kailangan upang mabanggit ang lahat ng mga posibleng sitwasyon kung saan maaari mong gamitin ito sa iba't ibang paraan upang mai-save ang ilang mga character.

Pagtuunan natin ang pinakamahalagang bagay na dapat tandaan:

Sa pamamagitan ng pagsasara ng anumang tag sa loob ng table column, isinasara mo ang lahat ng mga tag sa loob ng saklaw ng nakasarang tag.

Code:

[center][table]
[tr]
[td]
[center][font=Arial][size=15px][b][url=https://bitcointalk.org]Iba pang advanced na halimbawa[/b]
[url=https://bitcointalk.org/index.php?topic=1727100.80]Ang pangalawang linya - At iba pang link ngunit parehas ng font face/sukat na hindi naka bold.
[/td]
[/tr]
[/table][/center]

Code:

[center][table]
[tr]
[td]
[center][b][url=https://bitcointalk.org][font=Arial][size=15px]Iba pang advanced na halimbawa[/url][/b]
[url=https://bitcointalk.org/index.php?topic=1727100.80][font=Arial][size=15px]Ang pangalawang linya - At iba pang link ngunit parehas ng font face/sukat na hindi naka bold.
[/td]
[/tr]
[/table][/center]

Code:

[center][table]
[tr]
[td]
[center][b][font=Arial][url=https://bitcointalk.org][color=#12d][size=15px]Iba pang  [color=#000]ADVANCED[/color] na halimbawa[/url]
[url=https://bitcointalk.org/index.php?topic=1727100.80][size=8px][color=#000]Ang pangalawang linya - [color=#12d]AT[/color] iba pang link ngunit parehong font face + bold
[/td]
[/tr]
[/table][/center]

Code:

[center][table]
[tr]
[td]
[center][url=https://bitcointalk.org][b][color=#12d][font=Arial][size=15px]Iba pang [color=#000]ADVANCED[color=#12d] na halimbawa[/url]
[url=https://bitcointalk.org/index.php?topic=1727100.80][b][font=Arial][size=8px][color=#000]Ang pangalawang linya - [color=#12d]AT[color=#000]  iba pang link ngunit parehong font face + bold
[/td]
[/tr]
[/table][/center]

Mahirap matukoy nang malinaw kung paano gamitin ang hanay ng mga closed tag para sa ating mga benepisyo - lahat ay nakasalalay sa disenyo at mga pangangailangan - sa iba't ibang mga sitwasyon, maaari nating gamitin ito sa iba't ibang mga paraan.

Hint 5: Pantayin ang mga tag, isara ang ibang mga tag...

Code:

[table]
[tr]
[td]
[color=blue][font=Verdana][size=16px]Test text example
[center]Test text example bottom
[/td]
[/tr]
[/table]

Hint 6: Palitan ang transparent na element ng white space...

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=10px]█████        █████
[/td]
[/tr]
[/table][/center]

Code:

[center][table]
[tr]
[td]
[font=Monospace][size=10px]█████[color=transparent]░░░░░░░░[/color]█████
[/td]
[/tr]
[/table][/center]

[Meowth05]

Tip at Trick(1): Ang signature character limit ng Forum ay 4000 na mga character ngunit binibilang ng software ng Forum ang mga white space at mga line break.

Kung tayo ay magsusulat ng 4000 na mga character sa isang linya, papayagan tayo ng forum software na gamitin ang eksaktong 4000 na mga character.
Ang code box sa ibaba ay naglalaman ng 4000 chars, maaari subukan ang signature char limit gamit ito:

Code:

1234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891230

[blockman]

Nice buti at may nagtranslate nito sa tagalog, naalala ko year 2016 nabasa ko yung post na tutorial na yan sa Meta gawa ni roslinpl at may katunayan pa na nagbigay ako ng positive rating sa kanya. Sa mga kababayan natin dyan na may passion sa designing at coding, pwedeng pwede niyo gawin ito lalo na in-demand parin ang mga signatures dito sa forum. Dahil papataas na yung market baka mas maraming mga campaign ang lumabas at maghanap ng mga signature designers/coders, madami mang kakumpetisyon pero walang masama sa pagta-try.

[Bttzed03]

Nabasa ko yung OP nung nakaraang mga linggo at laking tulong sa akin yung paggawa ng table para sa mga report ko sa reputation thread. Save ko na din ang thread link na ito para sa mga susunod na pag-aaral ko ng mga BBCode.

[asu]

Wow sobrang laki ng interest ko na gusto kong matuto ng mga code and yet, nakita ko itong tutorial nato, siguro I’ll be more busy sa kakabasa pati kaka try ng mga nandito. Thanks brother sa pag translate na din sa tagalog.

Thumbs Up 👍

[Meowth05]

Tip at Trick(2): Paano maiiwasan ang table bug/glitch

ANG TEKSTONG ITO AY DAPAT NA NASA PAREHONG LINYA

ANG TEKSTONG ITO AY DAPAT NA NASA PAREHONG LINYA

ANG TEKSTONG ITO AY DAPAT NA NASA PAREHONG LINYA

ANG TEKSTONG ITO AY DAPAT NA NASA PAREHONG LINYA

Ang table bug/glitch ay nangyayari lamang sa mga post, hindi mangyayari pagkatapos kopyahin at i-paste ang code sa signature ng profile.

Ngunit kung minsan kailangan nating gumawa ng magandang table sa isang post. Paano maiwasan ang table glitch / bug?
Alisin ang mga puting espasyo at palitan ang mga ito ng isang 'tuldok' na character at gawin itong 'tuldok' na transparent (o sa background na 'glow' kung mayroon).

ANG.TEKSTONG ITO.AY DAPAT.NA .NASA .PAREHONG ..LINYA

ANG.TEKSTONG ITO.AY DAPAT.NA .NASA .PAREHONG ..LINYA

ANG.TEKSTONG ITO.AY DAPAT.NA .NASA .PAREHONG ..LINYA

ANG.TEKSTONG ITO.AY DAPAT.NA .NASA .PAREHONG ..LINYA

Code:

[table]
[tr]
[td]
ANG[color=transparent].[/color]TEKSTONG ITO[color=transparent].[/color]AY DAPAT[color=transparent].[/color]NA [color=transparent].[/color]NASA [color=transparent].[/color]PAREHONG [color=transparent].[/color][color=transparent].[/color]LINYA
[/td]
[td]
ANG[color=transparent].[/color]TEKSTONG ITO[color=transparent].[/color]AY DAPAT[color=transparent].[/color]NA [color=transparent].[/color]NASA [color=transparent].[/color]PAREHONG [color=transparent].[/color][color=transparent].[/color]LINYA
[/td]
[/tr]
[/table]

[table]
[tr]
[td]
[glow=#000,1][color=#fff]ANG[color=#000].[/color]TEKSTONG ITO[color=#000].[/color]AY DAPAT[color=#000].[/color]NA [color=#000].[/color]NASA[color=#000].[/color]PAREHONG [color=#000].[/color][color=#000].[/color]LINYA
[/td]
[td]
[glow=#000,1][color=#fff]ANG[color=#000].[/color]TEKSTONG ITO[color=#000].[/color]AY DAPAT[color=#000].[/color]NA [color=#000].[/color]NASA[color=#000].[/color]PAREHONG [color=#000].[/color][color=#000].[/color]LINYA
[/td]
[/tr]
[/table]

[Roukawa]

salamat dito, ako self-taught lang. Mag quote ka lang ng isang ANN thread tapos paglaruan mo na lang sa draft..
ganun lang ginawa ko dati hanggang sa madami na din akong nagawang ANN threads at bounty threads..
edit edit lang..

[NavI_027]

I just want to say that your thread was very helpful. I admit na 'di ko pa ito nababasa ng buo pero having a glimpse of it makes me feel enlightened already . And naappreciate ko rin kung paano mo step by step ginawa ang tutorial mo plus tips. Asahan mo na isasama ko 'to sa watchlist ko para mapag aralan pag marami na akong free time.

Bump

I don't think bumping this thread is necessary kasi mabubump mo naman sya once na nag update ka. Nevertheless, good job kabayan .

[yazher]

Marami pa talaga akong hindi alam na mga codes pag dating sa paggawa ng mga thread dito sa forum, malaking tulong naman tong thread mo para hindi na kami mahihirapan mag hanap ng mga tutorials about BBCode sa google. sana ma update mo pa ito ng sa ganon marami kang matulungan na mga kababayan natin na nagnanais gumawa ng mga useful; thread na may dating.

[bitcoin31]

Marami pa talaga akong hindi alam na mga codes pag dating sa paggawa ng mga thread dito sa forum, malaking tulong naman tong thread mo para hindi na kami mahihirapan mag hanap ng mga tutorials about BBCode sa google. sana ma update mo pa ito ng sa ganon marami kang matulungan na mga kababayan natin na nagnanais gumawa ng mga useful; thread na may dating.

Medyo mahirap talaha pag codes ang pinag-uusapan ako kasi IT student at napag-aralan namin tungkol sa HTML kagaya lang sa paggawa ng Bbcodes pero yung iba hindi naturo sa min kaya nag-aarala pa rin ako and as of now itong mga ganitong klase ng thread ay malaking tulong lalo na sa kin na gusto madagdagan ang kaalamansa paggawa ng Bbcode lalo na doon sa wala talaganv knowledge.

[r1a2y3m4]

I just want to say that your thread was very helpful. I admit na 'di ko pa ito nababasa ng buo pero having a glimpse of it makes me feel enlightened already . And naappreciate ko rin kung paano mo step by step ginawa ang tutorial mo plus tips. Asahan mo na isasama ko 'to sa watchlist ko para mapag aralan pag marami na akong free time.

Bump

I don't think bumping this thread is necessary kasi mabubump mo naman sya once na nag update ka. Nevertheless, good job kabayan .

Actually it's good. I haven't seen this thread yet and sa tingin ko it's good para malaman din ng ibang Pinoy ang thread na to. At para na din malaman nila ang pagcocode din ditto sa forum and hindi lang naman ito yung site/forum na gumagamit ng BBcode.

[clickerz]

Actually it's good. I haven't seen this thread yet and sa tingin ko it's good para malaman din ng ibang Pinoy ang thread na to. At para na din malaman nila ang pagcocode din ditto sa forum and hindi lang naman ito yung site/forum na gumagamit ng BBcode.

Tama, meron na din ako nakita neto dati dito. Dagdag na kaalaman ito para na din may dagdag kita maliban sa signature campaign. Para sa ibang resources, maka makatulong.

Link :  https://bitcointalk.org/index.php?topic=1727100.0

[blockman]

Tama, meron na din ako nakita neto dati dito. Dagdag na kaalaman ito para na din may dagdag kita maliban sa signature campaign. Para sa ibang resources, maka makatulong.

Link :  https://bitcointalk.org/index.php?topic=1727100.0

Yan talaga ang naging source at tinranslate lang ni OP yung original na content ng thread na yan at may credit naman siya sa original post niya.

Orihinal na thread: [LEARN]BBCode Lessons & Tutorials [+tutorial videos'] ni roslinpl

[Meowth05]

Bump