Blogger Jateng
Home / teknologi

Cara Setting Template VioMagz AMP

Oleh IDMaspur Post a Comment
Cara Setting Template VioMagz AMP

Cara Setting Template VioMagz AMP - Halo sahabat blogger kali ini saya akan membagikan tutorial untuk setting template VioMagz dan mengatasi error AMP agar Valid.

Seperti yang anda tahu bahwa Google semakin gencar mempromosikan penggunaan Accelerated Mobile Page dan mengutamakan indexing bagi situs dengan tampilan mobile yang memiliki wakti pemuatan (loading) cepat.

Cara Setting Template VioMagz AMP agar Valid AMP 100%

Alhasil para pengguna Blogger semakin banyak yang pindah ke AMP,dan dari fenomena tersebut Mas Sugeng memberikan kejutan dengan merilis VioMagz AMP.

Namun sejauh ini belum ada support secara langsung untuk VioMagz versi AMP tersebut karena Mas Sugeng merilisnya secara gratis sebagai hadiah bagi para pelanggannya.

Oleh karena itu disini saya akan membagikan cara setting Template Blogger VioMagz AMP dan cara mengatasinya agar Valid AMP dengan benar.

Berikut ini tutorialnya.

a. Cara Memasang Template VioMagz

Berikut ini langkah-langkah memasnag template viomagz versi amp yang benar.

1. Back Up Template


Sebelum anda mengganti tema ada baiknya untuk mencadangkan template yang sedang anda gunakan saat ini,caranya cukup mudah :

  1. Buka Blogger.com
  2. Sign In dengan Akun Google anda
  3. Masuk ke Dashboard Blogger
  4. Pilih menu Tema
  5. Klik Backup / Pilihan
  6. Lalu pilih Download Tema

Hal ini untuk mengatasi apabila nantinya anda merasa tidak cocok dengan tampilan yang baru sehingga bisa lebih cepat dan mudah kembali ke tampilan yang sebelumnya tanpa mengatur ulang.

2. Memasang Template

Untuk memasang template blogger kamu bisa melakukan dengan mudah seperti biasanya dengan mengupload file .XML melalui menu Tema di Dashboard Blogger.

Namun ada baiknya untuk membuka File .XML template melalui notepad lalu copy-paste semua scriptnya ke kolom HTML Tema di blogger.

Hal ini karena biasanya saat mengunggah file .XML secara langsung biasanya ada sisa-sisa dari Tema Blog yang sebelumnya.

b. Cara Edit Menu Navigasi di VioMagz AMP

Bila biasanya kita hanya perlu mengatur satu menu navigasi dalam VioMagz, maka berbeda dengan versi AMPnya,karena kita perlu mengedit 2 menu navigasi.

Yaitu versi desktop dan versi mobile. Berikut ini tutorialnya :

1. Mengatur Menu Navigasi VioMagz AMP versi Desktop

  • Buka Blogger.com
  • Sign In dengan Akun Anda
  • Masuk ke Dashboard Blogger
  • Pilih menu Tema
  • Lalu cari kode berikut ini :

<!-- menu navigasi header start -->
<ul>
  <li><a href='Link-Tujuan'>Menu</a></li>
  <li><a href='Link-Tujuan'>Menu</a></li>
  <li><a href='Link-Tujuan'>Menu</a></li>
  <li><a href='Link-Tujuan'>Menu</a>
  <ul>
<li><a href='Link-Tujuan'>SubMenu1</a></li>
<li><a href='Link-Tujuan'>SubMenu2</a></li>
<li><a href='Link-Tujuan'>SubMenu3</a></li>
  </ul>
  </li>
  <li><a href='Link-Tujuan'>Menu</a>
  <ul>
<li><a href='Link-Tujuan'>SubMenu1</a></li>
<li><a href='Link-Tujuan'>SubMenu2</a></li>
<li><a href='Link-Tujuan'>SubMenu3</a></li>
<li><a href='Link-Tujuan'>SubMenu4</a></li>
  </ul>
  </li>
</ul>
<!-- menu navigasi header end -->

  • Ganti pada tulisan Link-Tujuan yang sudah saya tandai dengan Bold di kode diatas dengan URL dari halaman/post yang akan kalian pasang di Menu atau SubMenu

2. Menambah dan Mengurangi Menu Navigasi VioMagz AMP versi Desktop

Anda juga bisa menambah maupun mengurangi jumlah menu ataupun submenu di Navigasi VioMagz AMP versi Desktop,berikut ini caranya :

  • Menambah dan Mengurangi Menu

Tambahkan kode berikut untuk Menambah Menu atau Hapus kode berikut untuk Menghapus Menu

<li><a href='Link-Tujuan'>Menu</a></li>

  • Menambah dan Mengurangi SubMenu

Tambahkan kode berikut untuk Menambah Menu atau Hapus kode berikut untuk Menghapus SubMenu
<li><a href='Link-Tujuan'>Menu</a>
  <ul>
<li><a href='Link-Tujuan'>SubMenu1</a></li>
<li><a href='Link-Tujuan'>SubMenu2</a></li>
<li><a href='Link-Tujuan'>SubMenu3</a></li>
<li><a href='Link-Tujuan'>SubMenu4</a></li>
  </ul>
  </li>


3. Mengatur Menu Navigasi VioMagz AMP versi Mobile


Nah yang ketiga adalah cara mengatur menu yang tampil dari samping saat blog diakses menggunakan perangkat mobile.


Berikut ini caranya :

  • Cari kode berikut :

<!-- menu navigasi halaman AMP start -->
<ul class='sidebar'>
  <li><a href='Link-Tujuan'>Menu</a></li>
  <li><a href='Link-Tujuan'>Menu</a></li>
  <li><a href='Link-Tujuan'>Menu</a></li>
  <li><a href='Link-Tujuan'>Menu</a>
</ul>
<!-- menu navigasi halaman AMP end -->

  • Ganti Link-Tujuan dengan URL halaman yang ingin di tampilkan lewat menu dan ganti tulisan Menu dengan Judul/Nama Menu yang ingin di tampilkan.

4. Mengatur Menu Navigasi di Atas Footer


Cari kode berikut :

<!-- menu navigasi footer start -->
<ul>
  <li><a href='Link-Tujuan'>About</a></li>
  <li><a href='Link-Tujuan'>Contact</a></li>
  <li><a href='Link-Tujuan'>Privacy Policy</a></li>
  <li><a href='Link-Tujuan'>Disclaimer</a></li>
</ul>
<!-- menu navigasi footer end -->

Silahkan anda ganti kode yang saya tandai dengan Bold seperti pada tutorial sebelumnya,mulai dari Link Tujuan dan nama-nama Menu.

c. Cara Memasang Header dan Favicon


Berikut ini cara memasang Header dan Favicon VioMagz AMP

1. Memasang Header untuk VioMagz AMP versi Desktop


  • Buka Blogger.com
  • Sign In dengan Akun Anda
  • Masuk ke Dashboard Blogger
  • Pilih menu Tata Letak
  • Lalu klik Header
  • Setelah itu Upload file gambar yang ingin kalian gunakan sebagai header blog

Namun gambar hanya akan tampil bila blog diakses melalui Desktop, agar bisa tampil pada versi mobile anda harus menggunakan satu kode.

Anda bisa mengikuti tutorial di bawah ini.

2. Memasang Header untuk VioMagz AMP versi Mobile


  • Buka Blogger.com
  • Sign In dengan Akun Anda
  • Masuk ke Dashboard Blogger
  • Pilih menu Tema
  • Klik Edit HTML
  • Cari dan Hapus kode berikut
<p class='title alt-blog-logo'><b:include name='title'/></p>

  • Ganti dengan kode berikut : 
<amp-img expr:alt='data:title' height='28' width='159' layout='fixed' src='Link-Gambar-Logo-Header-Blog'>
</amp-img>

  • Anda sesuaikan height/tinggi dan width/lebar yang diatas dengan ukuran gambar,namun tingginya maksimal hanya 28px sedangkan untuk lebar bisa anda sesuaikan.
  • Ganti juga Link-Gambar-Logo-Header-Blog dengan URL dari gambar yang akan dijadikan Header
  • Bila sudah silahkan klik Simpan Tema

3. Cara Memasang Favicon

  • Buka Blogger.com
  • Sign In dengan Akun Anda
  • Masuk ke Dashboard Blogger
  • Pilih menu Tata Letak
  • Kllik Favicon
  • Lalu Upload file Favicon.ico yang sudah anda buat

d. Cara Memasang Komentar di VioMagz AMP


Nah karena di AMP tidak bisa menggunakan sistem komentar versi blogger,maka kolom komentar hanya muncul bila blog diakses melalui Desktop.

Untuk menampilkan kolom komentar mobile anda membutuhkan bantuan pihak ke-3 seperti sistem komentar Facebook atau Disqus.

e. Cara Membuat Postingan yang Valid AMP Blogger

Untuk tutorial mengedit postingan agar valid AMP anda bisa membacanya di artikel berikut ini => Cara Menulis Artikel Valid AMP di Blogger

f. Cara Mengatasi Error Javascript Not Allowed di VioMagz AMP

Untuk error ini anda cukup mematikan NavBar melalui tata letak.

  • Buka Blogger.com
  • Sign In dengan Akun Anda
  • Masuk ke Dashboard Blogger
  • Pilih menu Tata Letak
  • Klik NavBar
  • Lalu pilih Off



g. Mengatasi Error Attribute:'xmlns'

Berikutnya adalag Errot Attribute:'xmlns' ,biasanya ini muncul setelah anda menambah,mengurangi atau mengubah widget.

Cara mengatasinya cukup mudah,anda cari kode berikut :

<html b:css='false' b:responsive='true' b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Lalu ganti dengan kode berikut :

<html b:css='false' b:responsive='true' b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='id'>

Penutup

Itulah Cara Setting Template VioMagz AMP,anda bisa mendapatkan template tersebut secara gratis bila anda membeli VioMagz ke Mas Sugeng secara langsung.

Cukup sekian tutorialnya,selamat mencoba.

Post a Comment for "Cara Setting Template VioMagz AMP"