Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Menganti Menu Link Navigasi AMP & Non AMP

Cara Menganti Menu Link Navigasi AMP & Non AMP

Untuk mendapatkan template blogger AMP, silahkan untuk membuka URL ini dulu | Syarat dan ketentuan berlaku.

Baca juga :Cara menganti template blogger

Pembukaan

Pastikan sebelum mengedit tema untuk menghapus kode dibagian <html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' 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'>

Hapus bagian kode yang sudah ditandai warna merah agar tema tetap valid AMP.

Pastikan Anda membaca panduan dibawah ini dengan teliti dan benar.

Menganti LinkList Menu versi AMP

Buka Blogger.com > Klik Template / Theme > Edit HTML

Cari tulisan dengan cara CTRL+F <!-- LinkList Menu AMP | Only Mobile -->

<ul class="sidebar">
<!-- LinkList Menu AMP | Only Mobile -->
<li><a href="/"><svg id="nes-16" viewBox="0 0 24 24">
<path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"></path>
</svg>AMP Email</a>
</li>
<li><a href="/"><svg id="nes-16" viewBox="0 0 24 24">
<path d="M12.25 1.47C11.55 1.42 10.82 1.58 10.17 1.96C8.41 2.97 7.81 5.21 8.82 6.96L16.16 19.66C17.17 21.42 19.41 22 21.17 21C22.92 20 23.5 17.75 22.5 16L15.18 3.3C14.54 2.2 13.43 1.56 12.25 1.47M6.82 6.76L1.5 16A3.67 3.67 0 0 0 1 17.83A3.67 3.67 0 0 0 4.67 21.5A3.67 3.67 0 0 0 7.84 19.66V19.67L11 14.19C9.65 11.89 8.27 9.6 7.03 7.23C6.95 7.08 6.88 6.92 6.83 6.76ZL16.4 5Z"></path></svg>AMP AdSense</a></li>
<li><a href="/"><svg id="nes-16" viewBox="0 0 24 24">
<path d="M19,4C20.11,4 21,4.9 21,6V18A2,2 0 0,1 19,20H5C3.89,20 3,19.1 3,18V6A2,2 0 0,1 5,4H19M19,18V8H5V18H19Z"></path>
</svg>AMP Website</a></li>
<li><a href="/"><svg id="nes-16" viewBox="0 0 24 24">
<path d="M12.89,3L14.85,3.4L11.11,21L9.15,20.6L12.89,3M19.59,12L16,8.41V5.58L22.42,12L16,18.41V15.58L19.59,12M1.58,12L8,5.58V8.41L4.41,12L8,15.58V18.41L1.58,12Z"></path>
</svg>AMP Code</a></li>
<li><a href="/"><svg id="nes-16" viewBox="0 0 24 24">
<path d="M1,10V12A9,9 0 0,1 10,21H12C12,14.92 7.07,10 1,10M1,14V16A5,5 0 0,1 6,21H8A7,7 0 0,0 1,14M1,18V21H4A3,3 0 0,0 1,18M21,3H3C1.89,3 1,3.89 1,5V8H3V5H21V19H14V21H21A2,2 0 0,0 23,19V5C23,3.89 22.1,3 21,3Z"></path>
</svg>AMP Feed</a></li>
<li><a href="/"><svg id="nes-16" viewBox="0 0 24 24"><path d="M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z"></path>
</svg>AMP HTML5</a></li>
<!-- LinkList Menu AMP End -->
</ul>

Penjelasan :

  • Edit href='/' dengan Link URL halaman yang Anda inginkan.
  • Ganti icon SVG dibagian kode <path d="M1,10V12A9,9 0 0,1 10,21H12C12,14.92 7.07,10 1,10M1,14V16A5,5 0 0,1 6,21H8A7,7 0 0,0 1,14M1,18V21H4A3,3 0 0,0 1,18M21,3H3C1.89,3 1,3.89 1,5V8H3V5H21V19H14V21H21A2,2 0 0,0 23,19V5C23,3.89 22.1,3 21,3Z"></path>

    Baca cara menganti icon SVG diblogger

  • Ganti tulisan text AMP Email dan lainnya dengan text Anda.
  • Menambah link menu <li><a href="/"><svg id="nes-16" viewBox="0 0 24 24"> <path d="kodeIconSVG"></path> </svg>Text Kamu</a> </li>

Menganti Menu LinkList versi Non AMP

Cari lagi tulisan <!-- LinkList Menu Non AMP -->

<ul>
<!-- LinkList Menu Non AMP -->
<li><a href="/">Home</a></li>
<li><a href="#">Hijab</a></li>
<li><a href="#">Pahsmina</a></li>
<li class="has-sub"><span class="submenu-button"></span><a href="#">Clothing</a>
<ul>
<li><a href="#">Hijab</a></li>
<li><a href="#">Dress</a></li>
</ul>
</li>
<li class="has-sub"><span class="submenu-button"></span><a href="#">Fashion</a>
<ul>
<li><a href="#">Hijab</a></li>
<li><a href="#">Model</a></li>
<li><a href="#">Pashmina</a></li>
<!-- LinkList Menu Non AMP End -->
</ul>
</li>
</ul>

Penjelasan :

  • Ganti tanda ( # ) dibagian kode href='#' dengan URL halaman Anda.
  • Menambahkan LinkList Menu <li><a href="#">Hijab</a></li>
  • Menambahkan Menu LinkList menjadi dropdown
    <li class="has-sub">
    <span class="submenu-button"></span>
    <a href="#">Sub Menu</a>
    <ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    </ul>
    </li>

Klik tombol " SIMPAN " untuk hasilnya.

Menganti ID Addthis Widget Share Bottom

Pastikan Anda sudah memiliki / mendaftar akun Addthis untuk mendapatkan kode ID widget sesuai blog kamu.
  1. Buka Blogger.com > Template / Theme > Edit HTML
  2. Cari lagi tulisan text <!-- Change ID ra-5cb015801edd3625 with your code | https://www.addthis.com/ -->
  3. Ganti kode yang berwarna merah dengan ID akun Addthis kamu.<amp-addthis data-pub-id="ra-5cb015801edd3625 data-widget-id="a2et"

Menganti Kode Iklan Sticky Google AdSense

  1. Cari kode text <!-- Change ID ca-pub-XXXXXX Google AdSense | https://www.google.com/adsense/start/-->
  2. Ganti kode yang ada di HTML <amp-ad data-ad-client="ca-pub-XXXXXX" data-ad-slot="XXXXXXX" ganti tulisan XXXXXdengan kode AdSense kamu

Menganti ID Komentar Disqus

  • Cari tulisan didalam template shortname=https-id-rianseo-com Ganti dengan kode ID Disqus kamu.

Membuat Postingan Artikel Valid AMP

Untuk membuat postingan yang benar dan valid AMP silahkan baca panduan membuat postingan valid AMP.

Penutup

Jika masih ada yang kurang dipahami silahkan untuk menulis komentarnya yang nantinya admin bantu jawab

2 komentar untuk "Cara Menganti Menu Link Navigasi AMP & Non AMP"

  1. Mas... Template boshjn ini ada versi non amp nggak?

    BalasHapus
    Balasan
    1. Template yang dipakai blog ini adalah versi Non AMP nya

      Hapus

Kami memiliki kebijakan dalam berkomentar di Blog ini :

— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan

NB :Komentar yang melanggar tidak akan ditampilkan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini