All Style, Text and Writing Formats and Other Additional Features - fajarriskiharap

Salah satu kelebihan dari template ini adalah banyaknya style atau format teks serta layout postingan yang disediakan untuk membuat artikel Anda lebih keren lagi.

Perlu diketahui sebagian dari layout posting yang terdapat di template ini juga terinspirasi dari Medium.com, semua format teks beserta fitur lainnya akan dijelaskan lebih lengkap pada update kali ini. Kami sebisa mungkin ingin memastikan Anda tidak kecewa ketika membeli template ini.

Ada beberapa bagian yang tidak di masukkan dari template versi lama pada update kali ini salah satu nya adalah Ads Placement dan Auto Related Post yang terdapat dalam postingan. Tapi bukan berarti fitur tersebut tidak ada, sebagai gantinya kami menyiapkan tutorial lengkap yang sangat mudah untuk diterapkan serta bisa diakses kapanpun bagi Anda yang ingin mengaktifkan fitur tersebut.

Compose Mode

Pada bagian ini akan di tampilkan contoh tampilan layout berdasarkan mode compose yang khusus bagi Anda yang awam tentang HTML, yang perlu Anda lakukan hanya menulis dan template ini yang menyiapkan layoutnya.

Sebagai tambahan informasi semua layout dalam mode compose ini sudah support responsive mode, jadi beberapa layout seperti gambar dan lainnya tidak akan bermasalah ketika di lihat pada ukuran layar yang lebih kecil atau pada smartphone.

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.

Font Size

Defaulnya ukuran font yang ditampilkan akan disesuai berdasarkan ukuran yang sudah di setting dalam template, tapi Anda bisa mengubahnya ke beberapa ukuran dibawah ini:

Text ini menggunakan ukuran terkecil dari pilihan yang disediakan blogger.
Small text, font dengan ukuran kecil menengah yang cocok untuk caption gambar
Teks dengan ukuran normal
Teks dengan ukuran besar
Teks dengan ukuran yang paling besar.

Heading Format

Berikut beberapa format heading yang terdapat dalam template ini

Ini adalah format heading pada artikel

Dan ini adalah subheading atau yang bisa ditulis dalam kode <h3>

Terakhir adalah minor heading ditulis dalam kode <h4>

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.

Small Image

Medium Image

Large Image

X-Large Image

Gambar ukuran original dengan caption

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.

List Style

List style dengan nomor

1. Daftar pertama
2. Daftar kedua
3. Daftar ketiga
4. Daftar Keempat

List style dengan dots

• Daftar pertama
• Daftar kedua
• Daftar ketiga
• Daftar Keempat

Blockquote

Ini adalah tampilan blockquote pada template ini, Anda bisa menambahkan beberapa hal lain dalam blok namun harus dalam mode HTML

HTML Mode (Expert)

Bagi Anda yang sudah expert dalam blogging dan terbiasa menulis dalam mode HTML, beberapa format dibawah ini mungkin sudah tidak asing lagi dan layak untuk dicoba.

Dropcap and Syntax Highlighter

Merupakan fitur pada teks editor yang menampilkan atau menyoroti teks terutama source code-dalam berbagai warna dan font sesuai dengan istilah. Pada paragraf ini terdapat dua fitur tambahan yang bisa Anda gunakan yaitu dropcap dan syntax, dropcap sendiri adaah huruf awal suatu paragraf yang diperbesar. Berikut tampilan dari syntax highlighter beserta cara penggunaannya:

// Untuk menggunakan dropcap cukup tulis kode HTML seperti dibawah ini : 
<span class='dropcap'>M</span>

// Sedangkan 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

Table

No.	Nama	Kota
1	Kota	Sukabumi
2	Kota	Bandung
3	Kota	Jakarta
4	Kota	Bekasi
5	Kota	Tangerang
6	Kota	Bogor

Table of Content

Jika Anda membuka Wikipedia, Anda akan sering menuemukan fitur ini pada setiap artikel disana. Adalah daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat dalam sebuah artikel. Biasa digunakan sebagai rincian dari isi artikel yang berupa link sehingga akan memudahkan pembaca untuk memilih informasi bagian pokok bahasan apa yang akan dibacanya.

Table of Content

1. Bagian Subheading 1
2. Bagian Subheading 2
3. Bagian Subheading 3
4. Bagian Subheading 4
5. Bagian Subheading 5

Format penulisan:

<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.

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 File
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>

Download fileDemo

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. Berikut tampilannya (tekan tombol play untuk memutar video):

//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:

Play button by codemyui.com

// 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>

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>

Block Text

Fitur ini akan terlihat lebih maksimal jika blog dibuka pada smartphone—atau silahkan Anda perkecil ukuran jendela browser Anda untuk melihat fitur ini.

<div class='post-block'>
  <!-- Isi teks Anda disini -->
</div>

Custom Blockquote

Desain—Revisi—Revisi—Revisi—Tipes

Muhammad MakiGraphics Designer

<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 elit

—John Doe

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.

<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>

Image

Setiap posting biasanya selalu disisipi gambar sebagai penguat atau penjelas artikel tersebut, untuk itu kami memberikan beberapa pilihan pemuatan gambar yang mungkin bisa Anda coba:

First Image

Fitur ini sangat cocok jika digunakan untuk gambar pertama artikel—atau yang biasanya terdapat dibawah/atas judul artikel, pada tampilan desktop gambar akan terlihat sama dengan gambar biasa, gambar akan terlihat berbeda jika Anda membuka postingan blog Anda di smartphone atau kecilkan layar jendela browser Anda (dengan catatan ukuran gambar minimal 640px).

<div class='first-image'>
  <img alt='' src=''/>
</div>

Responsive Grid Image

Dalam fitur ini gambar akan ditampilkan dalam bentuk grid tiga kolom dan akan menyesuaikan menjadi 2 kolom pada ukuran layar yang lebih kecil.

<div class='grid-image'>
  <img class='lazy' alt='' data-src='' data-srcset='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img class='lazy' alt='' data-src='' data-srcset='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img class='lazy' alt='' data-src='' data-srcset='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</div>

Horizontal Scroll Image

Tidak jauh berbeda dengan Grid Image, hanya saja pada saat dibuka di layar yang lebih kecil gambar akan ditampilkan flexbox user bisa swipe layar ke kanan untuk melihat gambar lainnya.

<div class='scroll-image'>
  <img class='lazy' alt='' data-src='' data-srcset='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img class='lazy' alt='' data-src='' data-srcset='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img class='lazy' alt='' data-src='' data-srcset='' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</div>

Semoga beberapa fitur tambahan diatas bisa membuat postingan Anda terlihat lebih tertata dan nyaman untuk dibaca, silahkan tulis komentar dan beri tanggapan tentang update baru dari blog ini.

Related Posts