Mengatur Format Tulisan "Markdown Style" Untuk Pemula

in #tutorial6 years ago

Sebenarnya menulis tentang markdown style ini sebelumnya telah ditulis oleh senior saya bang @naufal dengan judul postingan Membuat Tulisan Lebih Menarik, anda penasaran ! bisa baca disini. Namun dalam hal ini saya ingin menulis kembali hal ini dikarenakan ada sedikit tambahan dan perkembangan steemit yang begitu pesat, dimana kehadiran steemian baru di steemit membutuhkan guide agar apa yang mereka lakukan baik itu postingan mempunyai kualitas layak kurasi.

Terimakasih kepada #EFA Esteem For All atas kesempatan belajar dan ilmu yang diberikan. Setelah tiga hari belajar bersama mentor #EFA saya akhirnya bisa memperbaiki tulisan saya menjadi lebih baik, khususnya format penulisan. Bersyukur dengan apa yang sudah saya dapat disana. Postingan ini sebagai catatan untuk sendiri dan harapnnya ini juga dapat membantu permasalahan-permasahan yang dihadapi steemian.

Nah, penasaran kan! sebelumnya saya ingetin teman-teman nich, sebagai catatan agar jangan baca postingan ini setengah-setengah, karena apa yang ditulis disini sudah dapat dipertangung jawabkan, alias postingan dapat mengundang whale-whale ke postingan teman-teman. Maenarik bukan!

Tapi ingat jangan menulis karena mengharap reward dan sebagainya. tapi menulislah karena passion anda!

Bang @owner99 punya satu kata mutiara yang selalu saya ingat dan simpan, bahwa Kerja keras dan Usaha Tidak Akan Menghianati Hasil

g6i7ldrd1q.png

Markdown yang telah disusun, ada dua cara yaitu dengan menggunakan

simbol dan markup

g6i7ldrd1q.png

    • Membuat Heading dan Sub

Membuat Heading (Judul) dan Sub heading (Sub Judul) ada dua cara, tapi untuk postingan ini akan saya bahas dengan cara yang sering saya gunakan. Adapun caranya yaitu dengan menggunakan simbol berikut:

Markdown :

# khanza.aulia 1
## khanza.aulia 2
### khanza.aulia 3
#### khanza.aulia 4
##### khanza.aulia 5
###### khanza.aulia 6

Hasilnya :

khanza.aulia 1

khanza.aulia 2

khanza.aulia 3

khanza.aulia 4

khanza.aulia 5
khanza.aulia 6


    • Membuat Huruf Tebal, Miring, dan Tebal Miring

Untuk huruf tebal: **insert teks here**
Untuk huruf miring: *insert teks here*
Untuk huruf tebal miring: ***insert teks here***

Hasilnya:

insert teks here
insert teks here
insert teks here

Untuk teks panjangnya sama saja, silahkan ditulis teksnya diantara tanda bintang. Diawali tanda bintang dan ditutup tanda bintang.


    • Membuat Tanda Pangkat Diatas dan Dibawah

Nah untuk yang ini kita tidka menggunakan simbol lagi, tetapi mengunakan markup. Berikut markup untuk penulisan pangkat diatas dan pangkat dibawah.

  • Pangkat diatas menggunakan markup <sup> dan ditutup dengan </sup>
  • Pangkat dibawah menggunakan markup <sub> dan ditutup </sub>

Berikut contoh pemakaiannya:

Kebocoran H <sup>2</sup> S Sangat Berbahaya

Tanggal 17 <sub>th</sub> july, tahun 2018

Hasilnya :

Kebocoran H 2 S Sangat Berbahaya

Tanggal 17 th july, tahun 2018


    • Membuat Garis Pembatas

Untuk membuat garis pembatas untuk memisahkan paragraf satu dengan yang lainnya bisa mnggunakan simbol dan markup.

  • simbol - - -
  • markup <hr>

Hasilnya :



    • Membuat Bullet dan Numbering

Contoh Penggunaan :

* steemit.com
* google.com
* blocktrades.us
* bittrex.com

1. steemit.com
2. google.com
3. blocktrades.us
4. bittrex.com

Hasilnya :

  • steemit.com
  • google.com
  • blocktrades.us
  • bittrex.com

Untuk cara lain membuat bullet bisa menggunakan simbol ini -

- steemit.com

Hasilnya :

  • steemit.com

Hasil untuk numbering :

  1. steemit.com
  2. google.com
  3. blocktrades.us
  4. bittrex.com

    • Memasukkan (insert) Link

Untuk memasukkan sebuah link kepostingan anda bisa menggunakan simbol berikut :

[khanza.aulia](www.steemit.com/@khanza.aulia)

Hasilnya :

khanza.aulia


    • Memasukkan Tabel

Untuk contoh tabel dengan 3 kolom sebagai berikut :

| Nama Akun | Reputasi | No. Hp |
| -------- | -------- | -------- |
| @khanza.aulia | 56 | 1234567890 |
| @podanjr | 63 | 1234567890 |
| @owner99 | 59 | 1234567890 |

Hasilnya :

Nama Akun
Reputasi
No. Hp
@khanza.aulia
56
1234567890
@podanjr
63
1234567890
@owner99
59
1234567890

    • Membuat Tabel Bergambar

Untuk membuat tabel bergambar berikut contoh markup

<table>
<thead>
</thead>
<tbody>
<tr>
<td><img src="https://steemitimages.com/300x300/https://i.imgur.com/xXwrksM.jpg" alt=""></td>
<td><img src="https://steemitimages.com/200x200/https://i.imgur.com/xXwrksM.jpg" alt=""></td>
<td><img src="https://steemitimages.com/100x100/https://i.imgur.com/xXwrksM.jpg" alt=""></td>
</tr>
</tbody>
</table>

Agak bingung ya, saya juga sedikit bingung awal-awalnya.

Untuk markup sebelumnya anda telah menyediakan link atau alamat gambar yang akan dimasukkan jadi tabel bergambar. Ganti link pada ini https://i.imgur.com/xXwrksM.jpg dengan link anda sendiri. Pada kode markup ini juga kita bisa menyesuaikan ukuran gambar dengan merubah nilai pada 100x100/ sesuai dengan keinginan anda.

Note : Dengan merubah angka tersebut maka size gambar juga akan berubah

Hasilnya

credit picture by: @dunsky


    • Membuat Teks Alinea

Untuk membuat sebuat paragraf sesuai dengan KBBI tentunya kita harus membuat alinea, atau tulisan menjorok kedalam seidikit.

Berikut format markdownnya :

<div class="pull-left">
<img src="https://i.imgur.com/ZP36KMd.png" alt="">
</div>

text : khanza.aulia telah membuat sebuah postingan malam ini....

Berikut hasilnya :

text : khanza.aulia telah membuat sebuah postingan malam ini....


    • Membuat Teks Rata Kiri-Kanan

Untuk membuat teks rata Kiri-Kanan anda bisa menggunakan kode markup berikut :

<p><div class="text-justify">

teks : Setelah selesai membuat postingan ini khanza.aulia akan tidur dan esok akan melakukan rutinitas kembali sperti biasanya. Pada hari selasa akan ada banyak kegiatan menanti. Pekerjaan telah menunggu untuk dikerjakan.

Hasilnya :

teks : Setelah selesai membuat postingan ini khanza.aulia akan tidur dan esok akan melakukan rutinitas kembali seperti biasanya. Pada hari selasa akan ada banyak kegiatan menanti. Pekerjaan telah menunggu untuk dikerjakan.


    • Menulis Paragraf Kiri-Kanan

Untuk menulis Paragraft Kiri-Kanan kita dapat menggunakan markup berikut :

<p>
<div class=pull-left>
Paragraf 1 - Teks yang anda tulis
</div>
<div class=pull-right>
Paragraf 2 - Teks yang anda tulis
</div>
</p>

Hasilnya :

Setelah selesai membuat postingan ini @khanza.aulia akan tidur dan esok akan melakukan rutinitas kembali seperti biasanya. Pada hari selasa akan ada banyak kegiatan menanti. Pekerjaan telah menunggu untuk dikerjakan.

After finished making this post @khanza.aulia will sleep and tomorrow will do routine back as usual. On Tuesday there will be many activities waiting. Work is waiting to be done.


Note : Ganti teks yang anda tulis dengan teks postingan anda.


Demikian ulasan singkat saya tentang MARKDOWN STYLE yang di gunakan di www.steemit.com. untuk menggunakan kode tersebut sebelum anda melakukan submit sebuah postingan, perhatikan terlebih dahulu preview dari postingan. Kesalahan sedikit saja, tata letak tulisan postingan bisa amburadul.

Spesial Thanks untuk mentor-mentor EFA eSteem For All yang telah mensupport penulis hingga postingan ini selesai.

References :

@naufal - Bagaimana membuat Tulisan Lebih menarik

g6i7ldrd1q.png

Sort:  

Apa beda markup sama markdown hayoo..

‘Markdown’ itu bahasa sederhana dan simple, bukan bahasa resmi untuk web2. Hanya app tertentu yang bisa.

Sedangkan ‘markup’ ini adalah bahasa dasar untuk web.

Keduanyanya itu berhubungan tapi tidak sama. Mohon koreksi bang @naufal kalau salah. Gerogi kalau ditanya sama guru hehe

Dah diedit ya postnya haha 😂

Iya benar, semua kode² yang pake < > itu markup, markdown hanya bentuk simpel dari penulisan markup. Contoh untuk menulis huruf tebal, Tulisan:

Markup : <b>Tulisan</b>
Markdown: cukup ketik **Tulisan** aja 😂

Siap bang @naufal.. terimakasih banyak ya! sudah mau mampir dan sharing ilmunya hehe
banyak nich yang belum dishare ke kami kami... ditunggu untuk meetup nya.

sangat bermanfaat pak, ulasannya jelas... semakin indah postingan saat memiliki dan mengerti penggunaannya

terimakasih,, senang sekali senior steemit telah kembali bergabung. ditunggu bang @arizkycreative untuk tulisan tulisannya

Hi @khanza.aulia, I'm @checky ! While checking the mentions made in this post I found out that @podanjr doesn't exist on Steem. Maybe you made a typo ?

If you found this comment useful, consider upvoting it to help keep this bot running. You can see a list of all available commands by replying with !help.

thanks checky, i will check again!

@podanjr wkwkwkwk @podanrj

informasi yang sangat bermanfaat bg, sekrng saya jadi mengerti bagaimana cara penulisan yang benar

Terimakasih

Mantrap 👍👍👍. Next time kalau mau nge post, izin singgah kemari ya bang. Hehehehe
Regard,
@ekafao

siap, terimakasih bang @ekafao telah mengunjungi blog ini.. Salam EFA

sangat bermanfaat pak, ulasannya jelas... semakin indah postingan saat memiliki dan mengerti penggunaannya

sangat berguna bagi pemula @khanza.aulia

Terimakasih telah berkunjung bang @safrizal.mus . Semoga sukses selalu bang

Sangat membantu bagi saya yang masih awam. Terima kasih infonya.

sama-sama. thanks sudah berkunjung

Menarik postingan jitu #melawanlupa

Pak, mau tanya, saya udah coba pakai yg untuk rata kiri kanan tapi kenapa ga mau ya? udah nyoba enter, nyoba diketik manual, tp tetap ga bisa. apa ada yg salah? huhu

Terimakasih bang @abdifitri. Mudah-mudahan ini semua bermanfaat