documentation

Template Median UI tidak jauh berbeda dengan template kostum lainnya dari segi penggunaan atau cara instalnya. Yang membedakan hanyalah tampilan template dan fitur yang ditawarkan serta pengoptimalan loading template dan SEO-nya.

Panduan instal

Cara paling direkomendasikan untuk menginstal template ini adalah dengan cara copy HTML agar tidak terjadi duplikat widget dan tampilan template sama seperti pada demo nya. Resikonya adalah semua widget atau kode meta tag pada template sebelumnya terhapus jadi pastikan sebelum menyalin dan menempelkan seluruh kode template Anda membackup kode-kode penting terlebih dahulu sebelum melakukan cara ini:

Buka template Median UI yang sudah Anda download melalui notepad
Masuk ke menu Tema > pilih Edit HTML
Copy semua kode template yang ada didalam file hasil download lalu paste ke text editor yang muncul.
Terakhir klik tombol Save theme atau tombol icon yang ada di kanan atas editor HTML template.

Setting meta tags

Bagian ini penting diganti untuk menunjang SEO blog Anda, pastikan anda membackup meta tag template sebelum nya ketika hendak menggunakan template ini

Penjalasan tag title atau judul blog

Berfungsi untuk menampilkan judul dari situs atau halaman tertentu pada blog pada hasil pencarian. Misal ada sebuah artikel baru yang dipublish maka judul artikel tersebut akan otomatis tertulis pada dalam kode ini, hasil pada mesin pencari kurang lebih seperti gambar dibawah ini:

Anda bisa memodifikasi bagian ini dengan menambahkan beberapa kalimat pada judul nya seperti pada contoh dibawah ini:

<b:if cond='data:view.isHomepage'><title><data:blog.pageTitle/> : Pusat Informasi handphone Terbaru</title></b:if>

Hasilnya akan seperti gambar dibawah ini:

Setelan bawaan pada template ini hanya menampilkan judul artikel saja pada tag title dan hasil pencarian, kodenya seperti dibawah ini:

<b:if cond='!data:view.isMultipleItems'><title><data:blog.pageName/></title></b:if>

Jika Anda ingin menambahkan judul blog juga pada hasil pencarian seperti ini misalnya :

Tutorial Mengubah Tampilan Menu Navigasi Mobile - Median UI

Yang perlu Anda lakukan adalah mengubah kode <title> diatas menjadi seperti dibawah ini:

<b:if cond='!data:view.isMultipleItems'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>

Meta Image

Jika Anda share link blog Anda yang menggunakan template ini di Whatsapp atau FB ataupun sosial media lainnya, maka akan muncul gambar default template ini sebagai thumbnailnya. Untuk mengubahnya silahkan ganti bagian yang ditandai menggunakan URL dari gambar banner atau logo blog Anda.

  <!-- meta Image -->
  <b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    <b:else/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
      <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
      <b:else/>
      <meta content='https://1.bp.blogspot.com/-mxCVT67mucg/.../s320/median-img.png' property='og:image'/>
    </b:if>
  </b:if>
  <b:if cond='data:view.isMultipleItems'>
    <meta content='https://1.bp.blogspot.com/-mxCVT67mucg/.../s320/median-img.png' name='twitter:image'/>
    <b:else/>
    <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
  </b:if>

Cari juga bagian ini dan ubah url gambar yang ditandai dengan logo blog Anda

<b:includable id='postMetadataJSONPublisher'>
 &quot;publisher&quot;: {
    &quot;@type&quot;: &quot;Organization&quot;,
    &quot;name&quot;: &quot;Jago Desain&quot;,
    &quot;logo&quot;: {
      &quot;@type&quot;: &quot;ImageObject&quot;,
      &quot;url&quot;: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeUkTbhRk6rRJx9WP7O1O3gIyHx556kQfCS1Pl94VuWHp8ZTMh50-6aYO2HiMRD5eVOGpEKwnnrJgzq04iMqPWOpdsI3RE9eOOFkUi3Yj0k-43jqjPQhUAw6FzpoLdOOjGNKAfL9KW6t7E/s1600/jagodesain-org.png&quot;,
      &quot;width&quot;: 206,
      &quot;height&quot;: 60
    }
  },
</b:includable>

Keyword

Untuk menentukan kata kunci pada hasil pencarian pada artikel atau postingan Anda

  <!-- Meta Keywords -->
  <meta expr:content='data:blog.title + &quot;, &quot; + data:blog.pageName' name='keywords'/>

Jika Anda ingin menambahkan keyword lain untuk pencarian blog anda ubahlah kode diatas menjadi seperti dibawah ini, pisahkan menggunakan tanda koma untuk menambahkan keyword lainnya.

  <!-- Meta Keywords -->
  <b:if cond='data:view.isSingleItem'>
    <meta expr:content='data:blog.title + ", " + data:blog.pageName' name='keywords'/>
    <b:else/>
      <meta expr:content='data:blog.title + ", " + data:blog.pageName + ", keyword satu, keyword dua, keyword seterusnya"' name='keywords'/>
  </b:if>

Site Owners

Merupakan bagian meta untuk menunjukan data kepemilikan blog yang berisi informasi seputar

  <!-- Site Owner -->
  <meta content='Muhammad Maki' name='Author'/> // Ganti dengan nama Anda
  <link href='https://www.facebook.com/kiibao' rel='me'/>
  <link href='https://www.facebook.com/kiibao' rel='author'/>
  <link href='https://www.facebook.com/kiibao' rel='publisher'/>
  <meta content='100001578783517' property='fb:admins'/> // ID akun Faceook Anda
  <meta content='696750553739909' property='fb:pages'/> // ID page/halaman Facebook Anda (Kosongkan jika tidak ada)
  <meta content='1804789006468790' property='fb:app_id'/> // ID App Facebook Anda (Kosongkan jika tidak ada)
  <meta content='https://www.facebook.com/100001578783517' property='article:author'/>
  <meta content='https://www.facebook.com/100001578783517' property='article:publisher'/>
  <meta content='' name='twitter:site'/>
  <meta content='' name='twitter:creator'/>

Warna Addres Bar

Bagian ini berfungsi untuk mengubah warna Address bar pada browser Chrome dan browser lainnya yang mendukung

  <!-- Theme Color -->
  <meta content='#005af0' name='theme-color'/>
  <meta content='#005af0' name='msapplication-navbutton-color'/>
  <meta content='#005af0' name='apple-mobile-web-app-status-bar-style'/>
  <meta content='yes' name='apple-mobile-web-app-capable'/>

Ubah bagian yang ditandai pada kode diatas dengan kode warna pilihan Anda

Kode tracking

Berfungsi untuk verifikasi Google Search Console dan Bing Webmaster. Jika belum punya, hapus saja semua baris kode ini. Jika sudah ada, silakan ganti bagian yang ditandai pada kode dibawah ini:

  <!-- Sife Verification -->
  <meta content='eOkJqbD1CfzsteobkhlDoaA6kQ1Vry3HJSpluwvV5_g' name='google-site-verification'/> // Verifikasi Google search console
  <meta content='' name='msvalidate.01'/> // Verifikasi Bing webmaster
  <meta content='' name='p:domain_verify'/> // Verifikasi domain di Pinterest
  <meta content='' name='majestic-site-verification'/> // Verifikasi Majestic SEO
  <meta content='Jago Desain' name='copyright'/> // Copyright Blog

Mengubah warna dasar template

Sekarang Anda tidak perlu repot-repot untuk mengubah warna semisal warna link, tombol, dark mode dan sebagainya satu-persatu lewat EDIT HTML template. Ya, semua warna bisa Anda ubah langsung melalui Desainer Tema Blogger sambil melihat langsung preview penerapan warna pilihan Anda pada template ini.

Pada Blogger tampilan baru klik Tema > Sesuaikan
Pilih bagian mana yang ingin Anda ubah warnanya, lalu klik simpan untuk menerapkan pada blog Anda.

Link credit pada footer

Sebagai informasi tambahan, pada bagian <footer> template ini, kami menambahkan link credit pembuat template. Agar tidak mengganggu kami menambahkan opacity:0 supaya link credit tidak terlihat.

Link credit ini tidak mengikat/wajib atau harus ada pada blog Anda, anda boleh menghapusnya atau membiarkannya sebagai bentuk apresiasi kepada creator template.

Jika Anda ingin menghapusnya, carilah dan hapus kode dibawah ini pada <footer> blog Anda.

<span class='creator'>Theme by <a href='https://www.jagodesain.com'>Jago Desain</a></span>

Table of contents