Panduan Editor HTML
Disclaimer : Kode HTML di bawah ini kemungkinan besar tidak akan berjalan dengan sempurna apabila di aplikasikan di template blog yang berbeda.
Pada paragraf ini font yang dipakai adalah Courier sangat cocok untuk penulisan kode HTML, Javascript atau kode lainnya
Paragraf dengan font Georgia, bagi sebagian orang font dengan jenis serif seperti ini lebih mudah dan nyaman untuk membaca.
Paragraf dengan font Helvetica
Paragraf dengan font Times yang lebih cocok jika dijadikan heading atau subheading dari artikel.
Paragraf dengan font Trebuchet
Paragraf dengan font Verdana, Anda bisa perhatikan beberapa perbedaan font diatas dan putuskan font mana yang terbaik untuk artikel Anda.
Button
Format penulisan:
<a class='button' href='javascript:void(0)'>Button</a>
Format penulisan:
<a class='button' href='javascript:void(0)'><i class='icon download'></i>Download File</a>
Ada beberapa icon berbeda yang bisa Anda coba pada tombol ini, berikut previewnya:
Demo Info File Contact Us
Format penulisan icon:
<i class='icon demo'></i>
<i class='icon info'></i>
<i class='icon contact'></i>
Download File
Format penulisan:
<a class='button outline' href='javascript:void(0)'><i class='icon download'></i>Download File</a>
Butuh Bantuan?
Format penulisan:
<a class='button whatsapp' href='javascript:void(0)'><i class='icon whatsapp'></i>Butuh Bantuan?</a>
Format penulisan:
<div class='download-info'>
<a class='button' href='#' title='Download'><i class='icon download'></i>Download file</a><a class='button outline' href='#' title='Demo'>Demo</a></div>
Tampilan video dengan tombol play yang lebih keren:
<i class='separate'></i>
Gambar diatas di tampilkan dalam beberapa ukuran dari yang terkecil sampai terbesar dan ukuran originalnya beserta caption, dibawah ini akan diperlihatkan bagaimana tampilan jika gambar diposisikan rata kiri atau kanan.
Morbi turpis arcu, eleifend a tortor quis, sagittis dapibus ipsum. Vestibulum in imperdiet arcu, eget fringilla libero. Aenean commodo, felis id fermentum pellentesque, risus elit efficitur augue, at lobortis libero ipsum quis nulla. Suspendisse imperdiet magna at tellus feugiat rhoncus. Donec in massa vitae quam lobortis cursus. Donec tincidunt interdum ex ut finibus. Praesent at dui scelerisque, laoreet justo eu, egestas justo.
In imperdiet ultrices iaculis. Proin consequat, massa ut hendrerit lacinia, eros nibh finibus justo, ut consectetur nibh orci vitae massa. Ut sodales lobortis sollicitudin. Phasellus eget mi dictum neque mollis vehicula. Vestibulum et dolor accumsan, volutpat est quis, posuere tortor.
Syntax Highlighter
// Untuk menggunakan Syntax Highlighter penulisannya adalah seperti ini
<pre>
<code>
<!-- kode html, css ata javascript disini -->
</code>
</pre>
// Fitur syntax tambahan yang bisa Anda gunakan ketika menulis kode
<i>Comment</i> = Kode dalam tag ini otomatis tidak akan ikut terseoroti
<i class='comment'>Comment</i> = <!-- kode html, css ata javascript disini -->
<span>CSS Property</span> = main{display: block;position: relative}
<span class='block'>Block Text</span> = Digunakan untuk menyoroti bagian yang perlu diganti oleh user
First Image
<div class='first-image'>
<img alt='' src=''/>
</div>
Dropcap (huruf awal besar)
<span class='dropcap'>G</span>
Custom Blockquote
Desain—Revisi—Revisi—Revisi—Tipes
<blockquote><!-- Teks Anda disini -->
<div class='block-author'>
<div class='block-img'>
<img class='lazy' alt='' data-src='' data-srcset='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</div>
<div class='block-info'><span class='block-name'>Nama Anda</span><span class='block-desc'>Graphics Designer</span></div>
</div>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elitMorbi turpis arcu, eleifend a tortor quis, sagittis dapibus ipsum. Vestibulum in imperdiet arcu, eget fringilla libero. Aenean commodo, felis id fermentum pellentesque, risus elit efficitur augue, at lobortis libero ipsum quis nulla. Suspendisse imperdiet magna at tellus feugiat rhoncus. Donec in massa vitae quam lobortis cursus. Donec tincidunt interdum ex ut finibus. Praesent at dui scelerisque, laoreet justo eu, egestas justo. Nullam dapibus, dolor quis blandit suscipit, massa odio hendrerit neque, at fermentum dolor tellus ac justo.
—John Doe
<blockquote class='style-2'><!-- Isi teks Anda disini --></blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
—John Doe
<blockquote class='style-3'><!-- Isi teks Anda disini --></blockquote>
Table of Content
<div class='tableOfContent'>
<div id='tocHeader' class='tocHeader' onclick='if (document.getElementById("tocContent").style.display === "none"){ document.getElementById("tocContent").style.display = "block"; document.getElementById("tocHeader").style.position = "relative";} else {document.getElementById("tocContent").style.display = "none"; document.getElementById("tocHeader").style.position = "static";}' role='button' tabindex='0'>Table of Content <i class='icon icon-dropdown'></i></div>
<div id='tocContent' class='tocContent'>
<ol>
<li><a href='#toc-1' title='Subheading 1'>Bagian Subheading 1</a></li>
<li><a href='#toc-2' title='Subheading 2'>Bagian Subheading 2</a></li>
<li><a href='#toc-3' title='Subheading 3'>Bagian Subheading 3</a></li>
<li><a href='#toc-4' title='Subheading 4'>Bagian Subheading 4</a></li>
<li><a href='#toc-5' title='Subheading 5'>Bagian Subheading 5</a></li>
</ol>
</div>
</div>
// Edit tulisan yang ditandai dengan subjudul Anda, kemudian tambahkan id='toc-1' disetiap heading atau tag <h2>, <h3>, <h4> pada artikel Anda. Contoh:
<h4>Tutorial Membuat Table of Content</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.
// Tambahkan id pada heading menjadi seperti dibawah :
<h4 id='toc-1'>Tutorial Membuat Table of Content</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.
Block Text
<div class='post-block'>
<!-- Isi teks Anda disini -->
</div>
2 Columns
Morbi turpis arcu, eleifend a tortor quis, sagittis dapibus ipsum. Vestibulum in imperdiet arcu, eget fringilla libero. Aenean commodo, felis id fermentum pellentesque, risus elit efficitur augue, at lobortis libero ipsum quis nulla. Suspendisse imperdiet magna at tellus feugiat rhoncus. Donec in massa vitae quam lobortis cursus. Donec tincidunt interdum ex ut finibus. Praesent at dui scelerisque, laoreet justo eu, egestas justo. Nullam dapibus, dolor quis blandit suscipit, massa odio hendrerit neque, at fermentum dolor tellus ac justo. Cras placerat sit amet libero sit amet rhoncus. Aenean ultrices vitae erat ut malesuada. Vivamus fringilla mollis leo, ut tempus nibh feugiat sollicitudin. Phasellus sodales maximus turpis, eget sollicitudin tortor volutpat ac.
In imperdiet ultrices iaculis. Proin consequat, massa ut hendrerit lacinia, eros nibh finibus justo, ut consectetur nibh orci vitae massa. Ut sodales lobortis sollicitudin. Phasellus eget mi dictum neque mollis vehicula. Vestibulum et dolor accumsan, volutpat est quis, posuere tortor. Maecenas euismod turpis eu metus elementum tempor. Pellentesque in ullamcorper massa. Pellentesque lectus ipsum, dignissim nec ornare et, laoreet eget ex. Duis convallis lorem vitae consequat mattis. Aenean dui lectus, auctor eu dui et, gravida pellentesque velit. In vitae justo lacus. Vivamus id imperdiet sapien. Mauris non maximus purus. Nulla facilisi.
<div class='post-column'>
<div class='columnBox'>
<!-- Isi teks pada kolom pertama -->
</div>
<div class='columnBox'>
<!-- Isi teks pada kolom kedua -->
</div>
</div>
Font Format
Default font bawaan yang digunakan pada template ini adalah Lato, Segoe UI, dan DM Serif Text, pada paragraf ini font yang digunakan adalah Arial yang merupakan pilihan pertama dari beberapa font yang disediakan blogger.Pada paragraf ini font yang dipakai adalah Courier sangat cocok untuk penulisan kode HTML, Javascript atau kode lainnya
Paragraf dengan font Georgia, bagi sebagian orang font dengan jenis serif seperti ini lebih mudah dan nyaman untuk membaca.
Paragraf dengan font Helvetica
Paragraf dengan font Times yang lebih cocok jika dijadikan heading atau subheading dari artikel.
Paragraf dengan font Trebuchet
Paragraf dengan font Verdana, Anda bisa perhatikan beberapa perbedaan font diatas dan putuskan font mana yang terbaik untuk artikel Anda.
<span style="font-family: "Courier New", Courier, monospace;">font Courier</span>
<span style="font-family: Georgia, "Times New Roman", serif;">font Georgia</span>
<span style="font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;">font Helvetica</span>
<span style="font-family: Times, "Times New Roman", serif;">font Times</span>
<span style="font-family: "Trebuchet MS", sans-serif;">font Trebuchet</span>
<span style="font-family: Verdana, sans-serif;">font Verdana</span>
Button
Tombol link berbeda untuk menampilkan link penting seperti link download, preview dan sebagainya. Secara defaul tampilannya akan seperti dibawah ini:Button
Format penulisan:
<a class='button' href='javascript:void(0)'>Button</a>
Penambahan icon pada tombol
Download FileFormat penulisan:
<a class='button' href='javascript:void(0)'><i class='icon download'></i>Download File</a>
Ada beberapa icon berbeda yang bisa Anda coba pada tombol ini, berikut previewnya:
Demo Info File Contact Us
Format penulisan icon:
<i class='icon demo'></i>
<i class='icon info'></i>
<i class='icon contact'></i>
Download File
Format penulisan:
<a class='button outline' href='javascript:void(0)'><i class='icon download'></i>Download File</a>
Butuh Bantuan?
Format penulisan:
<a class='button whatsapp' href='javascript:void(0)'><i class='icon whatsapp'></i>Butuh Bantuan?</a>
Format penulisan:
<div class='download-info'>
<a class='button' href='#' title='Download'><i class='icon download'></i>Download file</a><a class='button outline' href='#' title='Demo'>Demo</a></div>
Lazy Youtube Video
Fitur ini akan sangat berguna bagi Anda yang ingin menampilkan video dalam artikel tanpa harus memikirkan loading blog. Lazy youtube ini sudah di integrasikan dengan Lazy Image, jadi gambar thumbnailnya sekalipun tidak akan mengurangi kecepatan loading blog Anda. Anda juga bisa mempercantik tampilan tombol play pada video nya dengan mengubah sedikit kode nya.//Penggunaannya sangatlah mudah dan simple, yang perlu Anda lakukan hanyalah
- Menyalin kode pemutaran video youtube yang ingin ditampilkan
- Contoh url video youtube : youtube.com/watch?v=s1tAYmMjLdY
- yang perlu Anda salin hanyalah kode "s1tAYmMjLdY" dan menempelnya pada tag dibawah ini:
<div class='lazy-youtube' data-embed='s1tAYmMjLdY'>
<div class='play-button'></div>
</div>
Tampilan video dengan tombol play yang lebih keren:
// Penulisannya sama perti diatas, Anda hanya perlu mengubah kode <div class='play-button'></div> menjadi seperti dibawah ini:
<div class='lazy-youtube' data-embed='rvrZJ5C_Nwg'>
<div class='playBut'>
<svg viewBox='0 0 213.7 213.7'><polygon class='triangle' fill='none' points='73.5,62.5 148.5,105.8 73.5,149.1 ' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='7'/><circle class='circle' cx='106.8' cy='106.8' fill='none' r='103.3' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='7'/></svg>
</div>
</div>
Paragraph Separator
Perhatikan bagian atas judul paragraf ini, terdapat pemisah antara paragraf atas dan paragraf berikutnya. caramenggunakan ini cukup mudah format penulisannya hanya seperti dibawah ini:<i class='separate'></i>
Insert Image
Pada bagian ini terdapat contoh tampilan gambar berdasarkan format ukuran, dan penempatan yang semuanya sudah support responsive walaupun Anda tidak mengubah kode standarnya pada mode HTML. Namun sangat disarankan untuk selalu menambahkan alt='' pada setiap gambar yang Anda tambahkan pada postingan karen akan berpengaruh pada SEO.Gambar ukuran original dengan caption |
// Membuat gambar dengan caption
<table align='center' cellpadding='0' cellspacing='0' class='tr-caption-container' style='margin-left: auto; margin-right: auto; text-align: center;'><tbody>
<tr><td style='text-align: center;'><a href='javascript:void(0)' imageanchor='1' style='margin-left: auto; margin-right: auto;'><img border="0" class="lazy" data-original-height="375" data-original-width="350" data-src="LINK GAMBAR" data-srcset="LINK GAMBAR" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" /></a></td></tr>
<tr><td class='tr-caption' style='text-align: center;'>Gambar ukuran original dengan caption</td></tr>
</tbody></table>
Gambar diatas di tampilkan dalam beberapa ukuran dari yang terkecil sampai terbesar dan ukuran originalnya beserta caption, dibawah ini akan diperlihatkan bagaimana tampilan jika gambar diposisikan rata kiri atau kanan.
Morbi turpis arcu, eleifend a tortor quis, sagittis dapibus ipsum. Vestibulum in imperdiet arcu, eget fringilla libero. Aenean commodo, felis id fermentum pellentesque, risus elit efficitur augue, at lobortis libero ipsum quis nulla. Suspendisse imperdiet magna at tellus feugiat rhoncus. Donec in massa vitae quam lobortis cursus. Donec tincidunt interdum ex ut finibus. Praesent at dui scelerisque, laoreet justo eu, egestas justo.
In imperdiet ultrices iaculis. Proin consequat, massa ut hendrerit lacinia, eros nibh finibus justo, ut consectetur nibh orci vitae massa. Ut sodales lobortis sollicitudin. Phasellus eget mi dictum neque mollis vehicula. Vestibulum et dolor accumsan, volutpat est quis, posuere tortor.