Kustomisasi Tema Fletro Pro 6.1 untuk Blogger

Fletro pro merupakan tema dari jagodesain yang unik dan menarik. Kami juga membelinya untuk blog ini. beberapa kustomisasi tidak banyak dijelaskan oleh pembuat, namun semuanya bisa diatasi dengan baik bila kita mendalaminya. Dikutip dari website resmi jagodesain, ada beberapa keunggulan baru dari tema fletro pro 6.1 yaitu:

Tampilan yang lebih fresh
Penggunaan CSS Variable untuk pemberian warna
Lebih mudah merubah link navigasi
Hampir semua warna bisa dirubah pada Desainer Tema Blogger
Tombol share button yang lebih simpel
Menghentikan pengembangan versi Lite

untuk proses kustomisasi, ada beberapa hal yang perlu kalian perhatikan pada tutorial berikut.

Table of Contents

Bagaimana cara memasang Tema Fletro Pro di Blogger?

Untuk Menginstal Tema Fletro Pro, Anda harus Login ke dasbor Blogger dan Buka bagian Tema.
Sekarang ambil cadangan file Tema yang ada dan klik Opsi Edit HTML dari menu drop down.
Sekarang Ganti semua kode dengan kode tema Fletro Pro baru dan simpan perubahannya.
Sekarang tema Fletro Pro sudah terpasang di situs web Blogger Anda.

Cara Menambahkan Daftar Isi di Tema Fletro Pro

Jika Anda menggunakan tema Fletro pro, Anda dapat menggunakan fitur Daftar Isi asli yang membantu Anda membuat Daftar Isi dengan satu klik. Ini adalah Daftar Isi semi otomatis di Blogger di mana Anda dapat menambahkan sedikit kode untuk secara otomatis menghasilkan daftar isi di halaman itu berdasarkan tajuk yang ada di dalam posting atau halaman. Gunakan kode berikut.

<!--[ Script to activate ToC ]-->
<details class="sp toc">
  <summary data-show="Show all" data-hide="Hide all">Table of Contents</summary>  
<div class='tocInner'>
  <input class='tocInput hidden' id='daftar-isi01' type='checkbox'/>
  <div class='tocContent' id='tocContent'>
  </div>
</div>
<script>document.addEventListener('DOMContentLoaded', () =>
  new TableOfContents({
      from: document.querySelector('#postBody'),
      to: document.querySelector('#tocContent')
  }).generateToc()
);</script> 
  </details>

Nonaktifkan Deskripsi Pencarian Di Bawah Judul Posting

<div class='pDesc'><data:blog.metaDescription/></div>

Ubah Posisi Tombol Bagikan di Halaman Posting

Untuk mengubah posisi tombol share di halaman posting Anda perlu melakukan perubahan pada kode di bawah ini

 <!--[ Share button ]-->
  <b:include cond='data:view.isPost and !data:view.isPreview and data:post.shareUrl' name='postInfoShare'/>

Kotak Kode

dalam tema Fletro Pro Untuk menambahkan kotak kode di Blogger, Anda perlu menambahkan kode di bawah ini di dalam bagian HTML dan kemudian mengurai kode yang ingin Anda gunakan menggunakan alat parse HTML dan menambahkannya di antara tag kode.

 <pre class="html"><code> </code></pre>

Kode Tombol Download

<a class='extLink' href='#' target='_blank'>External Link</a>
<a class='button' href='#'>Button Text</a>
<a class='button' href='#'><i class='icon download'></i>Download the PDF</a>
<a class='button' href='#'><i class='icon demo'></i>Demo_link</a>

Tombol Download dan Demo dalam satu baris

<div class='buttonInfo'>
  <a class='button' href='#'><i class='icon download'></i>Download</a>
  <a class='button outline' href='#'>Demo</a>
</div>

Tombol WhatsApp

<a class='button' href='#'>
  <svg viewBox='0 0 64 64' style='fill:#fff; margin-right:12px;'><path d='M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z'/></svg>
  <span>WhatsApp Btn</span>
</a>

Tombol Buy

<a class='button' href='#'>
  <svg class='line' viewBox='0 0 24 24' style='stroke:#fff; margin-right:12px;'><g transform='translate(2.000000, 2.500000)'><path d='M0.7501,0.7499 L2.8301,1.1099 L3.7931,12.5829 C3.8701,13.5199 4.6531,14.2389 5.5931,14.2359094 L16.5021,14.2359094 C17.3991,14.2379 18.1601,13.5779 18.2871,12.6899 L19.2361,6.1319 C19.3421,5.3989 18.8331,4.7189 18.1011,4.6129 C18.0371,4.6039 3.1641,4.5989 3.1641,4.5989'></path><line x1='12.1251' y1='8.2948' x2='14.8981' y2='8.2948'></line><path d='M5.1544,17.7025 C5.4554,17.7025 5.6984,17.9465 5.6984,18.2465 C5.6984,18.5475 5.4554,18.7915 5.1544,18.7915 C4.8534,18.7915 4.6104,18.5475 4.6104,18.2465 C4.6104,17.9465 4.8534,17.7025 5.1544,17.7025 Z'></path><path d='M16.4347,17.7025 C16.7357,17.7025 16.9797,17.9465 16.9797,18.2465 C16.9797,18.5475 16.7357,18.7915 16.4347,18.7915 C16.1337,18.7915 15.8907,18.5475 15.8907,18.2465 C15.8907,17.9465 16.1337,17.7025 16.4347,17.7025 Z'></path></g></svg>
  <span>Buy now!</span>
</a>

Download File Box

<div class='downloadInfo'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fileType' data-text='zip'></span>
  <div class='fileName'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fileSize'>200kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button fileLink' aria-label='Download' href='#'><i class='icon download'></i></a>
</div>

blockquote

 <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<blockquote class='style-1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit</blockquote>

Note Box

<p class='note'>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>

<p class='note noteAlert'>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>

Lazyload iframe YouTube

<!--[ Lazy youtube ]-->
<div class='lazyYoutube' data-embed='dP0zzfiCJDY'>
  <div class='playBut'>
    <svg class='svg-play' viewbox='0 0 213.7 213.7'><polygon class='triangle' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='circle' cx='106.8' cy='106.8' r='103.3'></circle></svg>
  </div>
</div>

Kesimpulan

Ada beberapa opsi penyesuaian lagi yang tersedia dengan tema ini yang akan saya perbarui di posting ini nanti. Jika Anda merasa artikel ini bermanfaat, beri tahu kami di media sosial dengan membagikan postingan ini. Simpan postingan ini untuk dipakai esok esok hari. terima kasih

Terima kasih tutorial dari: techylead.in

Sahabat Tekno

Search Suggest