Additional Settings for Fletro Pro Theme

Additional settings specific to Fletro Pro theme

Nonaktifkan 2 Kolom Grid di Tampilan Seluler

Dalam mode Grid Anda bisa memilih untuk mempertahankan gaya 2 kolom di tamplan seluler atau mengubahnya menjadi 1 kolom, masing-masing gaya memiliki kelebihan, dengan 1 kolom membuat thumbnail dan judul menjadi lebih besar serta lebih terbaca, gaya 2 kolom lebih efisien terhadap ruang jadi pengguna tidak perlu scroll lebih lama untuk melihat daftar postingan.

2 Column Grid

Untuk mengaktifkan/menonaktifkan gaya 2 kolom di seluler, Anda bisa mencari tag pembuka <body> pada HTML tema blog Anda, tepat di bawah tag <body> Anda akan menemukan kode seperti ini:

<!--[ Show only one grid column in Mobile ]-->
<b:class cond='data:view.isMultipleItems' name='oGrd'/>
<!--[ Show only one grid column in Mobile ]-->
<!--<b:class cond='data:view.isMultipleItems' name='oGrd'/>-->

Lakukan seperti contoh di atas agar fitur ini bekerja dengan baik.


Aktifkan Grid Mode Secara Permanen

Pada template Fletro Pro Anda akan menemukan fitur tambahan yang memungkinkan Anda untuk mengubah layout postingan dari Daftar(default) menjadi Grid, bagaimanapun Anda mungkin ingin menggunakan mode Grid secara permanen, tidak jauh berbeda dengan cara mengganti Darkmode Anda harus menambahkan dan mengganti beberapa kode di bawah ini pada kode HTML blog Anda.

Pertama, tambahkan kode di bawah ini tepat setelah tag <body>:

<b:class cond='data:view.isMultipleItems' name='grD'/>

Kedua, temukan dan ganti dua kode berikut sesuai contoh yang tertera:

document.querySelector('#mainCont').classList.add('grD') : document.querySelector('#mainCont').classList.remove('grD')
document.querySelector('#mainCont').classList.remove('grD') : document.querySelector('#mainCont').classList.add('grD')
document.querySelector("#mainCont").classList.add("grD"):document.querySelector("#mainCont").classList.remove("grD")
document.querySelector("#mainCont").classList.remove("grD"):document.querySelector("#mainCont").classList.add("grD")

Perbaiki Tombol Komentar pada Menu Melayang Ketika Diganti Komentari Disqus

Pada versi terbaru Fletro Pro kami menambahkan menu melayang pada bagian bawah layar (hanya di seluler) yang berisi tombol berbagi, ganti ukuran font, dan tombol komentar, ini adalah shortcode untuk memudahkan pengguna memberikan tanggapan lanjutan setelah membaca konten di blog.

Semua tombol berkerja dengan baik termasuk tombol komentar, sampai komentar Disqus diaktifkan tombol pada menu tersebut menjadi tidak berfungsi, kami sudah mempelajari penyebabnya dan cara untuk mengatasi masalah ini adalah dengan mengganti seluruh kode atau menonaktifkannya.

Ini adalah kode tombol komentar yang bisa Anda ubah sesuai panduan di bawah:

<b:if cond='data:post.allowComments and data:widgets.Blog.first.allBylineItems.comments'>
  <label class='bBt bCmt bIc' for='forComments'>
    <b:if cond='data:post.numberOfComments &gt; 0'>
      <b:message name='messages.numberOfComments'>
        <b:param expr:value='data:post.numberOfComments' name='numComments'/>
      </b:message>
      <b:else/>
      <data:messages.postAComment/>
    </b:if>
  </label>
</b:if>
<b:if cond='data:post.allowComments and data:widgets.Blog.first.allBylineItems.comments'>
  <a class='bBt bCmt bIc' href='#comment'>
    <data:messages.joinTheConversation/>
  </a>
</b:if>
<!--<b:if cond='data:post.allowComments and data:widgets.Blog.first.allBylineItems.comments'>
  <label class='bBt bCmt bIc' for='forComments'>
    <b:if cond='data:post.numberOfComments &gt; 0'>
      <b:message name='messages.numberOfComments'>
        <b:param expr:value='data:post.numberOfComments' name='numComments'/>
      </b:message>
      <b:else/>
      <data:messages.postAComment/>
    </b:if>
  </label>
</b:if>-->

Disable 2 Column Grid in Mobile View

In Grid mode you can choose to keep the 2 column style in mobile view or change it to 1 column, each style has its advantages, with 1 column making thumbnails and headings bigger and more legible, 2 column style is more space efficient for users no need to scroll any longer to see a list of posts.

2 Column Grid

To enable/disable the 2 column style on mobile, you can search the <body> opening tag in your blog's theme HTML, just below the <body> tag you'll find code like this:

<!--[ Show only one grid column in Mobile ]-->
<b:class cond='data:view.isMultipleItems' name='oGrd'/>
<!--[ Show only one grid column in Mobile ]-->
<!--<b:class cond='data:view.isMultipleItems' name='oGrd'/>-->

Do like the example above so that this feature works properly.


Enable Grid Mode Permanently

In Fletro Pro template you will find an additional feature that allows you to change the post layout from List(default) to Grid, however you may want to use Grid mode permanently, not much different from changing Darkmode you have to add and replace some of the code below this in your blog's HTML code:

First, add the code below right after the <body> tag:

<b:class cond='data:view.isMultipleItems' name='grD'/>

Second, find and replace the following two codes according to the example shown:

document.querySelector('#mainCont').classList.add('grD') : document.querySelector('#mainCont').classList.remove('grD')
document.querySelector('#mainCont').classList.remove('grD') : document.querySelector('#mainCont').classList.add('grD')
document.querySelector("#mainCont").classList.add("grD"):document.querySelector("#mainCont").classList.remove("grD")
document.querySelector("#mainCont").classList.remove("grD"):document.querySelector("#mainCont").classList.add("grD")

Fix Comment Button on Floating Menu When Replaced with Disqus Comments

In the latest version of Fletro Pro we added a floating menu at the bottom of the screen (only on mobile) which contains a share button, change font size, and a comment button, this is a shortcode to make it easier for users to provide advanced feedback after reading content on the blog.

All buttons work fine including the comment button, until Disqus comments are activated the button on the menu becomes not working, we have studied the cause and the way to solve this problem is to replace the entire code or disable it.

This is the code for the comment button that you can change according to the guide below:

<b:if cond='data:post.allowComments and data:widgets.Blog.first.allBylineItems.comments'>
  <label class='bBt bCmt bIc' for='forComments'>
    <b:if cond='data:post.numberOfComments &gt; 0'>
      <b:message name='messages.numberOfComments'>
        <b:param expr:value='data:post.numberOfComments' name='numComments'/>
      </b:message>
      <b:else/>
      <data:messages.postAComment/>
    </b:if>
  </label>
</b:if>
<b:if cond='data:post.allowComments and data:widgets.Blog.first.allBylineItems.comments'>
  <a class='bBt bCmt bIc' href='#comment'>
    <data:messages.joinTheConversation/>
  </a>
</b:if>
<!--<b:if cond='data:post.allowComments and data:widgets.Blog.first.allBylineItems.comments'>
  <label class='bBt bCmt bIc' for='forComments'>
    <b:if cond='data:post.numberOfComments &gt; 0'>
      <b:message name='messages.numberOfComments'>
        <b:param expr:value='data:post.numberOfComments' name='numComments'/>
      </b:message>
      <b:else/>
      <data:messages.postAComment/>
    </b:if>
  </label>
</b:if>-->