Panduan Penggunaan Ninura 2021 SEO Blogger Template

Daftar Isi

Panduan Instalasi

Untuk menerapkan template ini, silahkan ikuti panduan berikut:

Buka Konten
  1. Silahkan login ke Blogger.
  2. Kemudian masuk ke menu Theme/ Tema.
  3. Silahkan backup terlebih dahulu template lama kamu untuk menghindari hal-hal yang tidak diinginkan.
  4. Masuk ke halaman edit HTML.
  5. Select All template lama kamu lalu hapus semua kode nya.
  6. Drag and Drop atau Copy Paste file XML dari template Ninura 2021 SEO Blogger Template.
  7. Simpan Template.
  8. Kembali ke halaman Theme. Lalu Refresh Halaman.
  9. Buka menu Mobile Settings.
  10. Ubah pengaturan menjadi Desktop.
  11. Simpan Pengaturan.

Panduan Optimasi SEO

Untuk mengoptimalkan SEO di template ini, silahkan ikuti panduan berikut:

Buka Konten
  1. Title
    • Silahkan cari "###YOUR SLOGAN###"
    • Ganti bagian tersebut dengan tagline atau slogan dari blog kamu.
  2. Featured Image
    • Silahkan cari "###YOUR BANNER URL###"
    • Ganti bagian tersebut dengan url gambar banner atau logo dari blog kamu.
  3. Meta Description
    • Silahkan cari "###YOUR META DESCRIPTION###"
    • Ganti bagian tersebut dengan meta deskripsi dari blog kamu.
  4. Meta Keywords
    • Silahkan cari "###KEYWORDS###"
    • Ganti bagian tersebut dengan keywords yang berhubungan dengan konten dari blog kamu dipisahkan menggunakan tanda koma. Contohnya: ", jual ikan, ikan hias, ikan cupang, ikan arwana"
  5. Facebook Open Graph
    • Silahkan ganti "###URL FACEBOOK PROFILE OF OWNER###" dengan URL profile Facebook kamu atau penulis konten.
    • Silahkan ganti "###URL FACEBOOK PAGE###" dengan URL Facebook Page kamu.
    • Silahkan ganti "###FACEBOOK ID ADMIN###" dengan ID Facebook kamu. Contohnya: "100008820825263".
    • Silahkan ganti "###FACEBOOK PAGE ID###" dengan ID Facebook kamu. Contohnya: "767400950017070".
  6. Twitter Card
    • Silahkan ganti "###TWITTERUSERNAME###" dengan username Twitter kamu atau penulis konten dimulai dengan tanda "@". Contohnya: "@ninuraofficial".
  7. Meta Verification
    • Jika kamu ingin menaruh meta tag tambahan untuk verifikasi silahkan kamu letakkan dibawah kode ini: <b:comment><!-- Meta Verification --></b:comment>.

Panduan Bagian Pengaturan

Untuk mengoptimalkan performa dan fitur dari template Ninura 2021 SEO Blogger Template, silahkan sesuaikan bagian Pengaturan blog kamu seperti panduan berikut:

Buka Konten
  1. Title/ Judul
    • Silahkan diisi sesuai nama blog kamu.
  2. Description/ Deskripsi
    • Silahkan diisi sesuai dengan slogan blog atau meta description blog kamu.
  3. Blog Language/ Bahasa
    • Silahkan diisi sesuai bahasa yang digunakan untuk konten blog kamu.
  4. Google Analytics Property ID
    • Silahkan diisi ID Property Google Analytics kamu untuk blog kamu. Bagian ini kalau bisa diisi untuk mengoptimalkan fungsi dari template.
  5. Favicon
    • Silahkan diganti dengan favicon blog kamu. Jika belum punya, kamu bisa lewati.
  6. Privacy
    • Pastikan bagian ini menyala atau agar blog bisa di-crawl dan diindeks oleh mesin pencari.
  7. Domain
    • Untuk domain silahkan disesuaikan saja jika kamu punya custom domain sendiri. Jika tidak, bisa dilewat.
  8. HTTPS
    • Untuk semua yang ada di bagian HTTPS pastikan menyala, selain untuk keamanan juga untuk menambah nilai SEO.
  9. Permission
    • Untuk bagian ini bisa dilewati.
  10. Posts
    • Untuk bagian ini silahkan diatur sesuai kebutuhan saja.
  11. Comments
    • Jika kamu ingin menggunakan kolom komentar bawaan Blogger, silahkan setting bagian Comment Location atau Lokasi Komentar menjadi "Embedded".
    • Untuk bagian Reader Comment Captcha silahkan dinonaktifkan.
    • Untuk bagian Comment Message, silahkan kamu isi sesuai pesan yang ingin kamu sampaikan. Pesan ini akan muncul di bagian atas komentar. Kamu dapat menulis pesan dalam format HTML.
  12. Email
    • Untuk bagian ini bisa dilewati.
  13. Timezone
    • Untuk bagian ini, silahkan sesuaikan Timezone dengan waktu di daerah kamu. Jika Indonesia, silahkan pilih GMT+7.
  14. Meta Tags
    • Untuk bagian ini, silahkan kamu aktifkan pilihan "Enable Search Description" lalu isi bagian selanjutnya dengan meta description dari blog kamu. Bagian ini penting untuk mengoptimalkan hasil pencarian blog kamu.
  15. Error and Redirects
    • Untuk bagian ini bisa dilewati.
  16. Crawler and Indexing
    • Silahkan aktifkan bagian "Enable custom robots.txt" lalu isikan dengan script berikut:
      User-agent: *
      Allow: /
      Disallow: /search
      Sitemap: https://www.ninura.com/sitemap.xml
      Setelah itu, silahkan kamu ganti bagian yang saya tandai dengan URL blog kamu.
    • Untuk bagian "Enable custom robots header tags" boleh diaktifkan boleh tidak. Jika diaktifkan, silahkan kamu atur formatnya sebagai berikut:
      1. Untuk bagian Homepage silahkan kamu centang bagian "all" saja.
      2. Untuk bagian Archive and search page tags silahkan kamu centang semua selain "all" dan "unavailable_after".
      3. Untuk bagian Post and page tags silahkan kamu centang bagian "all" saja.
  17. Monetization
    • Untuk bagian ini silahkan diisi jika kamu sudah menghubungkan blog kamu dengan Google AdSense atau lainnya yang memerlukan ads.txt.
    • Untuk format pengisiannya kamu bisa ikuti contoh ini:
      google.com, pub-8621755xxxx, DIRECT, f08c47fec0942fa0
      Silahkan kamu ganti bagian yang saya tandai dengan kode penerbit akun Google AdSense kamu.
  18. Manage Blog
    • Untuk bagian ini bisa dilewati.
  19. Site Feed
    • Untuk bagian ini, silahkan ubah feed kamu menjadi Short untuk keamanan dari AGC. Namun, jika kamu berencana untuk mendaftarkan blog kamu ke Article Instan Facebook, silahkan atur feed blog kamu menjadi Full.
  20. General
    • Silahkan diaktifkan saja profile Blogger-nya. Setelah itu, silahkan edit Profile Blogger kamu sesuai keinginan.

Panduan Custom Warna

Untuk mengatur paduan warna dari template ini, kamu bisa lakukan dengan mudah melalui menu Customize di halaman Theme/ Tema. Untuk lebih jelasnya, silahkan perhatikan gambar berikut:

Blog Post Layout

Tampilan untuk Blog Post Layout dapat kamu sesuaikan dengan selera. Namun, jika kamu ingin mempunyai tampilan yang sama seperti blog demo, kamu dapat mengaturnya dengan cara:

Buka Konten
  1. Silahkan kamu masuk ke halaman Layout lalu buka pengaturan Blog Post seperti pada gambar berikut:
  2. Setelah itu, silahkan kamu aktifkan semua opsi yang bisa diaktifkan.
  3. Kemudian, silahkan kamu scroll ke bagian layout lalu drag and drop setiap bagiannya hingga mempunyai format seperti gambar berikut:

Fitur Komentar

Template ini dapat menggunakan dua jenis kolom komentar yaitu komentar bawaan Blogger dan Disqus. Untuk mengaktifkannya, kamu bisa mengikuti panduan berikut:

Buka Konten
  1. Blogger
    • Untuk menggunakan fitur komentar Blogger, silahkan kamu masuk ke halaman Layout lalu buka pengaturan Blog Post seperti pada gambar berikut:
    • Setelah itu silahkan aktifkan bagian Comments, lalu isi bagian label-nya dengan "Blogger". Pastikan penulisan besar-kecil hurufnya sesuai, jika tidak desain komentar mungkin akan rusak atau tidak muncul. Setelah itu silahkan simpan pengaturan. Untuk lebih jelasnya perhatikan gambar berikut:
  2. Disqus
    • Untuk menggunakan fitur komentar Disqus, silahkan kamu masuk ke halaman Layout lalu buka pengaturan Blog Post seperti pada gambar berikut:
    • Setelah itu silahkan aktifkan bagian Comments, lalu isi bagian label-nya dengan username disqus kamu. Contohnya "ninura". Pastikan penulisan besar-kecil hurufnya sesuai dengan username disqus kamu, jika tidak komentar mungkin tidak muncul. Setelah itu silahkan simpan pengaturan. Untuk lebih jelasnya perhatikan gambar berikut:
Catatan: Kamu hanya bisa mengaktifkan salah satu format komentar dan template ini tidak mendukung untuk menerapkan kedua jenis format sekaligus. Hal ini saya buat atas pertimbangan fungsi dan mengoptimalkan kecepatan loading.

Google AdSense Auto Ads

Template ini sudah support untuk penerapan iklan Google AdSense. Untuk mengaktifkan iklan Auto Ads dari Google Adsense, kamu bisa mengikuti panduan berikut:

Buka Konten
  1. Silahkan kamu masuk ke halaman Layout lalu buka pengaturan Blog Post seperti pada gambar berikut:
  2. Setelah itu, silahkan aktifkan bagian Author Name/ Nama Penulis lalu isi label dengan kode publisher Google AdSense kamu. Setelah itu, silahkan simpan Pengaturan. Untuk lebih jelas, silahkan perhatikan gambar berikut:
Catatan: Jika kamu belum mempunyai akun Google Adsense, silahkan aktifkan saja bagian Author Name tersebut, namun kosongkan bagian labelnya.

Ads

Untuk memasang iklan, silahkan kamu terapkan melalui halaman Layout pada bagian widget yang berwarna hijau seperti yang saya tunjukkan pada gambar berikut:

Pengaturan Social Icon Header

Untuk mengatur social icon yang ada di bagian header, silahkan ikuti panduan berikut ini:

Buka Konten
  1. Silahkan buka menu Layout, lalu buka widget Social icon seperti yang saya tunjukkan pada gambar berikut:
  2. Kemudian silahkan isi bagian konten dengan link yang berisi file inline SVG untuk iconnya. Untuk lebih jelasnya kamu bisa ikuti format berikut:
    <a href='https://www.facebook.com/ninura.official' rel='nofollow noopener noreferrer' target='_blank' title='Official Link'><svg viewbox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-3 7h-1.924c-.615 0-1.076.252-1.076.889v1.111h3l-.238 3h-2.762v8h-3v-8h-2v-3h2v-1.923c0-2.022 1.064-3.077 3.461-3.077h2.539v3z"></path></svg></a>
    • Silahkan kamu ganti bagian yang saya tandai warna kuning dengan alamat link yang ingin dituju.
    • Silahkan kamu ganti bagian yang saya tandai warna hijau dengan kode icon svg yang ingin kamu pakai. Kamu bisa gunakan koleksi icon svg dari Ninura pada bagian List Social Icon.
  3. Terakhir, silahkan kamu simpan pengaturan widget kamu tersebut.

Pengaturan Social Icon Author

Untuk mengatur social icon yang ada di bagian author box, silahkan ikuti panduan berikut ini:

Buka Konten
  1. Silahkan kamu Buka menu Themes/ Tema, lalu buka menu Edit HTML.
  2. Silahkan cari kode ini:
    <b:includable id='author-social-icon'>
  3. Selanjutnya, silahkan tambahkan kode ini tepat di bawah kode di atas:
    <b:if cond='data:post.author.name == "Nisfa Nurfadilah Rachmaniar"'>
    <a href='#' target='_blank' rel='nofollow noopener' title='Facebook'>
    <svg viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-3 7h-1.924c-.615 0-1.076.252-1.076.889v1.111h3l-.238 3h-2.762v8h-3v-8h-2v-3h2v-1.923c0-2.022 1.064-3.077 3.461-3.077h2.539v3z"/></svg>
    </a>
    </b:if>
    • Pertama, silahkan ganti bagian yang saya tandai warna kuning dengan nama author yang ingin kamu beri social icon. Pastikan menulis nama penulis sesuai besar kecil yang tampil di bagian Author Box. Jika tidak, maka icon tidak akan muncul.
    • Kedua, silahkan ganti bagian yang saya tandai dengan warna biru dengan URL social media dari si penulis.
    • Ketiga, silahkan ganti bagian yang saya tandai dengan warna merah dengan nama social media yang kamu inginkan. Contohnya, "Facebook".
    • Keempat, silahkan ganti bagian yang saya tandai dengan warna hijau dengan kode icon SVG yang bisa kamu lihat di bagian List Social Icon SVG.
  4. Silahkan tambahkan selengkap mungkin icon social media yang kamu inginkan dan jika kamu punya lebih dari 1 penulis.
  5. Jika sudah selesai, silahkan Simpan Template.

List Social Icon SVG

Untuk melihat koleksi social icon SVG Ninura, bisa di cek di halaman Koleksi Icon SVG.

Jika ada icon yang kamu inginkan namun belum ada pada list di atas, kamu bisa request melalui kolom komentar dan akan saya akan tambahkan sesuai kebutuhan. Kamu juga bisa menambahkan icon SVG kamu sendiri jika mau.

Error Page

Untuk mengkostumisasi error-page, silahkan kamu buka halaman Layout, lalu cari widget berwarna merah berjudul Error Page. Silahkan kamu edit kata-katanya sesuai keinginan kamu. Format HTML-nya sudah tersedia di dalam widget.

Sitemap Page

Untuk membuat halaman daftar isi atau Sitemap, silahkan kamu buat halaman statis dengan judul Sitemap. Setelah itu, isikan meta deskripsi-nya saja. Jika sudah langsung saja simpan halaman tersebut. Pastikan alamat/ URL dari halaman adalah seperti ini:

https://alamat-domain-kamu/p/sitemap.html

Jika sudah benar, maka konten di halaman Sitemap akan secara otomatis terisi dengan widget sitemap.

Cara Membuat Safelink Tool Page

Untuk membuat halaman safelink tools, silahkan kamu buat halaman statis dengan judul Sitemap. Setelah itu, isikan meta deskripsi-nya saja. Jika sudah langsung saja simpan halaman tersebut. Pastikan alamat/ URL dari halaman adalah seperti ini:

https://alamat-domain-kamu/p/safelink.html

Jika sudah benar, maka konten di halaman Safelink akan secara otomatis terisi dengan Safelink tools.

Panduan Mengatur Safelink

Mengatur Preloader Safelink

Preloader adalah elemen yang muncul selama beberapa saat sebelum tombol "Get Link" muncul. Preloader ini dapat kamu sesuaikan dengan selera kamu. Caranya:

  1. Masuk ke menu Layout.
  2. Cari widget bernama Preloader Safelink seperti yang saya tunjukkan pada gambar berikut:
  3. Pada widget ini, kamu akan menemukan isi seperti berikut ini:
    <div class='ninura-center'>
    <div class='hidden' id='preloader'>
    <img alt='Logo Ninura' class='ninura-spin' height='80' src='https://1.bp.blogspot.com/-_UWhBEd5l9E/X7XC1q-fyvI/AAAAAAAAAsM/aAMVvE38FiEKvVpL0GOlFV-L4JkubqkSgCK4BGAYYCw/s80-rw/android-chrome-512x512.png' title='Logo Ninura' width='80'/>
    <br/>
    Tunggu sebentar...
    </div>
    <div class='ninura-center hidden' id='button-area'>
    <a class='button' href='#page-is' id='getbutton'>Get Link</a>
    </div>
    </div>
    • Bagian yang saya tandai warna kuning adalah gambar yang berputar sebagai tanda loading. Kamu bisa ganti gambar tersebut sesuai keinginan kamu atau kamu hapus jika sekiranya tidak berkenan.
    • Bagian yang saya tandai warna hijau adalah teks yang muncul di bawah gambar sebagai penunjuk loading. Silahkan kamu ganti sesuai keinginan.
    • Bagian yang saya tandai warna merah adalah teks dari tombol yang muncul setelah loading selesai. Silahkan kamu ganti sesuai keinginan.
    • Untuk bagian lainnya yang tidak saya tandai harap tidak diubah karena dapat merusak fungsi dari safelink.
  4. Jika sudah kamu sesuaikan, silahkan simpan widget dan lihat hasilnya.
Mengatur Output Safelink

Output adalah elemen yang muncul setelah pengunjung menekan tombol "Get Link". Elemen ini dapat kamu sesuaikan dengan selera kamu. Caranya:

  1. Masuk ke menu Layout.
  2. Cari widget bernama Output Safelink seperti yang saya tunjukkan pada gambar berikut:
  3. Pada widget ini, kamu akan menemukan isi seperti berikut ini:
    <div class='ninura-center' id='page-is'>
    <div id='output'/>
    </div>/div>
    • Bagian yang saya tandai warna kuning adalah elemen link yang akan muncul. Kamu bisa tempatkan iklan di atas dan bawah kode tersebut untuk meningkatkan CTR iklan kamu.
    • Untuk bagian lainnya mohon jangan diubah.
  4. Jika sudah kamu sesuaikan, silahkan simpan widget dan lihat hasilnya.

Sponsored Article

Untuk membuat sebuah Sponsored Post atau Sponsored Article, silahkan kamu tambahkan label "Sponsor" pada post. Pastikan penggunakan huruf kapital dalam penulisan label. Perbedaan Artikel Sponsor dengan artikel lainnya adalah Author Box, Post Header, dan Post Footer, Iklan In Article dan related post tidak tampil di halaman Artikel Sponsor.

Hal itu diterapkan agar fokus pembaca tidak terpecah oleh konten lain dan konversi dari artikel sponsor tersebut semakin tinggi.

Bagian komentar dan share button tidak disembunyikan karena dua fitur ini dapat meningkatkan interaksi dan mungkin juga bisa menambah tingkat konversi.

Widget

Berikut ini adalah panduan untuk menerapkan beberapa widget di template Ninura 2021 SEO Blogger template ini:

Blog List

Buka Konten
  1. Silahkan Add Widget lalu pilih widget Blog List
  2. Isikan bagian Title sesuai keinginan kamu.
  3. Atur opsi widget yang ingin diaktifkan dan jumlah list yang ingin ditampilkan sesuai keinginan kamu.
  4. Tekan tombol Tambahkan/ Add New Items.
  5. Pada bagian Name/ Nama, silahkan kamu tambahkan Kata sesuai keinginan. Lalu, dibagian URL silahkan kamu tambahkan URL feed seperti ini:
    https://www.ninura.com/feeds/posts/default/-/Blogging
    Silahkan ganti bagian yang saya tandai dengan warna kuning dengan URL blog kamu dan bagian yang berwarna hijau dengan Label dari post yang ingin kamu tunjukkan.
    Catatan: Kamu juga bisa menambahkan feed dari blog orang lain selama blog tersebut menggunakan platform Blogger.
    Jika sudah, silahkan tekan tombol Simpan/ Save.
  6. Silahkan tambahkan item sesuai kebutuhan. Jika sudah, silahkan simpan widget.
Catatan: Usahakan kamu menempatkan widget Blog List pada bagian Blog Feeds yang sudah tersedia di dalam layout agar dapat mengoptimalkan fungsi dan tidak mengganggu halaman post dan halaman statis.

Feed

Buka Konten
  1. Silahkan Add Widget lalu pilih widget Feed
  2. Pada bagian URL Feed silahkan kamu isikan dengan format seperti ini:
    https://www.ninura.com/feeds/posts/default/-/Blogger
    Kemudian, silahkan kamu ganti bagian yang saya tandai dengan warna biru dengan url blog kamu dan yang berwarna hijau dengan label dari post yang ingin kamu tampilkan. Lalu tekan Continue.
  3. Setelah itu, silahkan kamu sesuaikan judul dari widget sesuai keinginan kamu.
  4. Jika sudah, silahkan Simpan Template.
Catatan: Usahakan kamu menempatkan widget Feed pada bagian Blog Feeds yang sudah tersedia di dalam layout agar dapat mengoptimalkan fungsi dan tidak mengganggu halaman post dan halaman statis.

Widget Lainnya

Buka Konten

Silahkan tambahkan widget lainnya seperti biasanya. Kamu juga bisa menempatkan widget dimanapun. Meski begitu, perhatikan bahwa semakin banyak widget maka akan membebani loading blog.

Lazyload

Lazy Load Image (Gambar)

Untuk menerapkan lazy load pada gambar, silahkan gunakan format berikut:

<img title='Ninura 2021 SEO Blogger Template' class='lazy' alt='Ninura 2021 SEO Blogger Template' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' loading='lazy' width='1280' height='720' data-src="https://1.bp.blogspot.com/-h0iJomlHQas/YVuzPWcJ2mI/AAAAAAAABr8/aETkp_IcxsgB2n7X5JKyUiKX8xTeV8FyACLcBGAsYHQ/s0-rw/ninura-2021-seo-blogger-template.jpeg"/>

Silahkan ganti bagian yang saya tandai dengan warna kuning dengan teks yang mendeskripsikan gambar.

Silahkan ganti bagian yang saya tandai dengan warna hijau dengan URL gambar.

Pastikan atribut yang saya tandai dengan warna merah ada pada elemen gambar.

Lazy Load Iframe

Untuk menerapkan lazy load pada iframe (seperti embed video YouTube), silahkan gunakan format berikut:

<iframe class='lazy' data-src="https://www.youtube.com/embed/n08yxNHmPRw" title="YouTube video player"></iframe>

Silahkan ganti bagian yang saya tandai dengan warna kuning dengan teks yang mendeskripsikan konten dalam iframe.

Silahkan ganti bagian yang saya tandai dengan warna hijau dengan URL sumber Iframe.

Pastikan atribut yang saya tandai dengan warna merah ada pada elemen gambar.

Typography

Berikut ini adalah panduan untuk penerapan typography dari template Ninura 2021 SEO Blogger Template. Untuk contoh tampilannya, bisa kamu cek di halaman Typography.

Table of Content

<details open='open'>
<summary>Daftar Isi</summary>
<div id='toc'></div>
</details>

Table

<table class='table'>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Roni</td>
<td>21 years old</td>
<td>Indonesia</td>
</tr>
<tr>
<td>Angela</td>
<td>17 years old</td>
<td>USA</td>
</tr>
<tr>
<td>Astrid</td>
<td>23 years old</td>
<td>Thailand</td>
</tr>
</tbody>
</table>

Blockquote

<blockquote>I left because you are not right.</blockquote>
<blockquote class='quote'>I left because you are not right.<cite>Unknown</cite></blockquote>
Catatan: Untuk menambahkan tanda kutip pada blockquote silahkan tambahkan atribut class='quote' seperti contoh kedua.
Catatan: Untuk menambahkan nama yang dikutip pada blockquote silahkan tambahkan elemen <cite>Unknown</cite> seperti contoh kedua.

Accordion Menu

<details>
<summary>Buka Konten</summary>
isi konten disini.
</details>
<details open='open'>
<summary>Buka Konten</summary>
isi konten disini.
</details>
Catatan: Untuk membuat accordion langsung terbuka diawal, silahkan tambahkan atribut open='open' seperti contoh kedua.

Ordered List

<ol>
<li>Armenian
<ol class="armenian">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol></li>
<li>CJK-Ideografik
<ol class="cjk">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol></li>
<li>Decimal
<ol class="decimal">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol></li>
</ol>
Catatan: Untuk mengubah jenis list, silahkan tambahkan atribut class= seperti contoh. Adapun class yang bisa kamu gunakan adalah seperti list di bawah.
Class List
  1. class='armenian'
  2. class='cjk'
  3. class='decimal'
  4. class='decimal-zero'
  5. class='georgian'
  6. class='hebrew'
  7. class='hiragana'
  8. class='hiragana-iroha'
  9. class='katakana'
  10. class='katakana-iroha'
  11. class='lower-alpha'
  12. class='lower-greek'
  13. class='lower-latin'
  14. class='lower-roman'
  15. class='upper-alpha'
  16. class='upper-greek'
  17. class='upper-latin'
  18. class='upper-roman'

Unordered List

<ul>
<li>Circle
<ul class="circle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul></li>
<li>Disc
<ul class="disc">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul></li>
<li>Square
<ul class="square">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul></li>
</ul>
Catatan: Untuk mengubah jenis list, silahkan tambahkan atribut class= seperti contoh. Adapun class yang bisa kamu gunakan adalah seperti list di bawah.
Class List
  1. class='circle'
  2. class='disc'
  3. class='square'

Gambar

<img src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' data-src='https://1.bp.blogspot.com/-ljwLpjelhh4/YNxFytU0h5I/AAAAAAAADdU/ewjL43RuhTUcgpfHnXVBOX7l2BFJZ3_qACLcBGAsYHQ/s480-rw/Komposisi%2Bbahan%2Bmakanan%2Bminuman%2Bpada%2Bkemasan.jpg' alt='alternative text' title='descriptive text' class='lazy center' loading='lazy' width='480' height='360'/>
Catatan: Untuk mengubah mengatur tampilan gambar, silahkan tambahkan atribut class= seperti contoh. Adapun class yang bisa kamu gunakan adalah seperti list di bawah.
Class List
  1. class='lazy left' untuk meletakkan gambar di sebelah kiri halaman.
  2. class='lazy right' untuk meletakkan gambar di sebelah kanan halaman.
  3. class='lazy center' untuk meletakkan gambar di tengah halaman.
  4. class='lazy full' untuk menampilkan gambar dalam ukuran full width.

Gambar dengan Caption

<table class="tr-caption-container"><tbody><tr><td><img alt="alternative text" class="lazy center" data-src="https://1.bp.blogspot.com/-ljwLpjelhh4/YNxFytU0h5I/AAAAAAAADdU/ewjL43RuhTUcgpfHnXVBOX7l2BFJZ3_qACLcBGAsYHQ/s480-rw/Komposisi%2Bbahan%2Bmakanan%2Bminuman%2Bpada%2Bkemasan.jpg" height="360" loading="lazy" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" title="descriptive text" width="480" /></td></tr><tr><td class="tr-caption">This is the Caption</td></tr></tbody></table>

Iframe

<div class='media-container landscape'><iframe class='lazy' data-src="https://www.youtube.com/embed/n08yxNHmPRw" title="YouTube video player"></iframe></div>
Catatan: Untuk mengubah mengatur tampilan iframe, silahkan tambahkan atribut class= seperti contoh. Adapun class yang bisa kamu gunakan adalah seperti list di bawah.
Class List
  1. class='media-container landscape' untuk video resolusi 16:9
  2. class='media-container portrait' untuk video resolusi 9:16
  3. class='media-container square' untuk video resolusi 1:1

Tombol atau Buttons

<a href='#' class='button'>Donwload</a>
<a href='#' class='button download'>Download</a>
<a href='#' class='button preview'>Demo</a>
<a href='#' class='button install'>Install</a>
<a href='#' class='button playstore'>Install</a>
<a href='#' class='button apple'>Install</a>
<a href='#' class='button play'>Play Video</a>
<a href='#' class='button podcast'>Listen Podcast</a>
Catatan: Untuk mengubah menampilkan button, silahkan tambahkan atribut class='button' seperti contoh. Dan untuk menampilkan icon disamping logo silahkan tambahkan juga salah satu class di bawah.
Class List
  1. class='button download' untuk icon download.
  2. class='button preview' untuk icon view/ preview.
  3. class='button install' untuk icon install.
  4. class='button playstore' untuk icon playstore.
  5. class='button apple' untuk icon apple/ app store.
  6. class='button play' untuk icon play media.
  7. class='button podcast' untuk icon audio atau podcast.

Jika kamu ingin menambahkan icon untuk tombol, silahkan edit melalui CSS atau request melalui kolom komentar agar template dapat diperbaharui.

Untuk mengatur warna button, silahkan ikuti panduan Custom Warna.

Syntax Highlighter

<pre><code>Letakkan kode disini</code></pre>

Penutup

Itulah panduan penggunaan template Ninura 2021 SEO Blogger Template. Jika kamu masih mempunyai pertanyaan, silahkan tanyakan melalui kolom komentar.

Komentar

Sebelum Posting Komentar

Harap berikan komentar yang relevan dengan topik tulisan.
Jangan menyertakan link yang tidak berhubungan dengan konten tulisan. Apabila komentar mengandung link (apalagi yang tidak relevan), maka komentar akan dihapus.
Budayakan sopan santun, hindari penggunaan bahasa yang provokatif, SARA, pornografi.
Kritik dan saran yang membangun untuk konten ataupun untuk blog sangat berarti bagi Ninura.