<center>http://mikemclin.net/mmwp/wp-content/uploads/2013/03/markdown-syntax-language.png
<sub>[Image Source](http://mikemclin.net/markdown-syntax-language/)</sub>
</center>
Mayron nang iilang mga gabay ukol sa Markdown dito sa Steemit (at sa iba pang mga lugar sa web) na nakatutulong ng higit sa mga tao. Pero bakit nag*popost* pa din ako ng isa? Ganito, alam naman nating aktibo lamang ang isang post sa Steemit sa loob ng 7 araw at and paghahanap ng mga *post* dito gamit ang *Search* ay medyo mahirap gamitin. Isa pa, hindi lahat ng tao ay natatandaan kung san nila nahanap ang gabay na nakita (o gumagamit ng *bookmark*) at hindi lahat ng tao ay pare-pareho ng sinusundang mga blog o nagre*resteem* ng parehong mga *post*. Medyo mahirap ding maghukay ng mga post sa *blog* ng isang Steemian.
Ang naging basehan ko ng gabay na ito ay kung paano ako gumagawa ng pansariling mga *post* habang gamit ang 2 pinagkunan ko ring mga gabay galing sa Streemian habang gamit ko ang pagi-schedule nila ng post (nilalayon ko ring gumawa ng *post* ukol sa paggamit nun na may pagsasalin sa Filipino):
- [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
- [Markdown Tutorial](https://www.markdowntutorial.com/)
Pinapaalala, na ang gabay na ito ay iikot lamang sa mga ginagamit kong mga *codes*.
***
# <center> Simulan natin sa *Headers*! </center> <h1>
Ang pagbibigay-diin sa ilang salita ay importante upang gawin kaaya-aya o kaakit-akit ang isang sinulat ng *blog*. Bakit? Ang pagbabasa ng isang bagay na gumagamit lamang ng iisang itsura ng mga letra ay mahihirapang iparating sa mga mambabasa kung aling salita ang bibigyan nila ng higit na importansya kaysa sa iba. Maari nilang masabi "Tungkol saan kaya tong pangungusap na ito? Masyado namang mahaba, hindi naman yata importante, hindi ko na lang babasahin'.
Ang mga *Header* ay nagmimistulang pagbati bago ka magsalita o magbigay ng talumpati. Isipin mo na lamang kung may isang di kilalang tao ang lalakad papunta sa harap ng isang klase at bigla na lang nagsimulang magturo - magdudulot ito ng pagkalito. Siguro yung iba maiisip na sya yung guro agad-agad, pero may ibang tao na kukuwestiyonin pa rin kung sino siya - baka nagpapanggap lang ([Katulad ng kuha sa YouTube](https://www.youtube.com/watch?v=wqks_R90ykI)). Panoorin:
<center> https://www.youtube.com/watch?v=wqks_R90ykI </center>
Ngayon, isipin mo na may isang guro na pumasok at tumayo sa tapat ng klase at nagpakilala "Ako nga pala ang inyong magiging guro". Mas magiging madali na para sa lahat, di ba?
Ang paggamit ng *Header* sa *Markdown* ay madali lamang. May 6 na sukat ng *header*, may bilang mula 1 hanggang 6, kung saan ang 1 ang pinakamalaki:
```
# Pwede Mong <h1>
## Idagdag Ang <h2>
### Mga Napili<h3>
#### Mong Salita <h4>
##### Sa Header <h5>
###### Gaya Nito <h6>
```
Siguraduhin lamang na may patlang pagkatapos ng mga <code>#</code> (hashes) at bago ang <h+#> (pansarang *header tag*).
Kung nais mong ilagay sa gitna ang *header* gawin lamang ito:
```
# <center> Your header goes here! </center> <h1>
```
Inuulit ko, siguraduhing tama ang paglalagay ng patlang dahil kung hindi ay masisira ang buong *code*.
***
# <center> Mga Linya at Paghahati </center> <h1>
Sa *markdown*, ang simpleng pagpindot ng "Enter" upang pumunta sa susunod na linya ay gagana sa lahat ng oras ngunit kung kinakailangan mo ng dagdag na puwang sa gitna ng iyong mga linya ay pwedeng gumamit ng *break code*:
```
<br>
```
O kaya naman kung nais mong maglagay ng espasyo sa gitna ng dalawang paksa or parte ng iyong *blog*, pwede kang magdagdag ng pahalang na guhit gamit ito:
```
***
```
Nakatutulong ito sa pagsasaayos ng iyong sulatin at paghihiwahiwalay ng mga ideya sa iyong naisulat. Hindi natin gusto ng magulo at makalat na *post* - mainam na ihiwalay ang dalawang bagay na magkaiba ng tinatalakay upang maiparating ng maayos ang mensahe sa mag nagbabasa.
***
# <center> Itsura ng Letra (Style)! </center> <h1>
Ang pagbabago ng itsura o estilo ng mga letra o pagleletra ay nagbibigay-diin din sa mga salita, dito nasasama ang paggamit ng mas makakapal na sulat o kaya ay nakatagilid o *italicized*, gayun na rin ang iba pang estilo at kombinasyon ng mga nasabing estilo:
```
**Maglagay ng dalawang asterisk o tala sa bawat dulo upang pakapalin ang sulat.**
*Ang paglalagay ng tag-isang astetisk naman ay gagawing italicized ang napagitnaan nito.*
*_Pwede ka ring gumamit ng pinagsamang asterisk at underscore/salungguhit gaya nito._*
~~Pwede mo ring guhitan sa gitna ang sulat gamit ang 2 tildes sa magkabilang dulo ng sulatin.~~
```
***
# <center> Mga Listahan and Blockquotes </center> <h1>
Ito ay nakatutulong ng malaki kung nagbibigay ka ng mga hakbang o naglilista ng mga bagay-bagay, gayon na rin kapag may sinabi kang mula sa ibang tao, website, o di kaya'y sarili (pero nailathala na sa ibang lugar). Upang maipaliwanag kung paano ito nagagamit, inilagay ko ang eksaktong gabay galing sa [Markdown Cheatsheets](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#lists).
```
1. First ordered list item
2. Another item
??* Unordered sub-list.
1. Actual numbers don't matter, just that it's a number
??1. Ordered sub-list
4. And another item.
???You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
???To have a line break without a paragraph, you will need to use two trailing spaces.??
???Note that this line is separate, but within the same paragraph.??
???(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)
* Unordered list can use asterisks
- Or minuses
+ Or pluses
```
Ang panuto sa itaas ay nagmula sa [Markdown Cheatsheets](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#lists).
Heto naman ang ginagamit ko sa paggawa ng mga listahan:
```
- Pwede kang maglagay ng gitling
- O haypen
- Kung anuman ang tawag mo dito
```
Yan lang ang gamit ko kapag gumagawa ako ng listahan, hindi masyadong maraming arte pero maraming gamit. Heto naman ang paggamit ng *blockquotes*:
```
> Kailangan mo lang ng *arrow* na nakaturo sa kanan.
> Pwede ka ring gumamit ng *blockquotes* nang tuluy-tuloy parang ganito.
>
> Maglalagay ka lamang ng *arrow* sa blankong pagitang ng dalawang talata.
>> Meron ding tinatawag ng *double blockquote*.
```
***
# <center> Hyperlink Naman! </center> <h1>
May iba't ibang paraan ng paglalagay ng *link* sa mga naisulat na *blog*. May mga paraan na mas kaaya-aya kaysa sa iba. Minsan pwede mo lang ilagay ang *URL* sa sulat at gagana na iyon, pero alam naman natin na hindi maganda tignan ang mga link dahil mahaba. Pwede namang maglagay ng iilang salitang pwedeng lagyan ng *link*. O kaya naman kung nais mo pang mapaganda, pwede ring lagyan ng litrato.
```
https://steemit.com/@deveerei - Magiging *hyperlink* ng kusa ang isang buong *URL*.
[https://steemit.com/@deveerei] - Kung hindi man maging kusang *clickable* ang isang *link* pwede kang magdagdag ng mga parisukat na *bracket* sa magkabilang-dulo ng *link* upang ito'y gumana.
[Deveerei's Steemit](https://steemit.com/@deveerei) - O kaya ay maglagay ng mga salitang lalagyan mo ng *link*.
[https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png](https://steemit.com/@deveerei) - Pupwede ka ring gumamit ng litrato na lalagyan mo ng link (ang litrato sa itaas ay peke lamang).
[<img src="https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png">](https://steemit.com/@deveerei) - Kung ayaw mang gumana ng unang *code*, pwede mo itong gawin (base sa *HTML* - mas gusto ko itong gamitin).
```
***
# <center> Paglalagay ng Litrato at Pag-aayos ng Posisyon Nito </center> <h1>
Ang mga litrato ang pinakanagbibigay buhay sa isang *blog entry* - ang lahat ay nagiging mas interesante dahil dito. Ngunit kung palpak naman ang pagkakaayos mo ng mga litrato ay hindi na ito maganda pang tingnan. Kaya dapat sundin mo ang mga ito:
- Itsura ng Litrato - Ang itsura ng litrato ay may sobrang laking impluwensiya sa paghikayat ng mga mambabasa, lalo na ang unang litrato sa iyong *blog* dahil ito ang lalabas sa pang-unang pahina ng Steemit. Magmimistulang itong pinakapambalita tulad ng sa dyaryo.
- Posisyon ng Litrato - Pwede silang ilagay sa gitna o di kaya ay ilagay sa pinakakanan o pinakakaliwa ng iyong *blog entry* o di kaya'y hayaan lang sa kaliwa (*default* walang *codes*).
- Laki ng mga Litrato - Ang pagpili ng laki ng litratong gagamit ay mahirap matutunan. Ang Steemit ay maaaring makita sa *mobile* or kaya sa *desktop* at ang dalawang ito ay iba ang itsura sa kauuan (mayron ding mangilan-ilang mga *apps* na halos iba rin ang itsura sa Steeemit). Lagi mong titignan kung tama ba para sa *blog* mo ang laki ng litratng gagamitin at kung magiging maayos ang pagkakaiba-iba ng sukat nito sa *mobile/desktop*.
Paano nga ba maglagay ng mga litrato sa iyong *blog post*? (Paunawa: ang gamit kong *URL* ng litrato ay peke lamang upang hindi ito gumana sa *post* na ito, pwede mong gamitin ang naturang *codes* at magdagdag ng gumaganang litrato sa pamamagitan ng paggawa ng sariling mong *post*). Gawin mo ito:
```
https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png - Ang simpleng paglalagay ng *URL* ng litrato ay gagana na agad.
 - Pwede ka ring maglagay ng pangalan sa litratong gagamitin sa pamamaginatan ng pagkulong ng pangalan sa pagitan ng parisukat na mga *bracket* at and *URL* naman ng litrato ay nasa loob ng mga *parenthesis*.
[https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png](https://steemit.com/@deveerei) - Pwede ka ring maglagay ng *link* patunong sa ibang lugar para sa litratong ginamit mo, gaya ng nasaad sa paksa kanina (Tignan lang sa itaas).
Maaari mo ring palitang ang posisyon ng iyong litrato sa pamamagitan ng mga ito:
<center>https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png</center>
Subukan mong maglagay ng *codes* na pang-*center* sa magkabilang dulo ng *URL* ng litrato mo.
<div class="pull-left">
https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png
</div>
<div class="pull-right">
https://steemitimages/this-is-a-fake-imageURL-for-deveerei.png
</div>
O kaya naman kung nais mong isingit ang litrato sa loob ng mga salitang at talata pwede mong gamitin ang mga *code* sa itaas. Kung hindi man sila gagana dagdagan na lang ng espasyo pagkatapos ng pambungad na *code* at bago ang pansarang *code*.
Kung gusto mo mang nasa dulong kaliwa o kanan ang litrato pero ayaw mong mapapaligiran ito ng mga salita/talaga, magdagdag lamang ng *break* bago o pagkatapos ng pambungad/pansarang *code*.
```
***
# <center> Mga Video </center> <h1>
Ang paglalagay ng mga video sa isang *post* ayaw pawang madali lamang, ilalagay mo lang ng diretso ang *URL* galing sa YouTube o di kaya ay gumamit ng *embed codes*. And *embed codes* ang gagagamitin sa halos lahat ng website, ang diretsong *URL* ay maaari lamang gumana kung mula sa YouTube and video. Ang DTube ay di ko pa nasusubukan pero ang nalaman ko ay litrato lamang ang ipapakita nila sa isang *post* kasama ang *link* papuntang DTube.
```
Halimbawa ng diretsong *URL* galing sa YouTube:
http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE
Halimbawa ng *embed code* galing sa YouTube:
<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg"
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
```
Mula sa: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
***
# <center> Mga Kahon ng Code at Pagtatala(*Tables*) </center> <h1>
Ang mga kahon ng *code* ay madali lamang gamitin at may iba't ibang maaaring paggamitan:
- Paglalagay ng mga *markdown* o *html* codes na hindi pinapagana sa *blog*.
- Pagkakamit ng iba't ibang itsura ng iyong *post* o sa ibang mga parte ng iyong *post*.
- Maaaring magamit sa paghihiwalay o pagsasama-sama ng mga konsepto or paksa.
```
Maglagay lamang ng *3 back ticks*: ``` bago at pagkatapos ng mga salitang nais ikulong sa kahon.
O kaya ay gumamit ng <code> na pambungad at </code> na pansara.
```
Ang mga sumusunod na panuto para sa pagtatala ay galing sa [Markdown Cheatsheets](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) (hindi na isinalin sa Filipino):
```
Colons can be used to align columns.
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the
raw Markdown line up prettily. You can also use inline Markdown.
Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
```
***
<center>https://cdn.css-tricks.com/wp-content/uploads/2016/01/choose-markdown.jpg
<sub>[Image Source](https://css-tricks.com/choosing-right-markdown-parser/)</sub></center>
Ang mga ginamit na litrato ay galing sa *web* - ang mga pinagkuhanan ay nakalagay na rin. Kinalulugod kong makita ang inyong mga mungkahi at suhestiyon sa paksang ito, kung maaari lamang ay mag-iwan ng kumento sa ibaba upang makapagsimula tayo ng mabungang diskusyon tungkol sa paksa.
[Click here to read the English version | Pindutin lamang ito upang basahin ang bersyon sa Ingles](https://steemit.com/tutorial/@deveerei/its-time-to-step-up-your-markdown-skills-1504894160-5784636).
# <center> Mabuhay! Maligayang Pagi-steem! </center> <h1>
***
# <center> Maraming Salamat! </center> <h1>
### <center> Thank you so much! </center> <h3>
<center>
[<img src="https://steemitimages.com/DQmSG94WtEUweh2VdWhNbXksR7B8sMCsVG3jv9Nyz1qHs7z/ava1st.png">](https://steemit.com/@deveerei)[<img src="https://steemitimages.com/DQmaB34JS6Dux6dDWTnxunAW4gnnFJ3RHJU9rZ3TQ5BMAUe/ava2nd2.png">](http://teespring.com/stores/devs)[<img src="https://steemitimages.com/DQmUo24BsEFthoudcKkH6KR3Ex7Qfs2F1KURp5K1qXGQb5j/ava2nd4.png">](https://steemit.com/steemgigs/@deveerei/put-your-best-footer-forward-steemgigs-for-steemgiggers)
</center>
<div class="pull-right">
https://steemitimages.com/DQmc7G4sqUwWABvNVyXfQ83vi6a75XHT5GY6MmHBPDFTNsK/finf2.png[<img src="https://steemitimages.com/DQmR2F5Hf5ruzoBFQjmK7LZQUgGuegZS2ZxpUMCpu3EQ9VC/Facebook_30px.png">](https://www.facebook.com/deveereiblog)[<img src="https://steemitimages.com/DQmXebbopRSA9xXx5js81cXJvaiZEx1VW6JBBvNnPYWPEEZ/Twitter_30px.png">](https://twitter.com/deveerei)[<img src="https://steemitimages.com/DQmd1iUQEHaMcUWiD4H4ZymBDXVQ9zEjp13imKoD2wro29o/WordPress_30px.png">](https://deveerei.wordpress.com/)[<img src="https://steemitimages.com/DQmVXSvKyisxeCYeFw8KbYu13knvJWMJR2EPjhkGrdqh9sL/DeviantART_30px.png">](http://deveerei.deviantart.com/)[<img src="https://steemitimages.com/DQmPoHzNcrU2jfH2Jb2CscSZtnDMfVX2hXd8p2wPkWG1y1C/Instagram_30px.png">](https://www.instagram.com/deveerei/)
https://steemitimages.com/DQmYrjAgxHF4Q5XX9MhPaVbJAZqst5iEj4Rhv4tuuiWZLry/4343523532322222.png
</div>
hiveblocks