Home
CSS
HTML

Cara Membuat Template Website dengan Notepad++

Cara Membuat Template Website dengan Notepad++

Belajar hal-hal baru memang menyenangkan sekaligus mengasyikkan apalagi hal yang kita pelajari itu erat kaitannya dengan hoby kita atau pun pekerjaan kita. Dalam hal ini admin tengah belajar pemrograman web yang mana sekiranya ilmu yang saya dapatkan dapat saya share ke teman-teman.

Suatu desain akan bernilai indah atau tidak maka semua itu tidak akan pernah lepas dari kreativitas dan imajinitas pembuat desain itu sendiri. Akan tetapi desain yang akan kita bahas kali ini ialah sebuah desain Halaman Website.

Sebuah Halaman Website memiliki desain dasar yang mana dengan desain dasar tersebut anda dapat memodifikasi agar menjadi lebih indah dan sedap dipandang mata akan tetapi tetap menyertakan komponen-komponen penting dari halaman website tersebut.

Tampilan Dasar Halaman Website

Sebelum mulai membuat website sebaiknya sobat mengetahui terlebih dahulu bagaimana tampilan dasar dari sebuah website. Berikut tampilan dasar sebuah halaman website.

Setelah mengetahui bagian-bagian dari halaman website maka selanjutnya kita perlu mempelajari pemrograman web yang mana akan kita bahas satu persatu di bawah ini. 

  1. Langkah Awal
    Buatlah sebuah kode HTML sederhana yang dibuat melalui Notepad dan Save dengan nama belakang "html". Jika anda keberatan, bisa kita pakai dengan Element sederhana dibawah ini:

    Save kode diatas dengan nama Project.html

<html>
<!-- bagian kepala -->
<head>
    <style>
        /* CSS di tag ini */
    </style> 
</head> 

<!-- bagian badan -->
<body> 
    <div id='wrapper'> 
        <!-- Nantinya akan dijadikan Judul blog -->
        <div class='bagian-kepala'>
            <h1>Judul BLOG</h1>
        </div>
  
        <!-- Tempat dimana posting anda akan muncul -->
        <div class='bagian-post'>
            <h3>Ini adalah Judul Posting anda</h3>
        </div> 

        Tulis artikel disini atau sebuah kalimat 

        <!-- Tempat dimana Widget anda berada -->
        <div class='bagian-widget'>
            <h2> Judul Widget </h2>
            Tulis kalimat disini atau kata-kata yang anda inginkan
        </div>
    </div> 

    <div style='clear:both'>
        <!-- BAGIAN BAWAH DARI INTI POST DAN WIDGET -->
        <!-- tambahkan elemen footer disini -->
        <!-- anda juga harus membuat element DIV terlebih dahulu –>
  
</body> 
<!-- end of Bagian badan –> 

</html>
  1. Berikan CSS pembentuk Tata Letak Sederhana.
    Coba anda preview dengan membuka melalui Browser, pasti tidak terbentuk bukan? untuk itu, anda diharuskan memberikan Properties Sederhana terlebih dahulu guna memberikan letak yang anda inginkan.

    Tata letak didasarkan pada css "float" dan juga "width" , serta dibatasi dengan "clear: both" didasar kedua element tersebut untuk meratakan bahwa element telah disamakan.
    Misalkan kita akan membuat tata letak seperti ini : 
KepalaBadanWidget
Maka CSS yang akan kita gunakan adalah seperti ini: 
#wrapper{
    width: 800px; /* lebar blog secara keseluruhan*/
    margin: auto; /* untuk membuat "CENTER" blog pada Browser */
}
.bagian-kepala{
    height: 200px;
}
.bagian-post{
    float: left; /* Gunakan untuk memposisikan Widget di kiri */
    width: 500px;
}
.bagian-widget{
    float: right; /* Gunakan untuk memposisikan Widget di Kanan */
    width: 200px;
}
  1. Preview, lalu EDIT!
    Lihatlah dahulu jadinya, kemudian Edit beberapa item, tambahkan beberapa tag sesuka kalian ;)

    Maksudnya apa? Anda diharapkan untuk menggandakan Project.html sebelum proses ke-4 untuk menghindari kesalahan template pada blog. Periksalah kembali sebelum melanjutkan langkah berikutnya!
  2. Berikan beberapa tag XML template Blog
    Karena blog menggunakan XML untuk template, kita harus merubah Tag HTML tersebut menjadi tag HTML.

    Perhatikan kode template berikut : 
<html>
<!-- bagian kepala -->
<head>
    <style>
        /*CSS HERE */ 
    </style>
</head>
<!-- bagian badan -->
<body>
    <div id='wrapper'>.....
Ganti kode bercetak miring dan tebal diatas dengan kode seperti ini: 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
    expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'
    xmlns:b='http://www.google.com/2005/gml/b'
    xmlns:data='http://www.google.com/2005/gml/data'
    xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[
        /* Insert CSS Here */
    ]]></b:skin>
</head>
Jangan lupa untuk memberikan CSS yang tadi kita tulis, sehingga menjadi seperti ini: 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
  expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
<b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

    <b:skin><![CDATA[
        /* Start CSS HERE */
        #wrapper{
            width: 800px; /* lebar blog secara keseluruhan */
            margin: auto; /* untuk membuat "CENTER" blog pada Browser*/
        }
        .bagian-kepala{
            height: 200px;
        }
        .bagian-post{
            float: left; /* Gunakan untuk memposisikan Widget di kiri */
            width: 500px;
        }
        .bagian-widget{
            float: right; /* Gunakan untuk memposisikan Widget di Kanan */
            width: 200px;
        }
        /* End CSS HERE */

    ]]></b:skin>

</head>

<!-- bagian badan -->
<body>
<div id='wrapper'>.....
  1. Memberi Blogger Tag
    Anda diharuskan untuk merubah Static Content dengan Dinamic Content yang telah disediakan oleh Blogger.

    Untuk lebih lengkapnya, silahkan pergi ke Link http://support.google.com/blogger/bin/answer.py?hl=en&answer=46888

    Cara ini dilakukan agar anda dapat lebih leluasa dalam mengedit dan mengatur dalam "Tata Letak". Selain itu, Dynamic Content juga berfungsi agar Post yang anda publikasi bisa Muncul pada Blog anda. Jika template tidak diberikan Blogger Tag, maka template akan Static, maksudnya ketika anda melakukan pengeditan pada template, post, ataupun widget anda, maka semua tidak akan berubah.
a. Tambahkan element Judul Blog.

Ganti kode yang berwarna biru dengan kode berikut : 
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>
b. Tambahkan element Post.

Ganti kode yang berwarna hijau diatas dengan kode berikut : 
<b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
c. Tambahkan element Widget.

Ganti kode yang berwarna merah dengan kode dibawah ini : 
<b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
    <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
Sehingga akan terlihat seperti ini : 
<body>
<div id='wrapper'>
    <!-- Nantinya akan dijadikan Judul blog -->
    <div class='bagian-kepala'>
        <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
            <b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
        </b:section>
    </div>

    <!-- Tempat dimana posting anda akan muncul -->
    <div class='bagian-post'>
        <b:section class='main' id='main' showaddelement='no'>
            <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
        </b:section>
    </div>

    <!-- Tempat dimana Widget anda berada -->
    <div class='bagian-widget'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
            <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
            <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
            <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
        </b:section>
    </div>

</div>

<div style='clear:both'>

</body>
  1. Save dan Upload
    Simpanlah proyek anda, dan kemudian anda coba penerapannya pada Blog anda. Sehingga anda dapat melihat hasilnya! hmmm, untuk refreshing coba anda minum teh anda dahulu, kemudian lanjut lagi ;)

    Anda harus backup template terlebih dahulu. Atau anda bisa membuat blog baru untuk bereksperiment.

  2. Sedikit Mengedit Kode CSS Kembali
    CSS itu sangatlah penting, kenapa ? karena css adalah bagian terpenting dalam suatu situs web. CSS ini sendiri yang mengatur tata-letak dari suatu Element yang berantakan menjadi elemen yang teratur dan nyaman untuk dilihat. Tidak hanya mengatur sebuah Elemen, CSS juga dapat mengatur Warna, Dekorasi, Bingkai(Border), hingga Gambar latar. Untuk kali ini, mari kita mulai mengedit sebagian CSS pada blog agar terlihat menarik ;)

    Mulailah mengedit text dan link yang terdapat di template tersebut: 
/* Body atau background tag */
body{
    background: #888;
    color: #eee;
    font: 12px calibri;
}

/* Link atau tautan */ 
a{color: orange;}
a:hover{color: red; }
a:visited{color: gray; }
a:active{ color:transparent;}

/* Penanggalan pada Posting */
.date-header{color: orange;}

/* Element Posting */
.date-outer{
    border: 1px solid gray; margin: 10px 5px; } /* pembungkus posting */
.post-title{
  font: 17px calibri; } /* judul entri */

/* Komentar */
#comments {
  background : #454545; color : white; } /* Pembungkus kotak Komentar */
Dan selebihnya anda kerjakan sendiri ya ;)

Final Kode

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE
  html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
  expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[

        /* Inti dari Element */
        #wrapper{
            width: 800px; /* lebar blog secara keseluruhan */
            margin: auto; /* untuk membuat "CENTER" blog pada Browser */
        }
        .bagian-kepala{
            height: 200px;
        }
        .bagian-post{
            float: left; /* Gunakan untuk memposisikan Widget di kiri */
            width: 500px;
        }
        .bagian-widget{
            float: right; /* Gunakan untuk memposisikan Widget di Kanan */
            width: 200px;
        }

        /* Body atau background tag */
        body{
            background: #888;
            color: #eee;
            font: 12px calibri;
        }

        /* Link atau tautan */
        a{color: orange;}
        a:hover{color: red;}
        a:visited{color: gray;}
        a:active{color:transparent;}

        /* Penanggalan pada Posting */
        .date-header{color: orange;}

        /* Element Posting */
        .date-outer{ border: 1px solid gray; margin: 10px 5px; } /* pembungkus posting */
        .post-title{font: 17px calibri; } /* judul entri */

        /* Komentar */
        #comments {background : #454545; color : white; } /* Pembungkus kotak Komentar */
    ]]></b:skin>

</head>
<body>
<div id='wrapper'>

    <!-- Nantinya akan dijadikan Judul blog -->
    <div class='bagian-kepala'>
        <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
            <b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
        </b:section>
    </div>

    <!-- Tempat dimana posting anda akan muncul -->
    <div class='bagian-post'>
        <b:section class='main' id='main' showaddelement='no'>
            <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
        </b:section>
    </div>

    <!-- Tempat dimana Widget anda berada -->
    <div class='bagian-widget'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
            <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
            <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
            <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
        </b:section>
    </div>
</div>

<div style='clear:both'>

<!-- BAGIAN BAWAH DARI INTI POST DAN WIDGET -->
<!-- tambahkan elemen footer disini -->
<!-- anda juga harus membuat element DIV terlebih dahulu -->
</body>
<!-- end of Bagian badan -->
</html>

Dan jika sobat pusing dengan pembahasan saya yang panjang dan berbelit-belit di atas sobat dapat mempelajari template dasar yang sudah saya buat di bawah ini. 

<html>
<!-- bagian kepala -->
<head>
    <title>Desain Website</title>
    <style>
        /* CSS */
        #wrapper{
            width: 800px; /* lebar blog secara keseluruhan */
            margin: auto; /* untuk membuat "CENTER" blog pada Browser */ 
        }

        .header{
            height: 100px;
            background-color:#ff0000;
            margin: 10px 10px 1px 10px;
            padding: 10px;
            border: 2px solid #000000;
        }
  
        .bagian-post{
            float: right; /* Gunakan untuk memposisikan Widget di kiri */
            width: 525px;
            height:400px;
            margin: 0 10px 1px 0;
            padding: 10px;
            background-color: #ffffff;
            border: 2px solid #000000;
        } 

        .bagian-widget{
            float: left; /* Gunakan untuk memposisikan Widget di Kanan */
            width: 205px;
            height:400px;
            margin: 0 1px 1px 10px;
            padding: 10px;
            background-color:#FFFF33;
            border: solid 2px #000000;
        } 

        .footer{
            width: 800x;
            background-color: #00FF00;
            margin: 0 10px 10px 10px;
            padding: 10px;
            text-align: center;
            border: 2px solid #000000;
        }

    </style>
</head>
  
<!-- bagian badan -->
<body bgcolor="#777">
<div id='wrapper'> 

<!-- bagian kepala -->
<div class='header'>
    <h1>Pemrograman Website</h1>
</div>
  
<!--Bagian Postingan-->
<div class='bagian-post'>
    <h3>Inilah Template Buatan Pertaman Saya</h3>
    <p>Ayo belajar pemrograman Web....!!! Ayo belajar
      pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar
      pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar
      pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar
      pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar
      pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar
      pemrograman Web....!!!</p>
</div> 

<!-- Bagian Widget-->
<div class='bagian-widget'>
    <h2>Menu Navigasi</h2>
    <ul type="square">
        <li><a href="tugas lab.html">Beranda</a></li>
        <li><a href="Halaman about me.html">About me</a></li>
        <li><a href="#">Contact me</a></li>
        <li><a href="#">Daftar isi</a></li>
        <li><a href="#">Buku Tamu</a></li>
    </ul>
</div>
  
<div style='clear:both'>

<!-- bagian footer-->
<div class='footer'>
    <p>Copyright 2013. Desain template by Juned al~Bughisy</p>
</div> 

</body> 

</html>

Hasilnya kurang lebih seperti gambar di bawah ini.

Demikian pembahasan kali ini mengenai desain website, dan jika anda merasa artikel ini bermanfaat silahkan di share akan tetapi jangan lupan untuk mencantumkan link sebagai sumbernya.
Terimakasih…!!!

57 comments

  1. thankiss infonya ini berguna bgt buat aku ngerjain tugas :D
    • Sama sama gan
  2. @juny ningsih siip gan... :)
  3. templatenya sangat simple,bagus banget buat yg lagi belajar buat template
    • mungkin agan bisa kembangkan template di atas agar menjadi template yang super wah :)
  4. bener-bener komplit ulasannya makasih ilmunya bos
    • Sama-sama gan
  5. gan ane mau nanya klo buat garis di bawa tulisan dan bawah nya form nya gmn
    contoh:

    yahoo
    gariiiiiiiiissssssss
    username kotaknya terus di dalam kotak dikasih tulisan fastname

    tolong ya gan bantu ane inih soalnya tugas sekolah...
    • pembuatan tabelkah??
  6. Thanks gan..sangat bermanfaat (y)
    • Sama-sama gan
  7. tengkyuu gann, udah ngeshare..
    asngat membantuu..
    info seputar bola, berita bola terupdate , prediksi bola terbaru bisa Anda dapatkan di www.bola368.net
    • Sama-sama gan
  8. jalan-jalan gan ^^ makasih ya buat infonya :D
    • Sama-sama gan :)
  9. Komentar ini telah dihapus oleh pengarang.
  10. wadaw puyeng kepala w bacanya @-)
    • Kalo pusing pegangan gan hehehe
  11. kurang asik desain nya, coba upload tutorial anda yg ini ke dalam bentuk video supaya lebih jelas lagi ok (o)
    • oke makasih buat sarannya mbak ntar video tutorialnya tak buatkan khusus buat mbak maudina hehehe
  12. Masbero, posisi sidebar harus di kanan, karena google mengindeks blog dari kiri......
    • Terimakasih buat masukkannya gan, tapi di atas hanya sebuah contoh aja untuk penerapannya terserah orang yang ingin membuat templatenya :)
  13. kalok bikin halaman pertama kayak kick denim gimana ya gan,
    tolong bikinin ya gan.
    • Pelajari aja dasar-dasar HTML dan CSS kemudian pelajari hubungan antara Code html dengan code CSS.. 2 hari aja agan pelajari insyaAllah bisa kok
  14. makasih infonya gan

    http://meliamebel.com/
    • Sama-sama gan :)
  15. saya sudah sering memodfikasi template yg sudah jadi, tp sebenarnya saya tidak tahu dasarnya, baru disini saya bisa mengerti dasarnya bikin template, terima kasih infonya gan, ini sangat bermanfaat dan membantu http://noviadamaya.blogspot.com
    • sama-sama gan
  16. mantap gan elo berjasa banget buat tgas ane thaks ya brother salam kenal
    • salam kenal juga gan
  17. bos bisa inbox saya di fb ?
    saya mau pesen template untuk website kalo bisa xD
  18. OOT XD

    ini fb saya tolong ya di inbox takut lupa
    soalnya saya mau pesan

    https://www.facebook.com/venusy77
    • alamat fbnya tidak ditemukan gan
  19. gak jadi mas bro...!!!!
  20. bisa dipake buat wordpress gak?
  21. Notepad++ memang sangat membantu dalam kreasi template website. Saya selalu menggunakan ini untuk belajar edit template di semua blog-blog saya.
    Penjelasan sobat admin sangat komplit dan detail. Terima kasih sudah berbagi post yang sangat bagus buat saya sobat Admin.
    Salam Sukses selalu.
    • Terimakasih buat do'anya gan sukses selalu juga :)
  22. Waw.. Amazing.. Harus Coba.. Nice Info Bro... kalo da waktu mampir di inilhooo.blogspot.com ya gan..
    • Silahkan dicoba gan jika memang masih ada yang dibingungkan silahkan dicoba
  23. makasih banyak gan sangat bermanfaat informasinya, nice post..

    http://obatherbalampuh.com/

  24. Mau dapat gem Clash of Clans, diamond get rich, diamond hay day, dan semua yg ada di google play atau steam wallet dengan mudah tanpa survey,root,hack? Caranya ini ya

    1.Download aplikasi Whaff di smartphone anda, https://play."google.com/store/apps/details?id=com.whaff.whaff (hapus "nya)

    2.Instal, dan buka aplikasi tersebut

    3.Login dengan meggunakan akun facebook.

    4.Masukan kode invitation berikut AK92284 Download dan mainkan aplikasi yang tersedia untuk mendapatkan dolar secara gratis.

    5.Kumpulkan hingga saldo anda mencapai $12

    6.Tukarkan saldo tersebut dengan Google Play Gift Cards(bisa buat stiker line,Clash of Clans,get rich,semua game di playstore), dll.

    7.Redeem kodenya di playstore (domisili harus United States)

    8.Nikmati hasil jerih payah agan :)

    Jangan lupa share lagi tips dan trick yg berguna ini ya. Gua sendiri udah 7 kali payout. Banyak yg bilang kodenya premium jangan langsung percaya.

    ~Jangan terlalu cepat menyerah, semangat~
  25. very useful and broaden,, thanks for the information ...

    http://goo.gl/O0Dapv
  26. sangat membantu terimakasih
  27. gk terlalu bermanfaat tapi thx :)
  28. mkish nmbah referensi gan
  29. makasih banget bro keren blognya(y)
  30. Open PO OUT OF LAYER CLOTHING,kaos cotton Combad 24S,rubber ink,design doodle art authentic,tersedia variasi warna dan ukuran.Only 85K-Until 8 Apr 2016
    Minat langsung PM ! atau
    CP :087757826136 (WA)
    Pin BB:52e3f5b2
    Email :habibiadam68@gmail.com
  31. Makasih Gan Artikelnya sangat membantu
  32. Terima kasih gan sudah meluangkan waktu berbagi ilmu. Sukses dan sehat selalu ya buat ente
    • aamiin gan... Thanks buat doanya
  33. mantap gan maju terus..
  34. memang mantap dah artikelnya kawan
    http://essenaquatic.xyz
  35. Permisi numpang liwat yah gan...........
    1 ID All in One Games Support Android,Blackberry dan iOS,Ajak Temanmu Bermain Bersama Dan Menangkan Jackpotnya,NantikanEvent & BonusYang Menarik Menanti Anda Hanya Di WWW.988POKER.CO
    Poker Texas>>Live Poker>>Domino QQ>>Bandar Ceme>>BlackJack>>Capsa Susun Online
    =======>988POKER
    =======>DAFTAR SEKARANG JUGA
    =======>Agen Judi Online
    =======>Poker Texas
    =======>Domino QQ
    =======>Bandar Ceme
    =======>BlackJack
    =======>Capsa Susun
    >>>>>>>>Anies Sandi
    >>>>>>>>Berita Jakarta
    >>>>>>>>Lantai 7 Alexis
    >>>>>>>>Ahok-Djarot
    >>>>>>>>Setya Novanto
    Menangkan Hadiah - Hadiahnya Tiap Minggu !!!
    Info Lebih lanjut bisa menghubungi kami melalui :
    Fanpage Facebook : 988POKER
    SMS : 0812-91-8888-08
    WhatsApp : 0812-91-8888-08
    BBM : D62477FB
    LINE : 988bet
    Instagram : 988poker
  36. Semangat trus gan buat artikel yg kayak gini
  37. Mantap Jiwa bos ku
  38. Sama-sama gan 😄
  39. thanks buat pujiannya gan
  1. Komentar ini, diurutkan dari yang terlama
  2. Tinggalkan komentar sesuai topik tulisan
  3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Out off topic
  4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
  5. Untuk menghapus komentar, hanya dapat dilakukan oleh admin.
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.