Panduan Penulisan Achievement 4 By @heriadi Tugas : Penggunaan Markdown Bagi pendatang baru

in Newcomers' Community4 years ago (edited)

Achievement 4 : Applying Markdown


Postingan ini adalah terjemahan dari postingan @cryptokannon yang berjudul "Achievement 4 : Applying Markdown". Saya mendapat izin dari @cryptokannon melalui kolom komentar untuk menulis terjemahan postingan miliknya agar mudah di pahami oleh steemian indonesia dalam menyelesaikan tugas achievement 4


sumber


Tujuan menyelesaikan tugas ini agar pendatang baru :

  • Memiliki keterampilan dalam mengatur tata letak tulisan supaya lebih menarik.
  • Dapat menggunakan tata letak tulisan dengan templat tata letak penulisan yang diberikan.

Sebuah konten postingan harus diatur dengan baik dan menarik agar dapat dibaca dengan mudah sehingga tidak membosankan pembaca. Steemit mendukung pengaturan tata letak tulisan untuk mencapai hasil yang menarik, dengan menggunakan aturan penulisan /sintaks dasar dan perintah yang mudah diingat. selain itu juga Ada alat yang bisa Anda gunakan sebagai editor, seperti hackmd.io

Di bawah ini ada berapa atruran dasar atau bahasa perintah pemograman berupa kode dan html untuk membuat tulisan anda lebih menarik, yang dapat di terapkan kedalam postingan anda agar mendapatkan variasi dalam menulis sebuah konten yang akan anda bagikan. Hal Ini disusun oleh @katerinaramm dan postingan aslinya ada di sini

Judul

Judul dan sub-judul merupakan elemen yang sangat penting dalam suatu postingan karena judul mewakili dari isi dari postingan anda, untuk dapat menarik minat pembaca.

Ada dua cara untuk membuat judul.

  • Anda dapat menyisipkan simbol # di awal baris. Jika jumlah simbol hashtag # bertambah, maka ukuran tulisan judul akan semakin kecil.

Contoh penggunaan symbol # pada penulisan judul:

# Contoh H1
## Contoh H2
### Contoh H3
#### Contoh H4
##### Contoh H5
###### Contoh H6

Bentuk tulisan yang anda inginkan seperti di bawah ini

Contoh H1

Contoh H2

Contoh H3

Contoh H4

Contoh H5
Contoh H6


  • Untuk menulis judul, anda hanya menggunakan H1 Dan H2
    Sebagai pengganti tanda #, Anda juga dapat menulis judul dengan menambahkan (---) atau (===) di bawah Judul

Contoh
Contoh Judul H1
===

Contoh Judul H2
---

Bentuk Tulisan Yang Anda inginkan seperti dibawah ini

Contoh Judul H1

Contoh Judul H2



Untuk menempatkan judul berada di tengah, huruf miring dan huruf yang bergaris tengah (di coret) sebagai berikut:
Judul di tengah # <center> Contoh Judul di tengah </center>
Judul cetak miring # <i> Contoh Judul Miring </i>
Judul di coret # ~~Contoh Judul di coret~~
Bentuk Tulisan Yang Anda inginkan menjadi seperti di bawah ini :

Contoh Judul di tengah

Contoh Judul Miring

Contoh Judul di coret

Teks Tulisan

Untuk merapikan teks pada tulisan di postingan anda, ada beberapa bentuk yang dapat digunakan, sebagai berikut :

  • Rata Kiri kanan (justify)

<div class="text-justify">
Di jalan terlihat begitu sepi, hujan rintik-rintik mulai membasahi jalan sehingga pengguna jalan hanya berdiam diri di rumah. kemacetan terjadi mulai dari jembatan alue raya sampai simpang jalan elak karena air yang tergenang akibat hujan deras tadi di jalan lintas sumatra tepatnya di depan rumah sakit umum cut meutia.
</div>

Maka hasilnya akan terlihat seperti dibawah ini:

Di jalan terlihat begitu sepi, hujan rintik-rintik mulai membasahi jalan sehingga pengguna jalan hanya berdiam diri di rumah. kemacetan terjadi mulai dari jembatan alue raya sampai simpang jalan elak karena air yang tergenang akibat hujan deras tadi di jalan lintas sumatra tepatnya di depan rumah sakit umum cut meutia.
  • Meratakan teks menjadi dua kolom

Terkadang Anda mungkin perlu menulis sesuatu dalam dua bahasa atau memasukkannya ke dalam dua kolom berbeda, maka anda perlu menggunakan aturan penulisan sebagai berikut :

<div class="pull-right">
TULISAN KANAN Di jalan terlihat begitu sepi, hujan rintik-rintik mulai membasahi jalan sehingga pengguna jalan hanya berdiam diri di rumah. </div>
TULISAN KIRI Di jalan terlihat begitu sepi, hujan rintik-rintik mulai membasahi jalan sehingga pengguna jalan hanya berdiam diri di rumah.

Maka hasilnya akan terlihat seperti dibawah ini

TULISAN KANAN Di jalan terlihat begitu sepi, hujan rintik-rintik mulai membasahi jalan sehingga pengguna jalan hanya berdiam diri di rumah.
TULISAN KIRI Di jalan terlihat begitu sepi, hujan rintik-rintik mulai membasahi jalan sehingga pengguna jalan hanya berdiam diri di rumah.

Bagaimana cara menulis text di tengah


Anda dapat menulis perintah ini <center> menulis text di sini </center> untuk menyesuaikan text

Bagaimana cara menulis Huruf kecil di bawah (Subscript) atau diatas (Superscript) garis dasar pada text

  • Subscript
    Anda dapat menulis perintah ini <sub>Tulis text disini</sub> untuk membuat teks atau angka muncul di bawah garis dasar tulisan

Contoh
H<sub>2</sub>O maka akan terlihat H2O

Note : Anda juga dapat menggunakan subscript untuk menulis catatan di antara teks atau di bawah foto / video

  • Superscript
    Anda dapat menulis perintah ini <sup> agar text muncul diatas garis dasar Tulisan

Contoh
Panduan selanjutnya <sup> Klik di sini</sup>
maka akan terlihat seperti ini :
Panduan selanjutnya Klik di sini`

Note : Anda juga dapat menambahkan tautan yang dapat diklik

Contoh
Panduan selanjutnya <sup> Klik [di sini]( https://steemit.com/hive-172186/@cryptokannon/achievement-5-understanding-the-steem-tools)</sup>

Maka akan terlihat seperti ini :
Panduan selanjutnya Klik di sini

Links

Anda dapat menambahkan tautan di postingan, hal ini sangat berguna dan sering di gunakan secara berulang kali.

  1. Ketika anda ingin menambahkan nama pengguna steemit, dengan menggunakan @, nama tersebut menjadi tautan yang dapat diklik dan mengarah ke halaman blog steemit. misalnya @heriadi,
  2. Ketika anda menambahkan tautan,maka secara otomatis dikenali dan dapat diklik yaitu :
    https://steemit.com/@heriadi>>https://steemit.com/@heriadi
  3. Anda juga dapat menyembunyikan tautan dalam kata atau frasa, menggunakan perintah/sintaks di bawah ini
    Saya belajar mengenal steemit dari seorang [teman](https://steemit.com/@heriadi)
    Maka akan terlihat seperti ini : Saya belajar mengenal steemit dari seorang teman

Membuat Tabel

Anda dapat membuat tabel dengan dua cara

  • Cara mudah untul membuat table
    Salin dan tempel format table di bawah ini dan tambahkan judul tabel dan kolom sebanyak yang Anda butuhkan

Header 1 | Header 2
--------- | ----------
Cell 1 | Cell 2
Cell 3 | Cell 4

Maka akan terlihat seperti dibawah ini

Header 1Header 2
Cell 1Cell 2
Cell 3Cell 4


  • Membuat tabel dengan menggunakan html

Tabel HTML didefinisikan dengan tag<table>.

Setiap baris tabel didefinisikan dengan tag <tr>. Header tabel ditentukan dengan tag<th>. Secara default, judul tabel dicetak tebal dan di tengah. Data tabel / sel didefinisikan dengan tag <td>. sumber

<table style="width:100%">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>

Maka hasilnya akan terlihat seperti ini:

Header 1 Header 2
cell 1 cell 2
cell 3 cell 4

Note :

  • Anda dapat menambahkan sel dengan menambahkan <td> dan di akhir </td> serta perintah/sintaks di antaranya
  • Anda dapat menambahkan baris ekstra dengan menambahkan <tr> dan di akhir </tr>
  • Jika Anda ingin menambahkan link sebaris, Anda dapat menggunakan <a href="link"> judul </a>
  • Jika Anda ingin menggunakan gambar sebaris, pastikan gambar tersebut memiliki ukuran dimensi yang benar dan sesuai, sehingga dapat terlihat rapi.
  • Anda dapat menggunakan perintah dalam baris seperti center, headline, dll

Kode

Menambahkan Kode dalam sebuah posting terkadang diperlukan, Hal ini akan terlihat dua cara seperti di bawah ini:

a. Menambahkan satu tanda centang balik ( ' ) sebelum dan satu setelah sintaks aturan tata letak penulisan

Contoh
**menggunakan sintaks tebal** maka terlihat hasilnya menjadi >> menggunakan sintaks tebal

b. Anda bisa menggunakan <code> sebelum dan sesudah perintah </code> di akhir kata/kalimat

Contoh
<code> *hello* </code> maka akan terlihat hasilnya menjadi >> hello `

Anda dapat membaca info lebih lanjut di sini

Menulis Kutipan - Blockquotes

Jika anda ingin menulis suatu kutipan, frasa yang diucapkan atau ditulis seseorang ke dalam postingan. Anda dapat menggunakan (>) di depan kalimat kutipan

Blockquotes dengan > untuk menulis text atau sesuatu yang telah ditulis / dikatakan seseorang

Contoh
> “Setiap orang bodoh bisa tahu. Intinya adalah untuk memahami. "
― Albert Einstein
Maka dapat hasilnya dilihat seperti di bawah ini:

“Setiap orang bodoh bisa tahu. Intinya adalah untuk memahami. "
― Albert Einstein

Line Break

Jika anda membutuhkan jeda baris tambahan di antara teks. Dapat menggunakan kode <br> untuk memasukkan spasi baris ekstra

Video

Anda dapat memasukkan video atau gambar bergerak (.gif) jika anda membutuhkannya dalam sebuah postingan anda dengan cara sebagai berikut:

  • Video YouTube dapat langsung disematkan, jika Anda setelah meletakkan tautan, kemudian muncul dalam teks. Jika dengan cara apa pun itu mengganggu teks atau gambar, Anda dapat membuat garis sebelum dan sesudahnya.

Gif juga dapat disematkan, cukup letakkan tautannya dan Anda bahkan dapat memusatkannya dengan perintah
<center>https://cdn.steemitimages.com/DQmdwtzdkyXkY9qVY16WWmKkJKo2XSKF3tfRqEb2eZZVVFr/20210327_203518.gif</center>



Note : anda dapat menempel tautan yang di akhiri .gif

Anda juga dapat menyematkan video DTube ke dalam postingan akan tetapi membutuhkan l waktu yang lama dari pada menyematkan video YouTube

Cara Pertama

Mengupload video di dtube, maka secara otomatis video tersebut tertanam di postingan steemit Anda. hal ini akan menunjukkan tautan ke video youtube dan ke tangkapan layar.

Misalnya:
https://steemit.com/music/@thetroublenotes/ap0ofmc6

Tautan ini yang akan anda butuhkan + gunakan ( Tautan DTube dan tangkapan layar yang akan di gunakan)

Jika Anda sudah mendapatkan Tautan DTube dan tangkapan layar yang di maksud di atas, Anda dapat mengupload video menggunakan kode ini:

<center><a href='https://d.tube/#!/v/thetroublenotes/ap0ofmc6'><img src='https://ipfs.io/ipfs/QmNnrP6KnhTHqFAfwt8CnB6XeRHfMZ5Qj2ngyT7dgt2UwP'></a></center>



Cara kedua

Jika Anda tidak memiliki tautan steemit tempat video dtube itu berada, tetapi Anda memiliki tautan dtube


Anda klik kanan pada video dan klik 'simpan snapshot' Setelah Anda memilih folder, Anda dapatmengunggahnya sebagai foto biasa di steemit dan Anda memasukkan kode berikut (mirip seperti di atas)

<center><a href='https://d.tube/#!/v/thetroublenotes/ap0ofmc6'><img src='https://cdn.steemitimages.com/DQmYc7f5HaZhZC1tnofBByafrCrq7dC2x4CbjskYkJvWguC/QmdkNq6R6yvrxN6kvQDVnCHqqqHyoWHtbzysNGdVyitLob.jpg'></a></center>

Maka hasilnya menjadi seperti berikut :

Penggaris

Jika Anda ingin memisahkan tema, Anda dapat mengunggah penggaris atau Anda dapat menggunakan di awal garis 3 tanda hubung, 3 bintang atau 3 tanda yang sama

--- atau *** atau ===


Gambar

Cara Mengatur tata letak gambar

Anda dapat mengatur posisi gambar Anda di tengah, di sisi kiri atau sisi kanan

Rata Kiri

<div class="pull-left">
https://cdn.steemitimages.com/DQmb2ks3BafU3zRYneAa411bD3NEnPHZ6j9XHWno4snnGqU/20210321_130734%20.jpeg
</div>
text below

Ini adalah hasil yang di dapat dari sintaks di atas. Jika Anda meratakan gambar ke kiri, maka secara otomatis teks akan mengarah ke kanan, hal ini juga akan mengurangi dimensi gambar sebesar 1/2 Lebih banyak teks bisa masuk ke sini

Rata Kanan

<div class="pull-right">
https://cdn.steemitimages.com/DQmb2ks3BafU3zRYneAa411bD3NEnPHZ6j9XHWno4snnGqU/20210321_130734%20.jpeg
</div>
text below

Ini adalah hasil yang di dapat dari sintaks di atas. Jika Anda meratakan gambar ke kanan, maka secara otomatis teks akan mengarah ke kiri, hal ini juga akan mengurangi dimensi gambar sebesar 1/2 Lebih banyak teks bisa masuk ke sini


Posisi Tengah

<center>https://cdn.steemitimages.com/DQmb2ks3BafU3zRYneAa411bD3NEnPHZ6j9XHWno4snnGqU/20210321_130734%20.jpeg</center>


Ini adalah Hasil dari perataan tengah, dimensi gambar tidak berubah


Cara sederhana dan elegan untuk menyisipkan tautan + keterangan di bawah gambar yang disejajarkan

(dengan bantuan @mobbs & @noble-noah)

<div class="pull-left"><center>https://cdn.steemitimages.com/DQmb2ks3BafU3zRYneAa411bD3NEnPHZ6j9XHWno4snnGqU/20210321_130734%20.jpeg<sub><a href="https://www.steemit.com">LINK NAME</a></sub></center></div>

Hasilnya akn seperti berikut

beberapa teks dapat ditulis disini

dan masih banyak lagi


cara membuat gambar anda dapat diklik (untuk membuka versi baru yang lebih besar dari gambar anda)

Langkah 1 : Anda mengunggah kedua gambar (yang dimensi besar + kecil)

![244.jpg](https://cdn.steemitimages.com/DQmYHaS3cTTweaGZNvyeLksCjZ1oXHE3uc7ziBDeBLWBs2P/244.jpg)

![500500.jpg](https://cdn.steemitimages.com/DQmXMrYxPPVCRN4SMyHzd3KFrNjmzdURQnLoh6yoscrN8Fx/500500.jpg)

Langkah 2 : Anda menghapus ! [teks] (dan tanda kurung )
Langkah 3 : Anda menambahkan kode berikut:

<center><a href="https://cdn.steemitimages.com/DQmXMrYxPPVCRN4SMyHzd3KFrNjmzdURQnLoh6yoscrN8Fx/500500.jpg"><img src="https://cdn.steemitimages.com/DQmYHaS3cTTweaGZNvyeLksCjZ1oXHE3uc7ziBDeBLWBs2P/244.jpg"></a></center>


Hasilnya akan menjadi seperti dibawah ini


Cara memperkecil ukuran gambar di steemit

Sebaiknya anda merubah ukuran gambar sebelum anda mengunggah di steemit, mungkin anda lupa merubah ukuran gambar dengan berbagai alasan. Namun setelah anda mengunggah di steemit, anda juga masih dapat mengubah ukuran gambar di steemit. langkah langkahnya sebagai berikut:

Langkah 1 : Unggah gambar anda di steemit

Kode akan terlihat seperti ini
![20210321_130734 .jpeg](https://cdn.steemitimages.com/DQmb2ks3BafU3zRYneAa411bD3NEnPHZ6j9XHWno4snnGqU/20210321_130734%20.jpeg)

Langkah 2 : Anda Menghapus ![20210321_130734 .jpeg] dan tanda kurung ( )

https://cdn.steemitimages.com/DQmb2ks3BafU3zRYneAa411bD3NEnPHZ6j9XHWno4snnGqU/20210321_130734%20.jpeg

Langkah 3 : anda mengcopy https://steemitimages.comdan masukkan /0x0/maka akan menjadi seperti ini https://steemitimages.com/0x0/

Langkah 4 : Menempel link pada langkah 3 di awal link foto yang sudah anda unggah, maka akan terlihat seperti ini

https://steemitimages.com/0x0/https://cdn.steemitimages.com/DQmb2ks3BafU3zRYneAa411bD3NEnPHZ6j9XHWno4snnGqU/20210321_130734%20.jpeg

Langkah 5 : Anda telah siap mengurangi resolusi gambar, Masukkan jumlah piksel yang Anda inginkan di angka 0 pertama atau kedua. maka akan menghasilkan gambar yang diperkecil dalam dimensi yang diinginkan.

Contoh

https://cdn.steemitimages.com/DQmb2ks3BafU3zRYneAa411bD3NEnPHZ6j9XHWno4snnGqU/20210321_130734%20.jpeg



Gambar ini memiliki resolusi 1280 x 762



Gambar ini memiliki tinggi 600



Gambar ini memiliki lebar 100


Note : Hak cipta sangat penting dalam mengambil gambar. Jika Anda tidak yakin tentang gambar mana yang akan digunakan dan bagaimana menemukan yang terbaik, klik di sini

Bonus

Jika anda melihat sesuatu di postingan dan anda pun bertanya-tanya. Bagaimana kreator membuatnya? Anda dapat melihat semua kode di setiap posting steemit, dengan cara merubah url dengan mengganti (it) dengan (d).

Sebagai contoh perhatikan url berikut:

Url di steemit :
https://steemit.com/steemit/@katerinaramm/make-the-most-out-of-steemit-a-personal-approach-by-katerinaramm

Setelah di ubah menjadi :
https://steemd.com/steemit/@katerinaramm/make-the-most-out-of-steemit-a-personal-approach-by-katerinaramm

Setelah di ubah (it) dengan (d) anda dapat melihat seperti gambar berikut

Anda dapat mengklik tiga titik untuk membuka keseluruhan teks dan melihat kodenya


Penambahan oleh @mathowl (terima kasih!)

Jika Anda melihat beberapa jenis tata letak dalam sebuah posting dan tidak tahu bagaimana menirunya maka Anda cukup mengakses sumber halaman web di browser Anda (klik kanan mouse pada halaman web -> lihat sumber halaman atau periksa elemen) dan salin tempel apa yang Anda butuhkan :)

Bonus Ekstra dari Penggunaan Aturan Tata letak posting:

Lihat posting ini pada aturan tata letak yang dapat Anda gunakan untuk posting Anda tentang musik, puisi, fotografi, resep dan cerita fiksi dalam penggunaan aturan tata letak

Tugas untuk Pencapaian 4 : Menerapkan Aturan dalam Penulisan

Buatlah postingan dengan menerapkan paling sedikit 5 bentuk dari aturan penulisan yang telah di sediakan pada bagian atas posting ini.

Judul postingan Anda "Achievement 4 by @namaakunanda Task : Applying Markdowns"

Harap cantumkan tag #achievement4 #tugas4 dan #indonesia sebagai tag wajib untuk tugas pencapaian ini

Kami tunggu posting tugas pencapaian anda.

Sort:  
 3 years ago 

Terimakasih bg @heriadi atas postingan ini. Saya telah menyelesaikan postingan Achievement 4 saya. Mohon segera di verifikasi. Berikut link Postingan nya

https://steemit.com/hive-172186/@topikhdy/achievement-4-by-topikhdy-task-applying-markdowns

Terimakasih

 4 years ago 

Thank you for helping us translated this achievement into bahasa.

 4 years ago 

Sangat membantu! 🙏😃
Kita harus memperlajari ini @snigami

 4 years ago 

Sangat bermanfaat

Terimakasih telah singgah

 4 years ago 

Sangat bermanfaat, izin saya adaptasi tulisannya bang.🙏

Silakan

 4 years ago 

Terima kasih telah menerjemahkan ini, sehingga dapat dipahami dengan mudah, salam hormat saya @sayaalan

Ini sama saja plagiat, mengambil postingan orang lain dalam bahasa Inggris, diubah ke bahasa Indonesia 😏

Kalau akun @cheetah dan @steemcleaner masih aktif, pasti di flag.

upss saya telah memiliki izin anda dapat baca mulai dari atas

boleh gitu aturannya ?

Kalau dulu sih tidak

 3 years ago (edited)

Terimakasih @heriadi dengan adanya postingan ini saya akhirnya dapat menyelesaikan tugas dari achievement 4 Achievement 4 by @auliazura07 Task : Applying Markdowns || 14 January 2022. Mohon bimbingan untuk kedepannya.

 2 years ago 

Sangat membantu sekali buat para stemians

Coin Marketplace

STEEM 0.18
TRX 0.18
JST 0.034
BTC 88157.98
ETH 3083.80
USDT 1.00
SBD 2.74