Cara Menganti Menu Link Navigasi AMP & Non AMP

Berbagi :
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

Daftar Isi [Tutup]

    Apakah Halaman ini membantu?
    Lebih baru
    Lebih lama
    Olavia
    Olavia Technical Content Writer, Menyukai dunia Technical IT, Produk Digital & Blogging. Suka berbagi satu sama lain.

    0 Komentar

    Posting Komentar

    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