Additional Customization (Optional)

Some of the most asked customization guides

Menambahkan Nomor Pada Heading dan Menyembunyikannya di Table of Content

Di beberapa tema yang mendukung Table of Content(berikutnya kami singkat ToC) otomatis maupun semi-otomatis, judul pada ToC mengambil data dari tag heading <h2> dan <h3> dua tingkat dengan penomoran otomatis pada setiap sub-judul.

Masalahnya terkadang penulis juga menambahkan nomor pada sub-judul di artikel mereka, hal ini menyembabkan munculnya duplikat numor pada ToC. Banyak yang menanyakan bagaimana cara untuk memperbaikinya, jadi kami melakukan sedikit trik dengan memanfaatkan kode CSS.

1. Menambahkan CSS

.pS .h::before{content:attr(data-text)}

di atas adalah kode CSS yang harus Anda tambahkan pada blog Anda, Anda bisa menambahkan kode tersebut tepat sebelum kode ]]></b:skin> atau sebelum kode /*]]>*/</style> untuk pengguna versi AMP (Accelerated Mobile Pages).

Cara paling mudah untuk menambahkan CSS adalah melalui desainer tema Blogger:

  • Pada dashboard Blogger, Klik Tema > Sesuaikan
  • klik tab Lanjutan,
  • klik menu dropdown 'Theme Color'
  • scroll kebagian bawah sampai Anda menemukan menu 'Tambahkan CSS'
    Add CSS
  • isi kode CSS pada kolom yang disediakan lalu klik Simpan
2. Menerapkan di Tag Heading

Agar kode CSS tersebut bekerja silahkan edit tag heading Anda menjadi seperti di bawah ini:

<h2>Title_here</h2>
<h2 class='h' data-text='1. '>Title_here</h2>

Ganti nomor pada atribut data-text sesuai urutan tag heading tersebut.


Sembunyikan Deskripsi di Bagian Bawah Judul Postingan

Dalam halaman postingan deskripsi penelusuran akan tampil tepat di bawah judul artikel, ini berlaku untuk semua tema. Bagaimanapun Anda tetap bisa menghapusnya, silahkan ikuti cara di bawah ini:

  • Pada dashboard Blogger, klik Tema
  • Klik icon pada tombol Sesuaikan
  • Klik Edit HTML, Anda akan diarahkan ke halaman pengeditan.
  • Cari kode seperti di bawah ini, Anda bisa menghapus atau menonaktifkannya dengan cara menambahkan tag comment <!-- -->
    <!-- Post Description -->
    <div class='pD'><data:blog.metaDescription/></div>
    <!-- Post Description -->
    <!-- <div class='pD'><data:blog.metaDescription/></div> -->

Menonaktifkan Terjemahan di Paragraf Tertentu

Dalam kondisi tertentu Anda mungkin ingin agar beberapa paragraf dalam artikel Anda tidak dapat diterjemahkan menggunakan Google Translate atau alat terjemahan lainnya.

Untuk melakukannya, ilahkan tambahkan class='notranslate' pada paragraf yang tidak ingin diterjemahkan, contoh:

<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
<p class='notranslate'>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

Menambahkan Google Analytics

Anda bisa langsung menambahkan ID Analytics melalui setelan Blogger tanpa perlu mengedit HTML tema blog. Pada tema ini sudah terinstal script Google Analytics yang hanya akan aktif jika Anda menambahkan ID Analytics, jadi ini tidak akan memberatkan blog Anda.

  • Pada dashboard Blogger, pilih menu Setelan,
  • pada kolom pertama Anda akan menemukan ID Property Google Analytics,
  • klik link tersebut, akan muncul menu pop-up berisi kolom untuk menuliskan ID Analytics,
  • Tempel kode ID Analytics Anda pada kolom tersebut,
  • klik Simpan.

Panduan ini juga berlaku untuk versi AMP (Accelerated Mobile Pages)


Setelan Pop-up Komentar

Kami menyediakan 3 alternatif gaya untuk komentar Blogger, Anda bisa menentukan untuk tetap mempertahankan gaya melayang atau menggunakan tampilan sederhana.

Untuk menonaktifkan fitur komentar melayang, silahkan temukan dan hapus atau nonaktifkan tag di bawah ini dengan cara menambahkan tag comment <!-- dan -->.

<!--[ Delete tag below to disable Pop-up comments ]-->
<b:class name='cmBr fixL'/>
<!--[ Delete tag below to disable Pop-up comments ]-->
<!--<b:class name='cmBr fixL'/>-->

Anda juga dapat menggunakan tampilan komentar sederhana tanpa tombol show/hide dengan menonaktifkan tag dibawah ini:

<!--[ Delete tag below to disable show/hide comment ]-->
<b:include cond='data:post.allowComments' name='post-commentButton'/>
<!--[ Delete tag below to disable show/hide comment ]-->
<!--<b:include cond='data:post.allowComments' name='post-commentButton'/>-->

Menambahkan Komentar di Halaman Statis

Di setelan dasar tema ini, kami menonaktifkan fitur komentar pada halaman tunggal/statis karena kami menilai itu tidak terlalu penting dan dibutuhkan pada sebuah halaman. Tetapi jika ingin mencobanya Anda bisa mengubah beberapa kode dibawah ini sesuai dengan contoh:

<b:tag class='pCmnts' cond='data:post.allowComments and data:view.isPost and !data:view.isPreview' id='comment' name='div'>
<b:tag class='pCmnts' cond='data:post.allowComments and data:view.isSingleItem and !data:view.isPreview' id='comment' name='div'>
<b:include cond='data:post.allowComments and data:view.isPost and !data:view.isPreview' data='post' name='threadedComments-modifV3'/>
<b:include cond='data:post.allowComments and data:view.isSingleItem and !data:view.isPreview' data='post' name='threadedComments-modifV3'/>

Menambahkan Link Aktif di Profil Blogger

Di update terbaru Anda bisa langsung menambahkan link ke deskripsi profil Blogger, contohnya bisa Anda lihat pada profil admin di blog demo.

  • Pada setelan Blogger, gulir ke bagian bawah sampai Anda menemukan link Profil Pengguna,
  • klik link tersebut Anda akan diarahkan ke halaman baru,
  • gulir ke bagian bawah sampai Anda menemukan kolom Perkenalkan Diri Anda,
  • Isi deskripsi profil Anda pada kolom tersebut,
  • jika ingin menambahkan link salin kode di bawah ini ke deskrispi profil Anda.
    <a href='https://www.your_domain.com'>your_domain.com</a>
  • Klik Simpan.

Mengaktifkan Dark Mode Secara Permanen

Sebagian dari Anda mungkin menginginkan menggunakan mode gelap secara permanen dan menjadikan mode terang sebagai alternatif, ini mungkin sedikit sulit tapi Anda bisa menerapkan ini dengan mengganti beberapa kode HTML blog Anda.

Langkah pertama tambahkan kode di bawah ini sesudah tag <body>:

<b:class name='drK'/>

Langkah selanjutnya kami sudah menandai beberapa bagian kode yang harus Anda ubah beserta contohnya, tugas Anda hanya mencari beberapa kode yang sudah ditandai di bawah ini (kode ditempatkan secara terpisah di beberapa bagian HTML blog):

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

Nonaktifkan Tombol LoadMore

Tombol LoadMore berfungsi untuk menggantikan tombol navigasi bawaan Blogger. Selain lebih sederhana tombol ini juga dapat digunakan secara langsung tanpa harus memuat ulang halaman untuk melihat artikel selanjutnya.

Walau bagaimanapun Anda tetap bisa menonaktifkan fungsi ini dengan cara temukan dan hapus kode di bawah ini:

<!--[ Load More - Delete this section if you want to disable this feature ]-->
<b:include cond='data:view.isHomepage or data:view.url == data:blog.homepageUrl.canonical path &quot;search&quot;' name='post-paginationMore'/>
<!--[ Load More - Delete this section if you want to disable this feature ]-->
<!--<b:include cond='data:view.isHomepage or data:view.url == data:blog.homepageUrl.canonical path &quot;search&quot;' name='post-paginationMore'/>-->

Adding Numbers to Headings and Hiding them in Table of Content

In some themes that support automatic or semi-automatic Table of Content(next we will briefly describe ToC), the headings in the ToC take data from the two-level <h2> and <h3> heading tags with automatic numbering for each sub-heading.

The problem is that sometimes authors also add numbers to the sub-headings in their articles, this causes duplicate numbers to appear in the ToC. A lot of people are asking how to fix this, so we did a little trick using CSS code.

1. Adding CSS

.pS .h::before{content:attr(data-text)}

Above is the CSS code that you must add to your blog, you can add it right before ]]></b:skin> or before /*]]>*/</style> code for AMP (Accelerated Mobile Pages) version users.

The easiest way to add CSS is through the Blogger theme designer:

  • On Blogger dashboard, Click Themes > Customize
  • click Advanced tab,
  • click on 'Theme Color' dropdown menu
  • scroll down until you find 'Add CSS' menu
    Add CSS
  • fill in CSS code in the column provided then click Save
2. Apply to Heading Tags

In order for the CSS code to work, please edit your heading tag to be like this:

<h2>Title_here</h2>
<h2 class='h' data-text='1. '>Title_here</h2>

Change the number in data-text attribute according to the order of heading tags.


Remove Description at the Bottom of Post Title

In post page the search description will appear just below the article title, this applies to all themes. However you can still delete it, please follow the method below:

  • On the Blogger dashboard, clickThemes
  • Click icon on the Customize button
  • Click Edit HTML, you will be directed to the editing page.
  • Find the code below, you can delete or disable it by adding a comment tag <!-- -->
    <!-- Post Description -->
    <div class='pD'><data:blog.metaDescription/></div>
    <!-- Post Description -->
    <!-- <div class='pD'><data:blog.metaDescription/></div> -->

Disabling Subtitles in Certain Paragraphs

In certain condition, you may want that some paragraphs in your article cannot be translated using Google Translate or other translation tools.

To do that, you can add class='notranslate' in paragraphs that you don't want to translate, for example:

<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
<p class='notranslate'>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

Add Google Analytics

You can directly add Analytics ID via Blogger settings without needing to edit blog theme HTML. In this theme already installed Google Analytics script which will only be active if you add Analytics ID, so this will not burden your blog.

  • On Blogger dashboard, select Settings menu,
  • in the first column you will find the Google Analytics Property ID,
  • click theat link, a pop-up menu will appear containing a column to write down the Analytics ID,
  • Paste your Analytics ID code in that column,
  • click Save.

This guide also applies to the AMP (Accelerated Mobile Pages) version


Pop-up Comment Settings

We provide 3 alternative styles for Blogger comments, you can choose to keep the floating style or use a simple view.

To disable the floating comment feature, please find and delete or disable the tag below by adding comment <!-- and --> tags.

<!--[ Delete tag below to disable Pop-up comments ]-->
<b:class name='cmBr fixL'/>
<!--[ Delete tag below to disable Pop-up comments ]-->
<!--<b:class name='cmBr fixL'/>-->

You can also use a simple comment view without the show/hide button by disabling the following tag:

<!--[ Delete tag below to disable show/hide comment ]-->
<b:include cond='data:post.allowComments' name='post-commentButton'/>
<!--[ Delete tag below to disable show/hide comment ]-->
<!--<b:include cond='data:post.allowComments' name='post-commentButton'/>-->

Adding Comments on Static Pages

In the basic settings of this theme, we disabled the comment feature on single/static pages because we judged it to be not very important and needed on a page. But if you want to try it you can change some of the code below according to the example:

<b:tag class='pCmnts' cond='data:post.allowComments and data:view.isPost and !data:view.isPreview' id='comment' name='div'>
<b:tag class='pCmnts' cond='data:post.allowComments and data:view.isSingleItem and !data:view.isPreview' id='comment' name='div'>
<b:include cond='data:post.allowComments and data:view.isPost and !data:view.isPreview' data='post' name='threadedComments-modifV3'/>
<b:include cond='data:post.allowComments and data:view.isSingleItem and !data:view.isPreview' data='post' name='threadedComments-modifV3'/>

Adding Active Link in Blogger Profile

In the latest update you can directly add a link to the Blogger profile description, for example you can see in the admin profile on the demo blog.

  • In Blogger settings, scroll down until you find the User Profile link,
  • Click the link you will be directed to a new page,
  • scroll down until you find the Introduce Yourself column,
  • Fill in your profile description in that column,
  • if you want to add a link copy the code below to your profile description.
    <a href='https://www.your_domain.com'>your_domain.com</a>
  • Click Save.

Activating Dark Mode Permanently

You may want to permanently use dark mode and make light mode an alternative, this may be a little difficult but you can implement this by changing some of your blog's HTML code.

The first step is to add the code below after the <body> tag:

<b:class name='drK'/>

The next step we have marked some parts of the code that you need to change along with examples, your task is just to find some code that has been marked below (the code is placed separately in some parts of the blog's HTML):

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

Disabling LoadMore Button

The LoadMore button is used to replace Blogger's default navigation buttons. Besides being simpler, this button can also be used directly without having to reload the page to view the next article.

However, you can still disable this function by finding and removing the code below:

<!--[ Load More - Delete this section if you want to disable this feature ]-->
<b:include cond='data:view.isHomepage or data:view.url == data:blog.homepageUrl.canonical path &quot;search&quot;' name='post-paginationMore'/>
<!--[ Load More - Delete this section if you want to disable this feature ]-->
<!--<b:include cond='data:view.isHomepage or data:view.url == data:blog.homepageUrl.canonical path &quot;search&quot;' name='post-paginationMore'/>-->

Posting Komentar

To avoid SPAM, all comments will be moderated before being displayed.