pre tag
Pre Tag - Ada beberapa pertanyaan yang diajukan oleh +Fajri Andaviar seputar tag pre. Diantara pertanyaan yang diajukan adalah: Apa bedanya PRE dengan Blockquote? Mana yang lebih baik digunakan untuk menulis kode? Bagaimana Cara membuat kode warna-warni?saya suka menggunakan blockquote, bagaimana?

Pertanyaan2 itu nantinya akan coba saya jawab satu per satu, walaupun sudah saya tulis dikolom komentar. Akan tetapi sebelum itu, saya ajak sobat mengenal lebih jauh apa itu tag pre.

PRE artinya pre-formatted atau secara mudahnya, apabila teks ditulis dalam tag pre maka hasilnya akan sama dengan apa yang kita tulis, baik dalam jarak (white space, line break atau tab.

Apabila pada penulisan menggunakan mode HTML, kemudian membuat spasi yang jauh, maka hasilnya akan tetap seperti biasa. Berbeda dengan tag pre, spasi akan tetap.

Untuk lebih memahaminya coba sobat copy kode ini pada postingan (mode HTML). html

<pre>
ini     adalah contoh
  tag pre
    coba      tulis
      seperti
  ini di
blog sobat
</pre>

<p>
ini     adalah contoh
  tag pre
    coba      tulis
      seperti
  ini di
blog sobat
</pre>

kemudian lihat hasilnya pada mode Compose, maka akan ada perbedaan yang mencolok antara keduanya. Dengan menggunakan tag pre, spasi akan dipertahankan, berbeda dengan penggunaan tag p hasilnya akan lurus atau berjejer ke bawah.

pre dan blockquote


Banyak yang menggunakan blockquote untuk berbagi kode. Untuk menjawab pertanyaan "Mana yang lebih baik untuk berbagi kode? blockquote atau pre?" Sebelum melangkah pada jawaban, silahkan simak pengertian blockquote.

Blockquote adalah kutipan penting dan menonjol dari tulisan lainnya, agar tidak terlewatkan oleh pembaca. Contohnya ini.. sobat akan lebih tertarik pada paragraf ini, daripada di atasnya.

Kalau melihat pengertian blockquote, tentunya kurang pas untuk berbagi kode, secara bahasa pun sudah dimengeri blockquote merupakan 'blok kutipan'. Menurut saya sah2 saja menggunakan blockquote sebagai tempat kode.

Tapi kalau dibandingkan, lebih baik menggunakan tag pre daripada blockquote untuk kode. Berikut ini kelebihan tag pre dibanding blockquote :

1. Struktur HTML lebih mudah difahami, lihat gambar :

pre dan blockquote

Lihat yang saya tandai dengan garis merah, jelas mana pembuka dan penutup. Sobat akan melihat susunan otomatis apabila menulis kode menggunakan Notepad++ atau Macromedia DreamWeaver. Bandingkan dengan gambar dibawahnya yang menggunakan blockquote, rada susah untuk memahami struktur htmlnya.

2. Standar huruf menggunakan monospace.

Artinya, tanpa CSS pun tag pre akan mempunya hurup monospace, dimana hurup 'W' akan sama dengan huruf 's' atau lainnya dalam segi ukuran. lebih jelasnya baca disini.

3. Bisa disisipi SyntaxHighlighter (Kode warna warni).

Pewarnaan kode ini, bukan hanya mengejar nilai estetika (enak dilihat), tapi dengan pembedaan warna akan mudah memahami, mana JavaScript, mana CSS, mana HTML, mana tag pembuka, penutup, command, string, dll.

Mungkin masih banyak kelebihan lainnya, silahkan bisa sobat cari dan temukan.

Bagaimana Cara Menulis Kode dengan Tag PRE?

Untuk penulisan standar seperti ini

<pre>
isi kode
</pre>

apabila menggunakan syntaxhighlighter, ada beberapa tambahan seperti :

<pre><code>
isi kode
</code></pre>

atau

<pre lang="css">
isi kode
</code>

dan lain-lain

Apabila ingin menggunakan syntaxhighlighter, mana tutorialnya?

Di blog ini saya sudah share 2 SyntaxHighlighter berikut cara penulisannya, yaitu PRISM dan Highlihgt.js

Mana yang bagus antara keduanya?

Dua-duanya bagus, kalau kecepatan PRISM lebih cepat loadnya dibanding Highlight.js dari Software Maniac. Saya pribadi menggunakan Highlight.js supaya bisa digunakan pada kolom komentar.

Tag pre Details


1. Browser Support :
  • Netscape 2, 3, 4, 6, 7 dst
  • Chrome 1 dst
  • Firefox 1 dst
  • Internet Explorer 2, 3, 4, 5, 6 dst
  • Opera 3, 4, 5, 6, 7, 8 dst
  • Safari 1 dst
  • WebTV / MSNTV
  • AvantGo Palm OS
  • AvantGo Windows CE
  • HTML 3.2, 4.0
  • XHTML 1.0
  • XHTML Text Module, XHTML Legacy Module

2. Atribut
  • align (optional)
  • class (optional)
  • dir (optional)
  • id (optional)
  • lang (optional)
  • onclick (optional)
  • ondblclick (optional)
  • onkeydown (optional)
  • onkeypress (optional)
  • onkeyup (optional)
  • onmousedown (optional)
  • onmousemove (optional)
  • onmouseout (optional)
  • onmouseover (optional)
  • onmouseup (optional)
  • style (optional)
  • title (optional)

3. Contents:

Teks. Beberapa tag yang valid pada tag pre tag:
a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, u, var

4. Valid Context :

blockquote, body, button, center, dd, div, fieldset, form, iframe, li, noframes, noscript, object, td, th.

Selengkapnya : http://webdesign.about.com/od/htmltags/p/bltags_pre.htm

107 komentar

hohohohoo....dapat ilmu lagi dari sini untuk urusang coding, mudah dimengerti.
Saya setuju kalau menggunakan tag pre sebagai tempat penulisan code. Karena memang betul, syntax lebih jelas. Sedangkan blog-blog tutorial code yang masih menggunakan blockquote sebagai tempat penulisan code akan menyusahkan newbie yang langsung mengcopy code dari blog tsb....

Balas

wah.....sudah mulai keluar si mbak ini, udah tengah malam soalnya...cari misteri lagi ya :D

Balas

Kang ismet gila posting jam segini, haha, saya minta saran kang saya sudah buat template buat bagikan template blogger gratis, tapi apa ya kang alamat webnya kang ?, punten nya kang, ditingali heula templatenya nih -> zs2r.blogspot.com, bahasana amburadul wkwkkw :D

Balas

hehehe.. mana mungkin cari berita jam begini mas hasby serem.. http://3.bp.blogspot.com/-uO3WvWgH308/UhkBQq2I3_I/AAAAAAAAMPA/cKWV_xiQ7oU/s1600/6.gif

kang ismet@
saya malah bingung yang beginian, hehehe. oh ya kang, jadi kalau kita mau taruh link hidup di komentar gimana ya? kode awal dan kode akhir apa kang.. :)

Balas

Owh jadi kalau mw mmasukkan koding sbaiknya mnggunakan tag pre ya kang? Saya jadi lebih faham lagi dgn fungsi tag pre trsbt. trmkasih ilmunya kang.. salam.. :)

Balas

Dapet ilmu baru dari Kang Ismet, belajar lagi nih Kang
Tapi masih agak bingung, baca lagi deh biar lebih paham
Terima kasih Kang Ismet, salam sukses deh

Balas

Kang Ismet, Terimakasih Buanyak atas resep mujarabnya. Sekarang blog markazaqiqah.blogspot dot com sudah baikan, sekali lagi terimakasih.
Satu lagi ya Kang, saya lagi mempraktekan jurus "tag kondisional" punya Akang dengan sedikit modofikasi sehingga yang tampil di homepage adalah sidebar.
Dengan tujuan supaya pengunjung tidak repot, cukup sekali buka seluruh dagangan saya sudah terpapar di sana (maklum kang, saya ini sales kambing)
Yang saya tanyakan, apakah hal tersebut berpengaruh terhadap SEO friendly ya Kang.....

Balas

Belajar banyak lagi di sini Kang Ismet...terima kasih bagi-bagi ilmunya lagi

Balas

Walaupun blog sayah tidak posting tutorial blogger dan jarang membagikan code pada blockquote, tapi yang kayak gini mah harus faham.
Haturnuhun kang. ngartos ayena mah!

Balas

Makasih atas penjelasannya Kang, sekarang sy mngrti perbedaan antara tag pre dan blockquote

Balas

kalau mau memasukkan kode html kedalam tag pre, kode html nya mesti di escape dulu ya kang? biar valid :)

Balas

blog mbak leony ceyemmm penuh misteri.... :)

Balas

cantik tapi menyeramkan :D

Balas

betulsob, membagikan tutorial juga sebaiknya jangan seenaknya copas kode. harus diperhatikan juga cara penulisan kode yang benar

Balas

kebetulan malem blom ngantuk :) ko templatenya buatan mas sugeng?

Balas

sama2 sob.. iya itu lebih baik

Balas

ga uah bingung kang.. cuma bagaimana cara menulis kode pada postingan aja ko :)

Balas

mantap akhi.. sayangnya jauh beli kambing ke sana :)
menurut saya ga masalah, asal memudahkan search engine dan juga pengguna

Balas

sama2 pak ferry... semoga bermanfaat

Balas

sami2 kang her.. teu ngacung ari ngatosmah nya :)

Balas

sama2 sob... pasti faham lah :)

Balas

betul sob... nanti saya tambahkan di artikel.. makasih masukannya :-bd

Balas

Ngartos nu eta mah saalit... he. Mung ieu kang punten, aya nu bade ditaroskn di luar topik!
Pami Ngadamel label dina tubnail gambar nu di hompage sapertos blog ieu kumaha kang??
https://lh3.googleusercontent.com/-nvp51M8DtIM/UmXQHZWSodI/AAAAAAAACAk/jAqSBTO05TY/w315-h192-no/Tumbnail.png

Balas

wah artikelnya mantab nih kang ismet, bagus buat pemula seperti saya :D
- ngak dapet PERTAMAX! tapi sebelum banyak orang saya absen dulu ^_^
Daengrio :-d

Balas

mantab kang ismet! saya sudah tau susunan di tag pre :D
makasih udah share kangismet :-d

Balas

Ohh seperti itu Kang, Terima kasih kang, Kehormatan besar bisa masuknya nama saya dalam tutorial ini :)

Balas

iya kang sm2, pkoknya blog ini keren deh dan bermanfaat :)

Balas

mangga linggih kadieu kang http://blog.kangismet.net/2013/10/blacklist-banned-komentator-blogger.html?showComment=1382312536328#c2248593036911365752 atos we dugika loadna beres :)

Balas

dulu saya memang sempat pakai blockquote untuk share kode HTML
tapi setelah tau kalau pakai pre code ternyata lebih keliatan bagus, saya ubah deh
makasih infonya

Balas

kenapa milih blocquote karena tinggal masukin trus klik ...
kalau pre yaitu tadi kang ....
biarpun ada style prism saya tetep ogah hehe ... padahal saya sudah memasang'y

Balas

coba dimananya yang rumit? :)

Balas

hehe.. sama2 sob.. gara2 pertanyaannya jadi artikel ini :)

Balas

saya juga awal2 pake blockquote ko :)

Balas

tergantung selera kang.. tapi buat yang pro kaya kang rully, seharusnya udah pindah ke tag pre :)

Balas

Setelah saya mengerti mengenai pre dan SyntaxHighlighter, langsung saya aplikasikan pada blog saya kang :D : http://berilah.blogspot.com/2013/10/syntaxhighlighter-untuk-blog.html

Hampura, naro link :)

Balas

Maaf kang saya mengambil kode pre dari blog Kang Ismet, dengan View Page Source :)

Balas

iya kang, kadang saya menjumpai banyak blogger (sebut saja newbie) tapi memaksakan diri menulis tutorial tentang hal yg tidak dikuasai. Sehingga code yang dibagikan malah membuat blog jadi hancur, dikomeni malah bingung sendiri -_-
*curhat pernah jadi korban soalnya* :D
mohon maaf kalau kata-kata saya ada yg menyinggung hati pengunjung setia blog kang ismet

Balas

iya saya pake template mas sugeng dan saya re-design lagi supaya lebih menonjol gambarnya (postingan di home page)

Balas

oh iya lupa, mas sugeng kan sudah menginkan template "mas sugeng" dibagikan gratis, nih buktinya -> http://www.templateku.com/2013/09/mas-sugeng.html, maaf kang nyimpan link

Balas

Mas mau tanya, gimana caranya expand widget di tampilan yang baru blogger mas? susah betul..

Balas

PRE teh pere alias libur...sante brooo jangan mosting molo...xixixi
engke urang rek mosting syntax highlight, tungguan....versi nu edun punya...hieoheioheiohe

Balas

Waduh, sebelumnya sih belum paham banget tentang ini :D

Balas

Kali ini saya cuma melihat-lihat kodenya saja Kang sedikit mengerti dari penjelasan yang dijabarkan dari artikel diatas.

Balas

tampilan baru tidak ada expand widget yang di centang. sekarang menjadi panah kecil disamping kode. klik aja panah itu untuk mengexpand.

Balas

asa jarang nya, ieu ge 3 harian karak mosting :) sok we bebas kang ben bade mosting syntax, css, jquery indonesia tos merdeka wkwkwkkw :D

Balas

difahami aja.. gampang ko

Balas

heheh gampang ko.. silahkan difahami

Balas

kalau bisa yang didesain sendiri, jadi linknya mengarah ke blog kita

Balas

kang saya mau nanya,, Cara supaya kode yang di masukan di postingan tidak di tafsirkan melainkan menunjukan kode nya gmana ??
kayak gini : http:// prntscr.com/ 1yy3cy

Balas

Kang ismet bisa masukin Script saya ke Blog anda tidak ?
Nie Link nya
http://twinsx-script.blogspot.com/2013/10/html5-fullscreen-map.html

Balas

pake escaper atau encoder, contohnya disini http://blog.kangismet.net/2010/05/blogger-ad-code-converter-javascript.html coba tulis kode disana, kemudian Encode, baru paste ke blog pada mode HTML

Balas

Berhasil kang haturnuhun... :)

Balas

Kang ismet bisa masukin Script saya ke Blog anda tidak ? Nie Link nya http://twinsx-script.blogspot.com/2013/10/html5-fullscreen-map.html

maaf spam Kang
Bisi bade di lebeutkeun Script naa :)

Balas

saya harus fahami dulu cara kerjanya sob.. soalnya saya ga mau kebingungan dengan pertanyaan. saya pelajari dulu ya.. :)

Balas
Komentar ini telah dihapus oleh pengarang.

Kang kok navigasi halaman blog saya seperti ini ya, seperti tertutup itu http://fajriandaviar.blogspot.com/ , setelah saya ikuti tutorial yg ini http://blog.kangismet.net/2010/06/membuat-navigasi-halaman-page.html

-Maaf naro link-

Balas

boleh juga kang tapi saya lebih senang mengunakan blockquote karena lebih mudah digunakan kalau pakai pre saya malam pusing koding nya sudah berbeda ..

Balas

tutornya belum saya perbaiki

Balas

hehehe :) oh ya kang, bagaimana ya cara membuat iklan empat kolom dengan gambar 125x125 itu, ada tutorialnya kang?

Balas

alhamdulillah sekarang ane tidak hanya pengguna saja tapi minimal sedikit paham apa itu tagpre hehheh, haturnuhun kang, katampi pisan.........

Balas

pro-sotken meren kang hehe ..
tapi iya juga kang .. kalau difikir-fikir salah jurusan sih kode pake blockquote

Balas

ya itu tadi sob.. tergantung enjoynya pake apa :)

Balas

penambahan css dan script untuk syntax.. secara otomatis akan menambah loading, tp secara teknis menggunakan pre saja sudah lebih bagus dari blockquote, terima kasih pengenalannya akan sy pertimbangkan... soalnya betulinnya membutuhkan waktu
Tapi sepertinya ada yg kurang sm browser supportnya kang.. chrome ngak dimasukin? :) kalo mozila sama firefox apa bedanya? satu lagi itu link tautan PRISM dan Highlihgt.js kayanya sama dehhh... sy liat sebenarnya ada 2

Balas

terimakasih atas koreksinya sob.. saya akan perbaiki :-d untuk prism dan highlight perasaan ga terlalu berat, kalau yang alex gorbatchev iya berat banget.

Balas

Di antos atuh sok kang beben ..diantos mangga ..

Balas

kang apa sih syarat supaya template orang lain jadi milik sendiri ?, maksudnya : "design by nama blog sendiri", bukan "design by orang lain", menurut kang ismet apa lagi ya, yg harus diubah supaya template "Mas Sugeng" jadi milik saya sendiri, jadi "design by blog sendiri" ?, maaf kang -> http://free-btemplate.blogspot.com/

Balas

belajar lagi kang :D makasih nih :p

Balas

kok belum dijawab nih kang? pada kemana nih dukun tutorial?

Balas

supaya template orang lain jadi milik kita sendiri, hubungi pembuat template, tanya berapa dia jual creditnya...

Balas

perasaan udah banyak ko di gugel :) atau liat aja source kode saya :)

Balas

makasih kang infonya, emang hak cipta bisa dibeli kang ?, atau bisa dikasih uang terus template tst jdi milik sendiri ?

Balas

baca ini :
http://www.dte.web.id/2013/07/lisensi-atribusi-dan-hak-cipta.html

Balas

hihih, kalo di gugel sih semuanya berantakan dan tidak ada yang beres, makanya saya males mas. oke saya coba utak atik dulu source kodenya kang ismet dulu :)

Balas

sukses kang, sudah berhasil nih, :-bd mat bobo kang, besok jam 10 udah masuk kerja nih :)

Balas

Kode attribute nya banyak banget .... :D Harus di catet nih kang ... :D

Balas

kalau menurut saya pribadi penggunaan tag pree lebih baik dari pada blackquot pada penggunaan tag pree pembaca akan lebih mudah membedakan ataupun memahamisetiap element-element script yang dituliskan..

Maaf kang itu hanya pendapat saya saja mungkin orang lain berbeda... hatur kang terima kasih artikelnya cukup jelas...

Balas

tag pree, saya baru tahu tuh kang...makasih ilmunya ya kang....
punten nembe ngesot kang, biasa buka pake hape..blog kang ismet kok ga bisa buat koment di selular ya kang

Balas

teu jadi mostingna ah...hoream!!!

Balas

Makasih Ilmunya Kang Ismet, sangat membantu :)

Balas

Yang jelas, kalo untuk penempatan kode ya lebih bagus pake Pre, blockqoute itu bagusnya buat kutipan kata2 penting. hhe :)

Balas

Kang, Comment Balik dong? Dan beri Saran pada Postingan ane yang " Cara Membuat Google Friend Connect Valid HTML5 " - ini linknya http://mafiasitez.blogspot.com/2013/10/cara-membuat-followers-google-valid.html

Balas

ah moal aya nu komplen bade jadi bade henteu :P

Balas

Kang ?? Cara Membuat Komentar itu Ada di Title Bar gimana kang? Kaya punya akang tiap ada komentar baru , title bar langsung cek baru . .

Balas

dari DTE http://www.dte.web.id/2012/11/recent-comments-widget-for-blogger-with.html

Balas

iya kang.. saya juga masih blom ketemu caranya

Balas
Komentar ini telah dihapus oleh pengarang.

Tah ieu demo gambar na kang ...
http://4.bp.blogspot.com/-C2kGdNW-MUw/UmeczLYQJyI/AAAAAAAADrg/VATEyAFvdHU/s640/MAP.PNG
bilih bade di pasang mangga ku abdi di pasihan script sareng tutor na kang !

Balas

Request:Gmna cara membuat emoticon gitu mas tanpa terlihat... saya mencoba theard comment hack jadi eror... :D

- SALAM DAMAI -

Balas

Kang saya request tutorial donk kang, cara membuat pemberitahuan komentar yang ada dipojok atas blog ini, seperti screenshots berikut :

http://i.imgur.com/J0Pbdxf.png

Saya mohon dishare ya Kang :)

Balas

tambah display:none .comment_emo_list {
...
...
...
display:none
}

Balas

http://www.dte.web.id/2012/11/recent-comments-widget-for-blogger-with.html

Balas

ya . . .bisa posting versi kang ismet . . .soalnya di web asal sedikit rumit :)

Balas

nanti saya coba sob.. :)

Balas

ok . . .terima kasih sebelumnya . . sukses trus . . .salut :)

Balas

Duh ada sesuatu yg ingin di request .. tapi keliatan'y lagi agak sibuk nih s akang'y ... !! pendem z dulu ah hehe

Balas

sok we lah kang rully aya neon? :)

Balas

Masalah bikin recent post .. nanti saya kirim gambar'y kang!!!

Balas

function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<sp

Balas

saya selalu bingung membedakannya hahaha

Balas

Poskan Komentar


×
Chat