Additional Settings for Median UI Theme

Additional settings specific to Median UI theme

Mengubah Tampilan Halaman Beranda

Pada tema ini tersedia 3 gaya berbeda untuk halaman beranda sebagai alternatif bagi Anda yang kurang menyukai gaya standar tema ini.

Kami bekerja keras untuk memudahkan Anda merubah gaya halaman beranda agar tidak repot-repot menambahkan kode CSS baru. Pada Edit HTML tema, cari tag pembuka <body> dan Anda akan menemukan kode seperti di bawah ini:

<!--[ Change basic layout style in desktop, try 'LS-2' or 'LS-3' ]-->
<!--<b:class name='LS-2'/>-->
<!--[ Change basic layout style in desktop, try 'LS-2' or 'LS-3' ]-->
<b:class name='LS-2'/>

Aktifkan kode di atas seperti pada contoh untuk mengubahnya menjadi gaya ke-2 atau ganti atribut name='LS-2' menjadi name='LS-3 untuk mengganti gaya ke-3


Mengubah Tampilan Menu Navigasi Mobile

Mobile Navigation

Menu navigasi pada tema ini juga memiliki 3 gaya berbeda, gambar di atas adalah salah satunya. Untuk mencoba bagian ini Anda harus menemukan tag pembuka <body> dalam HTML tema Anda.

Jika sudah menemukan tag <body> Anda akan melihat kode seperti di bawah ini:

<!--[ Enable tag below to change Mobile Menu style, try 'MN-2' or 'MN-3' ]-->
<b:class name='MN-2 mobS'/>
<!--[ Enable tag below to change Mobile Menu style, try 'MN-2' or 'MN-3' ]-->
<!--<b:class name='MN-2 mobS'/>-->

Ganti nilai atribut MN-2 menjadi MN-3 untuk mencoba gaya lainnya atau nonaktifkan untuk kembali ke gaya bawaan tema.


Ciutkan Menu Navigasi di Tampilan Desktop

<!--[ Enable tag below to minimize Navigation Menu in desktop ]-->
<b:class name='hdMn'/>
<!--[ Enable tag below to minimize Navigation Menu in desktop ]-->
<!--<b:class name='hdMn'/>-->

Di bagian tag <body> yang sama Anda juga akan menemukan kode seperti di atas, fungsi dari kode tersebut adalah untuk menciutkan atau meminimal menu navigasi pada desktop, tujuannya adalah untuk memberi ruang lebih pada konten supaya lebih nyaman untuk dibaca.

Bagaimanapun, Anda bisa memutuskan untuk mengaktifkan/nonaktifkan fitur ini kapanpun, cukup tambahkan tag comment <!-- --> untuk menonaktifkannya seperti pada contoh di atas.


Aktifkan/Nonaktifkan 2 Kolom Grid di Tampilan Seluler

2 Column Grid

Fitur ini berfungsi untuk menetapkan daftar postingan dengan gaya 2 kolom atau 1 kolom seperti pada gambar di atas, kami menyadari tidak semua orang menyukai tampilan 2 kolom grid, karna itu kami menambahkan fungsi ini agar pengguna bisa memilih mana yang lebih disukainya.

Kode untuk mengaktifkan/nonaktifkan fungsi ini juga terdapat dalam tag pembuka <body>, tepat di bawah tag <body> Anda akan melihat kode seperti ini:

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

Silahkan aktifkan/nonaktifkan kode di atas untuk mencoba fungsi ini.


Mengaktifkan Halaman Produk di Postingan

Halaman Produk hanya tersedia untuk template Median UI, Anda bisa melihat contoh tampilannya disini. Selain menambahkan label Product pada postingan, kami juga sudah menyediakan template postingan dalam bundle produk yang harus Anda gunakan untuk mode halaman ini:

  1. Buka folder 'Post and Pages' dalam Google Drive,
  2. temukan file dengan nama Product Post.txt
  3. salin semua kode yang ada,
  4. pada editor postingan Blogger, silahkan pindah ke mode HTML dengan cara klik icon lalu pilih Tampilan HTML
  5. Tempel semua kode yang sudah disalin tadi ke dalam postingan.
  6. Edit dan tambahkan media pendukung seperti nama, gambar produk serta daftar harga sebelum menyimpan postingan Anda.

Nama label tersebut juga bisa diubah, Anda hanya perlu temukan dan ganti beberapa kode seperti dibawah ini:

&quot;Product&quot;

Changing the Homepage Style

In this theme there are 3 different styles for the home page as an alternative for those of you who don't like the standard style of this theme.

We're working hard to make it easy for you to style your homepage so you don't have to bother adding new CSS code. In the Edit HTML theme, search for the opening <body> tag and you will find the code as below:

<!--[ Change basic layout style in desktop, try 'LS-2' or 'LS-3' ]-->
<!--<b:class name='LS-2'/>-->
<!--[ Change basic layout style in desktop, try 'LS-2' or 'LS-3' ]-->
<b:class name='LS-2'/>

Activate the above code as in the example to change it to the 2nd style or replace the attribute name='LS-2' to name='LS-3 to change the 3rd style.


Changing Mobile Navigation Style

Mobile Navigation

The navigation menu in this theme also has 3 different styles, the image above is one of them. To try this section you'll need to find the opening <body> tag in your theme's HTML.

If you have found the <body> tag you will see the code as below:

<!--[ Enable tag below to change Mobile Menu style, try 'MN-2' or 'MN-3' ]-->
<b:class name='MN-2 mobS'/>
<!--[ Enable tag below to change Mobile Menu style, try 'MN-2' or 'MN-3' ]-->
<!--<b:class name='MN-2 mobS'/>-->

Change the value of MN-2 attribute to MN-3 to try other styles or disable it to revert to the theme's default style.


Collapse Navigation Menu in Desktop View

<!--[ Enable tag below to minimize Navigation Menu in desktop ]-->
<b:class name='hdMn'/>
<!--[ Enable tag below to minimize Navigation Menu in desktop ]-->
<!--<b:class name='hdMn'/>-->

In the same <body> tag section you will also find code as above, the function of that code is to collapse or minimize the navigation menu on the desktop view, the goal is to give more space to the content to make it more comfortable to read.

However, you can decide to enable/disable this feature at any time, just add a comment tag <!-- --> to disable it as in the example above.


Enable/Disable 2 Column Grid in Mobile View

2 Column Grid

This feature serves to set a list of posts with a 2-column or 1-column style as in the image above, we realize that not everyone likes the 2-column grid view, that's why we added this function so that users can choose which one they prefer.

The code to enable/disable this function is also contained in the opening <body> tag, just below the <body> tag. You will see code like this:

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

You can enable/disable above code to try this function.


Activating Product Pages in Posts

The Product page is only available for Median UI template, you can see an example of how it looks here. In addition to adding Product label in the post, we have also provided a post template in the product bundle which you should use for this page mode:

  1. Open the 'Post and Pages' folder in Google Drive,
  2. find the file named Product Post.txt
  3. copy all existing code,
  4. in Blogger post editor, switch to HTML mode by clicking icon and then selecting HTML View
  5. Paste all the code that was copied earlier into the post.
  6. Edit and add supporting media such as name, product image and price list before saving your post.

The label name can also be changed, you just need to find and replace some code as below:

&quot;Product&quot;