aeGFvQW9Bc0NHanRDRDRlRnBuR3ZwanRRQmpNWnVsTXlCZ1dBb0FvNHVqaHZTQ3NDQnVzQ3hYZVNEZVl2cElTMngxcW1wUUpZPT0=
Kunjungi juga Channel Youtube saya. Klik disini

Widget Settings and Customization (Optional)

Template Setting

In this custom template there are basic settings to change or adjust some of the features in the blogger template. Such as: on/off progress bar scroll indicator, google translation, bookmark posts, setting the number of recent posts displayed based on labels, related posts, and so on.

  • On Blogger dashboard, click Layout
  • Select Template Settings > Edit
  • click Save.
var tempSet = {
progScrollbar: true,
numRecentPs: 6,
szThumbRecentPs: 120,
googleTranslate: true,
bookmarkPost: true,
bkmarkTx1: "Bookmark Post",
bkmarkTx2: "The list of favorite posts does not exist yet...",
bkmarkTx3: "View all posts",
relatedPost: true,
numRelatedPs: 6,
szThumbRelatedPs: 280,
szThumbRelatedPsApp: 100,
progDL0: true,
progDL0t: 10,
progDlTx1: "Preparing download link in <span>",
progDlTx2: "</span> seconds...",
progDlTx3: "Please wait...",
progDL1: true,
progDL1t: 7,
};
  • progScrollbar : on/off the progress bar scroll indicator feature. boolean values ​​(true/false).
  • numRecentPs : set the number of recent posts to be displayed based on a certain label. integer/number values.
  • szThumbRecentPs : set the post thumbnail size for the most recent posts by label. integer/number values.
  • googleTranslate : on/off the google translate feature. boolean values ​​(true/false).
  • bookmarkPost : on/off the post bookmark feature. boolean values ​​(true/false).
  • bkmarkTx1, ... : Sets the text for the post bookmark feature. string values.
  • relatedPost : on/off related post feature. boolean values ​​(true/false).
  • numRecentPs : set the number of related posts to be displayed. integer/number values.
  • szThumbRecentPs : set the post thumbnail size for related posts for article posts. integer/number values.
  • szThumbRelatedPsApp : set the post thumbnail size for related posts for apps and games posts. integer/number values.
  • progDL0 : on/off progress feature when click download step 1. boolean value (true/false).
  • progDL0t : set how long it takes to progress when click download step 1. integer value.
  • progDlTx1, ... : set the text on the download progress feature step 1. string values.
  • progDL1 : on/off progress feature when click download step 2. boolean value (true/false).
  • progDL1t : set how long it takes to progress when click download step 2. integer value.

Setting recent posts widget by specific label.

  • On Blogger dashboard, click Layout
  • Select Featured Apps or Games > Edit
  • Change Title value as heading text
  • Change the value of Content according to the name of the post label to be displayed
  • click Save.

Widget Blog

Some guidelines for Blog Widgets or post settings, such as some custom post modes found in certain templates, activating the Dark Mode feature permanently etc.

Using FullPage Features

The Fullpage feature can be used to change the post layout or appearance of the page by removing sidebar element which aims to provide more space so that blog readers/visitors can focus more on the content.

To use it, simply add the 'Fullpage' label to your post as shown in the image below:

Can the label name above be changed?

Of course, you can also change the label name above with another name as you wish. To do this you have to edit the HTML template first, you can find a code like this in your template and change the highlighted part:

&quot;zFullpage&quot;

Hint:
There's more than one of the above code in the template that you have to change all of them, use the find and replace feature to instantp editing by pressing ctrl + shift + R in the template HTML editor.

Using Sponsored Pages

Sponsored Page allows you to add paid posts (advertisements/reviews) for certain products on your blog, in this mode the author information will not be displayed.

Just like the previous feature, to use the Sponsored page you must add 'Sponsored' label in the post you want. The label name can also be changed, you can find and replace some codes as below:

&quot;Sponsored&quot;

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

Changing the Maximum Number of Lines in Post Title and Snippet

We limit the maximum number of lines for post titles with a limit of 3 lines and summary/snippets of posts with a limit of 2 lines on the home page, posts with long titles may be truncated. If you don't want this to happen, replace the CSS code marked below:

.aTtl a, .pSnpt{color:inherit; display:-webkit-box;-webkit-line-clamp:3; ... }

.pSnpt{-webkit-line-clamp:2; ... }
Description:
  • Change the numbers 3 and 2 in the code above to determine the maximum line limit,
  • Change display:-webkit-box; be display:block; to disable the max row limit.

Post Timestamp Format

Post timestamp writing is set by default with MMM d, y format, you can't change this format via Layout or Blogger Settings.

We've done our research and determined this format is the most concise and easy for readers to understand, if you don't like this format the only way to change it is to edit your HTML template.

Before that, please study the date format in HTML on the page: unicode.org

Next in the HTML template, please look for the code MMM d, y, MMMM d, y, MMM d, YYYY, MMMM d, YYYY. Each template may have a different code, so look for one of those codes. An example of complete writing in an HTML template is like this:

<time class='aTtmp pTtmp pbl' expr:data-text='format(data:post.date, &quot;MMM d, y&quot;)' expr:datetime='data:post.date.iso8601' expr:title='&quot;Published: &quot; + data:post.date format &quot;MMMM d, y&quot;'/>

Disable Post Update Date

In our theme the post date will automatically change based on the last date the post was updated, this is important to notify readers that the article they are reading is not outdated.

We don't understand if anyone wants to remove this feature on their blog, but here's the code that must be changed to disable this feature:

<b:includable id='postTimestamps'>
<b:if cond='data:post.lastUpdated != data:post.date'>
<time class='aTtmp pTtmp upd' data-date='Updated:' expr:data-text='format(data:post.lastUpdated, &quot;MMMM d, YYYY&quot;)' expr:data-time='format(data:post.lastUpdated, &quot;MMM d, YYYY&quot;)' expr:datetime='data:post.lastUpdated.iso8601' expr:title='&quot;Last updated: &quot; + data:post.lastUpdated format &quot;MMMM d, YYYY&quot;'/>
<b:else/>
<time class='aTtmp pTtmp pbl' expr:data-text='format(data:post.date, &quot;MMMM d, YYYY&quot;)' expr:data-time='format(data:post.lastUpdated, &quot;MMM d, YYYY&quot;)' expr:datetime='data:post.date.iso8601' expr:title='&quot;Published: &quot; + data:post.date format &quot;MMMM d, YYYY&quot;'/>
</b:if>
</b:includable>
<b:includable id='postTimestamps'>
<time class='aTtmp pTtmp pbl' expr:data-text='format(data:post.date, &quot;MMMM d, YYYY&quot;)' expr:data-time='format(data:post.lastUpdated, &quot;MMM d, YYYY&quot;)' expr:datetime='data:post.date.iso8601' expr:title='&quot;Published: &quot; + data:post.date format &quot;MMMM d, YYYY&quot;'/>
</b:includable>

Disable Reading Time Feature

The Reading Time feature functions to determine the estimated time spent reading the entire article, the time displayed automatically changes according to the length or number of characters in an article.

However, you can also disable this feature by removing the code as below:

<!--[ Reading time ]-->
<div class='pRd pIn'><bdi id='rdTime'/></div>
<script>/*<![CDATA[*/ function get_text(el) { ... maincount = Math.round(counted); document.getElementById('rdTime').innerHTML = maincount + ' min read'; /*]]>*/</script>

Disable Description Under Post Title

This description will automatically appear if the search description on post is enabled, this description will also appear in search results later. Disabling or hiding this feature will not remove the post description from search results.

Find and delete the code below to hide this feature:

<!-- Post Description -->
<div class='pDesc'><data:blog.metaDescription/></div>

Widget Profile

Enable/Disable Link To Blogger Profile Page

Profile widgets in Blogger are divided into 2 types: Individual Profile widgets and Team Profile widgets. If there's only one admin or author on the blog, the Individual Profile will be displayed. If there is more than one author, the Team Profile will be displayed.

In the Profile widget, each author's name will automatically be directed to the Blogger profile page, to maintain privacy you can disable this link by changing the code below:

<b:include name='userProfileLink'/>
<b:include name='userProfileNameOnly'/>

Pengaturan Template

Pada kustom template ini ada pengaturan dasar untuk mengubah atau mengatur beberapa fitur yang ada pada template blogger. Seperti : on/off progress bar scroll indicator, google transalte, bookmark post, mengatur jumlah recent post yang ditampilkan berdsarkan label, related post, dan lain sebagainya.

  • Pada dashboard Blogger, klik Tata Letak
  • Pilih Template Setting > Edit
  • klik Simpan.
var tempSet = {
progScrollbar: true,
numRecentPs: 6,
szThumbRecentPs: 120,
googleTranslate: true,
bookmarkPost: true,
bkmarkTx1: "Bookmark Post",
bkmarkTx2: "The list of favorite posts does not exist yet...",
bkmarkTx3: "View all posts",
relatedPost: true,
numRelatedPs: 6,
szThumbRelatedPs: 280,
szThumbRelatedPsApp: 100,
progDL0: true,
progDL0t: 10,
progDlTx1: "Preparing download link in <span>",
progDlTx2: "</span> seconds...",
progDlTx3: "Please wait...",
progDL1: true,
progDL1t: 7,
};
  • progScrollbar : on/off fitur progress bar scroll indikator. nilai value boolean (true/false).
  • numRecentPs : mengatur jumlah postingan terbaru yang akan ditampilkan berdasarkan label tertentu. nilai value integer/angka.
  • szThumbRecentPs : mengatur ukuran thumbnail post pada postingan terbaru berdasarkan label. nilai value integer/angka.
  • googleTranslate : on/off fitur google translate. nilai value boolean (true/false).
  • bookmarkPost : on/off fitur bookmark post. nilai value boolean (true/false).
  • bkmarkTx1, ... : mengatur teks pada fitur bookmark post. nilai value string.
  • relatedPost : on/off fitur related post. nilai value boolean (true/false).
  • numRecentPs : mengatur jumlah related post yang akan ditampilkan. nilai value integer/angka.
  • szThumbRecentPs : mengatur ukuran thumbnail post pada related post untuk postingan artikel. nilai value integer/angka.
  • szThumbRelatedPsApp : mengatur ukuran thumbnail post pada related post untuk postingan apps dan games. nilai value integer/angka.
  • progDL0 : on/off fitur progress saat klik download step 1. nilai value boolean (true/false).
  • progDL0t : mengatur berapa lama waktu progress saat klik download step 1. nilai value integer/angka.
  • progDlTx1, ... : mengatur teks pada fitur progress download step 1. nilai value string.
  • progDL1 : on/off fitur progress saat klik download step 2. nilai value boolean (true/false).
  • progDL1t : mengatur berapa lama waktu progress saat klik download step 2. nilai value integer/angka.

Pengaturan widget postingan terbaru berdarkan label tertentu.

  • Pada dashboard Blogger, klik Tata Letak
  • Pilih Featured Apps atau Games > Edit
  • Ubah nilai Judul sebagai teks heading
  • Ubah nilai Konten sesuai nama label postingan yang akan ditampilkan
  • klik Simpan.

Widget Blog

Beberapa panduan untuk Widget Blog atau setelan postingan, seperti beberapa mode custom postingan yang terdapat di template tertentu, mengaktifkan fitur Dark Mode secara permanen dan lain sebagainya.

Menggunakan Fitur FullPage

Fitur Fullpage dapat digunakan untuk merubah tata letak postingan atau merubah tampilan halaman dengan menghilangkan elemen sidebar yang bertujuan untuk memberi ruang lebih agar pembaca/pengunjung blog bisa lebih fokus ke konten.

Untuk menggunakannya cukup tambahkan label 'zFullpage' pada postingan Anda.

Apakah nama label di atas bisa diubah?

Tentu, Anda juga bisa merubah nama label di atas dengan nama label lain sesuai keinginan. Untuk melakukannya Anda harus mengedit HTML template terlebih dahulu, silahkan temukan kode seperti ini pada template Anda lalu ubah bagian yang ditandai:

&quot;zFullpage&quot;

Petunjuk:
Terdapat lebih dari satu kode di atas dalam template yang Anda harus ubah semuanya, gunakan find and replace fitur untuk mempercepat pengeditan dengan menekan ctrl + shift + R di editor HTML template.

Menggunakan Halaman Sponsored

Sponsored Page memungkinkan Anda menambahkan postingan berbayar (iklan/review) untuk produk tertentu dalam blog, dalam mode ini informasi penulis tidak akan ditampilkan.

Sama seperti fitur sebelumnya, untuk menggukanan halaman Sponsor Anda harus menambahkan label 'Sponsored' di postingan yang Anda inginkan. Nama label juga bisa diubah, temukan dan ganti beberapa kode seperti di bawah ini:

&quot;Sponsored&quot;

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

Mengubah Jumlah Baris Maksimal pada Judul dan Ringkasan Postingan

Kami membatasi jumlah baris maksimal untuk judul postingan dengan batas 3 baris dan ringkasan/cuplikan postingan dengan batar 2 baris di halaman beranda, postingan dengan judul yang panjang mungkin saja akan terpotong. Jika Anda tidak ingin hal ini terjadi, gantilah kode CSS bertanda di bawah ini:

.aTtl a, .pSnpt{color:inherit; display:-webkit-box;-webkit-line-clamp:3; ... }

.pSnpt{-webkit-line-clamp:2; ... }
Keterangan:
  • Ubah angka 3 dan 2 pada kode di atas untuk menentukan batas baris maksimal,
  • Ubah display:-webkit-box; menjadi display:block; untuk menonaktifkan pembatasan baris maksimal.

Format Stempel Waktu Postingan

Penulisan stempel waktu postingan diatur secara baku dengan format MMM d, y, Anda tidak bisa merubah format ini melalui Tata letak atau Setelan Blogger.

Kami sudah melakukan riset dan menentukan format ini yang paling ringkas dan mudah difahami oleh pembaca, jika Anda tidak menyukai format ini satu-satunya cara untuk merubahnya adalah dengan mengedit HTML template Anda.

Sebelum itu silahkan pelajari terlebih dahulu format penulisan tanggal pada HTML di halaman: unicode.org

Selanjutnya pada HTML template silahkan cari kode MMM d, y, MMMM d, y, MMM d, YYYY, MMMM d, YYYY. Setiap template mungkin memiliki kode berbeda, jadi carilah salah satu dari kode tersebut. Contoh penulisan lengkap dalam HTML template adalah seperti ini:

<time class='aTtmp pTtmp pbl' expr:data-text='format(data:post.date, &quot;MMM d, y&quot;)' expr:datetime='data:post.date.iso8601' expr:title='&quot;Published: &quot; + data:post.date format &quot;MMMM d, y&quot;'/>

Nonaktifkan Tanggal Pembaruan Postingan

Pada tema kami tanggal postingan akan otomatis berubah berdasarkan tanggal terakhir postingan diperbarui, ini penting untuk memberitahu pembaca kalau artikel yang sedang dibacanya tidak usang.

Kami tidak mengerti jika ada orang yang ingin menghapus fitur ini dalam blognya, tapi ini kode yang harus diubah untuk menonaktifkan fitur ini:

<b:includable id='postTimestamps'>
<b:if cond='data:post.lastUpdated != data:post.date'>
<time class='aTtmp pTtmp upd' data-date='Updated:' expr:data-text='format(data:post.lastUpdated, &quot;MMMM d, YYYY&quot;)' expr:data-time='format(data:post.lastUpdated, &quot;MMM d, YYYY&quot;)' expr:datetime='data:post.lastUpdated.iso8601' expr:title='&quot;Last updated: &quot; + data:post.lastUpdated format &quot;MMMM d, YYYY&quot;'/>
<b:else/>
<time class='aTtmp pTtmp pbl' expr:data-text='format(data:post.date, &quot;MMMM d, YYYY&quot;)' expr:data-time='format(data:post.lastUpdated, &quot;MMM d, YYYY&quot;)' expr:datetime='data:post.date.iso8601' expr:title='&quot;Published: &quot; + data:post.date format &quot;MMMM d, YYYY&quot;'/>
</b:if>
</b:includable>
<b:includable id='postTimestamps'>
<time class='aTtmp pTtmp pbl' expr:data-text='format(data:post.date, &quot;MMMM d, YYYY&quot;)' expr:data-time='format(data:post.lastUpdated, &quot;MMM d, YYYY&quot;)' expr:datetime='data:post.date.iso8601' expr:title='&quot;Published: &quot; + data:post.date format &quot;MMMM d, YYYY&quot;'/>
</b:includable>

Nonaktifkan Fitur Reading Time

Reading Time befungsi untuk menentukan perkiraan waktu yang dihabiskan untuk membaca keseluruhan artikel, waktu yang ditampilkan otomatis berubah sesuai dengan panjang atau banyaknya karakter dalam sebuah artikel.

Bagaimanapun, Anda juga bisa menonaktifkan fitur ini dengan cara menghapus kode seperti dibawah ini:

<!--[ Reading time ]-->
<div class='pRd pIn'><bdi id='rdTime'/></div>
<script>/*<![CDATA[*/ function get_text(el) { ... maincount = Math.round(counted); document.getElementById('rdTime').innerHTML = maincount + ' min read'; /*]]>*/</script>

Nonaktifkan Deskripsi di Bawah Judul Postingan

Deskripsi ini akan otomatis muncul jika deskripsi penelusuran pada postingan diaktifkan, deskripsi ini juga yang akan muncul pada hasil pencarian nantinya. Menonaktifkan atau menyembunyikan fitur ini tidak akan menghilangkan deskripsi postingan pada hasil pencarian.

Silahkan temukan dan hapus kode dibawah ini untuk menyembunyikan fitur ini:

<!-- Post Description -->
<div class='pDesc'><data:blog.metaDescription/></div>

Widget Profile

Aktifkan/Nonaktifkan Link Menuju Halaman Profil Blogger

Widget Profile dalam Blogger terbagi 2 macam: widget Profile Individual dan Profile Team. Jika hanya terdapat satu admin atau penulis di blog maka Profile Individual yang ditampilkan. Jika lebih dari satu penulis maka Profile Team yang akan ditampilkan.

Dalam widget Profile, setiap nama penulis akan otomatis mengarah ke halaman profil Blogger, untuk menjaga privasi Anda bisa menonaktifkan link ini dengan cara mengganti kode di bawah ini:

<b:include name='userProfileLink'/>
<b:include name='userProfileNameOnly'/>
Baca juga :
aplikasi dan tutorial

1 komentar

  1. try again..
• Tinggalkan komentar sesuai dengan topik tulisan.
• Ceklis / Centang Beri Tahu Saya (Supaya saya langsung merespons)

Terima Kasih.......