[KOMPLIT!] Cara Menata Tulisan Steemit Agar Terlihat Lebih Menarik

in #writing3 years ago (edited)


Disclaimer: Tulisan ini bukanlah tulisan original, melainkan saya rangkum dari beberapa tulisan-tulisan dari @steemitguide, @indonesia-trail, @abunagaya, @alanmirza, dan @alfarisi. Terima kasih sebelumnya saya ucapkan. Tujuan tulisan ini dibuat sebagai rangkuman tentang bagaimana menata tulisan agar terlihat lebih menarik menggunakan tag html.

Tulisan ini saya tujukan untuk stemian-stemian pemula yang belum tahu bagaimana menata tulisan agar terlihat menarik, dan sekaligus sebagai pengingat bagi stemian senior jikalau lupa tentang tata cara penulisan ini.

DAFTAR ISI:

  • Membuat huruf tebal (bold)
  • Membuat huruf miring (italic)
  • Membuat huruf tercoret (stretch)
  • Membuat kalimat kutipan (quote)
  • Membuat judul dan sub judul (heading)
  • Membuat huruf typewriter (script/code)
  • Membuat tulisan berpangkat dibawah/diatas (sub/sup)
  • Membuat garis pembatas paragraf (hr)
  • Membuat teks ber-link (text link)
  • Membuat daftar bullet & numbering
  • Membuat tabel (table)
  • Membuat teks/paragraf rata tengah/kiri/kanan/kiri-kanan (align text)
  • Membuat paragraf dua kolom (2 column paragraph)
  • Mengatur posisi gambar dalam paragraf
  • Membuat gambar di posisi kanan/kiri paragraf (align image)

Membuat teks tebal, miring, dan tercoret

Ada dua cara untuk membuat teks tebal dan miring, yaitu dengan menggunakan simbol bintang * dan garis bawah _. Kalian boleh pilih salah satu dari kedua simbol tersebut. Satu bintang/underline untuk teks miring, dan dua bintang/underline untuk teks tebal. Atau mengkolaborasikannya.

Kode:
Tebal: *Teks disini*
Miring: **Teks disini**
Tebal miring: ***Teks disini***

Hasilnya:
Ini contoh teks miring
Dan ini contoh teks tebal
Kalau digabung jadinya seperti ini.

Atau bisa juga dengan menggunakan markup <i> dan ditutup dengan </i> untuk italic, dan <b> untuk bold.

Contoh:
<i>Ini contoh teks miring</i>
<b>Dan ini contoh teks tebal</b>
<i><b>Kalau digabung jadinya seperti ini.</i></b>

Hasilnya akan sama seperti contoh diatas.

Dan untuk membuat teks tercoret cukup dengan menambah kode berikut diantara teks/kalimat.

Kode:
<del>Dua butir Milkita setara dengan segelas susu</del>

Hasilnya:
Dua butir Milkita setara dengan segelas susu

Membuat teks bergaris bawah

Untuk yang satu ini saya belum tahu caranya, saya sudah coba gunakan markup <u> untuk underline, seperti <u>teks disini</u>, tetapi steemit tidak menampilkan apa-apa.
Saya akan cari tahu lebih lanjut untuk cara membuat teks bergaris bawah ini.

Membuat kalimat kutipan

Ada dua cara dalam menulis kalimat kutipan, cara pertama dengan mengetik markup <blockquote> dan ditutup dengan </blockquote>. Namun untuk lebih mudahnya cukup dengan mengetik tanda > sebelum kalimat.

Contoh:
>"Kalau hidup sekadar hidup, babi di hutan pun hidup. Kalau bekerja sekadar bekerja, kera juga bekerja." **- Buya Hamka**

Hasilnya:

"Kalau hidup sekadar hidup, babi di hutan pun hidup. Kalau bekerja sekadar bekerja, kera juga bekerja." - Buya Hamka

Contoh diatas saya kombinasikan dengan teks tebal, kalian juga bisa kombinasikan dengan memasukan link sumber seperti berikut ini:

"Menurut Wikipedia, nama asli Buya Hamka adalah Prof. DR. H. Abdul Malik Karim Amrullah, sedangkan Hamka sendiri adalah nama pena yang disingkat dari nama panjangnya.

Membuat judul dan sub judul (Heading)

Cara pertama membuat Heading dan Sub heading dengan cara menambahkan markup <h1> sebelum judul dan ditutup dengan </h1>. Cara kedua dengan menggunakan simbol berikut:

Kode:
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Hasilnya:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Membuat teks untuk kode/script

Contohnya adalah seperti teks ini. Tetapi biasanya digunakan untuk penulisan kode/script, seperti berikut:

<div class="pull-right"><center>link gambar</center></div>

Nah bagaimana cara membuatnya? Cukup memasukan markup <code> sebelum teks yang dinginkan dan ditutup dengan </code>. Tetapi perlu diingat bahwa penggunaan <code> ”hanya berlaku untuk penulisan teks biasa saja.” Untuk membuat script/kode seperti contoh diatas bisa menggunakan simbol ( ` ) pada setiap markup. Baik itu tag pembuka maupun tag penutup.

Membuat tulisan berpangkat (sub/sup)

Untuk penulisan pangkat diatas, menggunakan markup <sup> dan ditutup dengan </sup>. Dan markup <sub></sub> untuk pangkat dibawah. *pangkat kok dibawah?

Contohnya:
RRQ O <sup>2</sup> Oxygen adalah tim terbaik MPL.
ELITE8 <sub>indo</sub> adalah salah satu tim Moba Analog!

Hasilnya:
RRQ O2 Oxygen adalah tim terbaik MPL.
ELITE8indo adalah salah satu tim Moba Analog!

Membuat garis pembatas

Membuat garis pembatas untuk memisahkan paragraf cukup dengan menambahkan markup <hr> atau dengan mengetik tanda strip - sebanyak tiga kali ---.

Kode:
<hr>
---

Hasilnya:



Membuat teks link

Contoh:
[Ahmad Naufal Mukhtar](http://www.anaufalm.com)

Hasilnya:
Ahmad Naufal Mukhtar

Membuat daftar bullet & numbering

Kode:
* steemit.com
* busy.org
* utopian.io

1. steemit.com
2. busy.org
3. utopian.io

Hasilnya:

  • steemit.com
  • busy.org
  • utopian.io
  1. steemit.com
  2. busy.org
  3. utopian.io

Membuat tabel

Kode:
NO | USERNAME | JABATAN
-|-|-
1 | @levycore | Curator Indonesia
2 | @aiqabrago | Curator Indonesia
3 | @jodipamungkas | Curator Gaming

Hasilnya:

NOAKUNJABATAN
1@levycoreCurator Indonesia
2@aiqabragoCurator Indonesia
3@jodipamungkasCurator Gaming

Membuat teks/paragraf rata tengah/kiri/kanan/kiri-kanan

Contoh:
<p><div class="text-center">
Ini hanya teks sampel, tidak usah dibaca sampai habis. Anda tidak akan mendapatkan apa-apa jika membaca teks ini. Lebih baik anda berhenti sekarang juga. Sudah, jangan diteruskan, tidak ada gunanya.
</div></p>

Hasilnya:

Ini hanya teks sampel, tidak usah dibaca sampai habis. Anda tidak akan mendapatkan apa-paa jika membaca teks ini. Lebih baik anda berhenti sekarang juga. Sudah, jangan diteruskan, tidak ada gunanya.

Bagaimana dengan rata kiri atau rata kanan? Kalian cukup mengganti text-center dengan text-right atau text-left.

Untuk membuat paragraf rata kiri-kanan, silakan diganti dengan kodetext-justify, contohnya sebagai berikut:


Ini hanya teks sampel, tidak usah dibaca sampai habis. Anda tidak akan mendapatkan apa-paa jika membaca teks ini. Lebih baik anda berhenti sekarang juga. Sudah, jangan diteruskan, tidak ada gunanya. Ini hanya teks sampel, tidak usah dibaca sampai habis. Anda tidak akan mendapatkan apa-paa jika membaca teks ini. Lebih baik anda berhenti sekarang juga. Sudah, jangan diteruskan, tidak ada gunanya.


Terima kasih @cicisw sudah menambahkan :)

Membuat paragraf dua kolom

Kode:
<p>
<div class=pull-left>
Paragraf 1
</div>

<div class=pull-right>
Paragraf 2
</div>
</p>

Contoh:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et sagittis ante. Nam interdum fermentum nisl id convallis. Etiam odio turpis, iaculis sit amet euismod a, faucibus quis felis.
Vivamus auctor, enim in malesuada dignissim, magna augue maximus lectus, ac ultrices orci tellus eget lectus. Proin condimentum arcu ipsum, id interdum quam pellentesque sit amet.





Mengatur posisi gambar dalam paragraf

Kode:*
<center>link-gambar</center>
<center>caption-gambar</center>

Contoh:


meme by @naufal

Untuk mengganti posisi gambar agar berada di kanan, ganti kode <center> dengan <right>, dan <left> untuk berada di posisi kiri.

Membuat gambar di posisi kanan/kiri paragraf

Kode:
<p>
<div class="pull-right">link-gambar<center>caption-gambar</center></div>
Teks paragraf disini
</p>

Contoh:

meme by @naufal
Ini hanya teks sampel, tidak usah dibaca sampai habis. Anda tidak akan mendapatkan apa-apa jika membaca teks ini. Lebih baik anda berhenti sekarang juga. Sudah, jangan diteruskan, tidak ada gunanya. Saya bilang tidak usah lanjut dibaca masih aja diteruskan. Sekali lagi saya katakan yaaa, please. Ini hanya teks sampel, tidak usah dibaca sampai habis. Anda tidak akan mendapatkan apa-apa jika membaca teks ini. Lebih baik anda berhenti sekarang juga. Sudah, jangan diteruskan, tidak ada gunanya. Saya bilang tidak usah lanjut dibaca masih aja diteruskan. Sekali lagi saya katakan yaaa, please. Sudahlah, tidak ada gunanya juga saya ketik ini panjang-panjang. Terserah anda sekarang mau apa, saya mau pindah ke sub judul berikutnya. Bhaay.

Demikian rangkuman saya mengenai bagaimana menata tulisan agar terlihat lebih menarik menggunakan tag html. Tujuan saya membuat dalam satu postingan semua kode-kode ini adalah sebagai rangkuman, dan untuk memudahkan para stemian agar tidak repot mencari cara-cara lain lagi yang mungkin di postingan lain tidak lengkap. Dan terima kasih sekali lagi kepada @steemitguide, @indonesia-trail, @abunagaya, @alanmirza, @alfarisi, dan juga kurator Indonesia @levycore, @aiqabrago, @jodipamungkas. Terima kasih sudah membaca sampai habis.

Silakan di bookmark. ^^ (Ctrl+D)

Salam.


Sort:  

Yang dicari cari ketemu juga. Dan saya rasa ne artikel guide paling lengkap yang pernah saya temui untuk steemit. Makasih ya @naufal .

Sama-sama, semoga berguna dan bermanfaat!

Postingan seperti ini sangat bermanfaat dan bisa membuat tulisan steemian semakin menarik. Saya saja sampai sekarang masih menulis apa adanya, belum paham dengan aturan seperti ini. Saya jadi teringat ketika dulu baru belajar menggunakan aplikasi pengolah kata "WordStar", saat computer masih hitam putih dan belum lahir operating System Microsoft Windows. Saat itu kalau mau menebalkan tulisan, membuatnya jadi miring ataupun tampilan lainnya harus menghapal banyak kode-kode. Mirip dengan cara yang ditulis di atas.

Terima kasih Mas @naufal yang sudah berbagi pengetahuan membuat format tulisan indah di Steemit. Salam kenal ya.

Saya sudah follow dan upvote akun Anda sebagai salam perkenalan. Kalau ada waktu, sempatkan mampir ke blog saya @jharyadi. Siapa tahu ada sesuatu yang bermanfaat buat Mas @naufal.

Salam pena kreatif

Wah terima kasih sudah mampir kang @jharyadi. Berarti sudah paham dong dengan kode-kode diatas, terus terang malah saya tidak tahu apa itu WordStar. Saya pertama kali pakai Office itu Office 1998 hahaha.

Salam kenal kang, sudah saya follow balik :D

Saya memakluminya kalau Mas @naufal belum mengenal aplikasi yang saya maksud, sebab generasi kita memang berbeda. Saya tergolong generasi masa lampau (past tense) sedangkan Mas Naufal anak muda generasi zaman now (present tense) ..he..he..he.....

Semoga semakin semangat menulisnya dengan berbagai ide kreatif lainnya.

Tapi generasi jaman old juga harus jaman now juga dong hehe

Siapp, terima kasih kang :D

Ilmu yang bermanfaat thanks mastah😤

Sama-sama, saya baru belajar juga

Tutorial yang sangat membantu, thank @naufal ya!!
Semoga kedepan semakin banyak yang buat tutorial stemit yang sangat bermanfaat untuk kita semua
Selamat berjuang bang!

Sama2, senang bisa bermanfaat untuk orang lain :)

Terima kasih ilmunya gan, sangat bermanfaat

Terima kasih kembali. Keep steem on!

Postingan ini wajib resteem. Sudah saya vote ya.

Terima kasih pak Dedi resteem dan upvotenya

Wah, makasih bg @naufal ud share, ilmu baru buat newbi nih :)

Sama2, jangan lupa di save ya

Terimakasih bg @naufal. Lengkap sekali penyampaiannya👍👍

Terima kasih kembali 😁

Terima kasih

Wah, kk gak tahu ini.
Makasih banyak Nouval. Sangat bermanfaat 😊

Sama2 kak, sukses selalu buat kakak

Kak, btw nama lon Naufal kak, bukan Nouval haha

Alah maaak...
Kakak bisa terjerat pencemaran nama baik ini.😂

Minta maaf

Hahaha typonya jangan disengaja kak

Terimakasih banyak. Tulisan saya selama ini masih tidak teratur. Cuma bingung mau diapain. :)

bermanfaat bangetttt niiiih😆 good idea😍

Terima kasih

Bagaimana kalau mau buat paragraf rapi kiri kanan? :)

Sudah bisa tinggal ganti justify saja ya. Terimakasih banyak :)

Nice. Terima kasih sudah menambahkan. Sudah saya tambahkan ke post ya. :)

waah keureen banget ni..makasih infonya.. top lah 👍

Sama2 bang Fadli, senang bisa berbagi hehe

tulisan yang sangat bermanfaat bang @naufal . mampir juga, jika berkenan. salam.

Saleum adun

Konkret dan rinci....
Enak dibaca panduannya

Sdh di vote ya 😀👍

Tks @naufal

Alhamdulillah, terima kasih bang

Keeereeenn... izin share. Tulisan ini sangat membantu kami para pemula. Cara menulis yang baik dan benar di steemit. Semoga ilmunya berkah.

Semoga, saling berbagi sesama pemula :D

Nah lho,koq Masi di baca? Udah cukup...cukuppp...saya bilang cukup koq masih belum berhenti baca ....hehe. Sudah di upvote jadi ga perlu gantung diri seperti di atas ya

Hahaha siapp, terima kasih sudah mampir

Bermanfaat :)

Terima kasih

Terima kasih, sangat bermanfaat bagi kami yang baru belajar Go-Blog.

Sama-sama, Go-Blog nya jangan di sambung ya bacanya hehe

Terima kasih, sangat bermanfaat postingannya @naufal

Terima kasih sudah mampir

Postingan yang sangat berguna bagi saya yang masih awam tentang steemit..terima kasih @naufal

Terima kasih kembali, senang bisa membantu :)

Izin resteem bg,
Nice post

Hajarrr, tengkyu

Ribuan terimakasih. Tutorial ini sangat berguna bagi saya yang masih pemula
Sekakli lagi terimakasih

Salam Kreatif

Sama-sama, salam kreatif!

Alhamdulillah ... nemu postingan ini. Sangat bermanfaat. Terima kasih.

Sama-sama, senang bisa membantu :)

Keren tulisannya bang naufal. Kemasterannya tidak di ragukan lagi. Terima kasih, benar-benar bermanfaat.

Aduhh jadi malu haha, resteem dek Nur. Kasi tau sama yang lain :D

Memang sudah rencana resteem bang tanpa di kasih aba-aba hahah

Mantav. Tengkyu dekku 😁

Wah ini sangat mendukung sekali untuk saya, apa lagi saya masih pemula di steemit, hehehe
Terimakasih @naufal

Siapp 😌

terimakasih atas ilmunya. semoga bermanfaat bagi steemit pemula seperti saya hehehe...
mohon bimbingannya juga. agar bisa juga berguna bagi oranglain khususnya bisa mempermudah pembaca agar lebih paham dan tertarik dengan apa yang saya tulis.
@naufal

Semoga, tetap semangat ya. Keep steem on!

udah di book mark... helpful

Thank you

mantap ilmunya, bg...

Thanks :)

Thanks ya atas semua panduannya. Sangat berguna bagi pemula. Tapi cara buat garis pembatas paragraph biar bisa beda warna gimana cara nya?

Sama2 :)

Beda warna gimana ya maksudnya?

Komen.png

yang ini bro...
gimana ya?

Ohh itu gambar .png :)

Ini link gambarnya.

ow pake gambar ya..
Komenn.png
trus biar ada I pake apa ya mas?

Kalau ada yang pengen kita tahu cara bikinnya di postingan orang, lihat aja postingan itu lewat steemd.com. Misalnya untuk postingan ini,
https://steemit.com/writing/@naufal/komplit-cara-menata-tulisan-steemit-agar-terlihat-lebih-menarik ganti steemit.com menjadi steemd.com. Sehingga menjadi:

https://steemd.com/writing/@naufal/komplit-cara-menata-tulisan-steemit-agar-terlihat-lebih-menarik :)

Oke terimakasih.. sangat bermanfaat..

Code:
[AHMAD](anaufalm.com) | [NAUFAL](anaufalm.com) | [MUKHTAR](anaufalm.com)

Hasil:
AHMAD | NAUFAL | MUKHTAR

Super duper lengkap ini bang tutorialnya..
Makasih bang ilmunya..
Lebih gampang diterapin 😊

Sudah di vote yaa, salam kenal bang..

Sangat bermanfaat brother @naufal

Jangan lupa di bookmark, kalau lupa nanti gampang liat lagi hehe

Siap bg....terima kasih.

Sangat bermanfaat buat para pemula.

Terima kasih penikmat sastra, semangat!!

👍keren Bang

Hi, thanks :)

Tulisan nya Sangat membantu kami!

Terima kasih, senang bisa membantu

Terimakasih, postingannya yang sangat membantu membuat penulisan lebih menarik.

Mantap bro, saling dukung...

Sangat membantu sekali. Terimakasih

Trimakasih infonya sangat membantu

Postingan ini Saya ponten 💯

mestinya pontennya 3 tahun lalu bang 🤣

Hahah iya watee droe neuh di KSI kamoe di NSC, hahahhah Kenangan jameun bang.

saya masih ada kenang2an dengan NSC 😀

😂😂👍

Bermanfaat sekali tulisa nya @naufal

Timakaci sugardeddy wkwkwkwk

Alhamdulillah terjawab sudah semuanya kak, tapi harus baca ulang lagi kak, biar makin paham. Terimakasih kak @naufal