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>
- 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
- Buka Blogger.com > Template / Theme > Edit HTML
- Cari lagi tulisan text
<!-- Change ID ra-5cb015801edd3625 with your code | https://www.addthis.com/ -->
- 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
- Cari kode text
<!-- Change ID ca-pub-XXXXXX Google AdSense | https://www.google.com/adsense/start/-->
- Ganti kode yang ada di HTML
<amp-ad data-ad-client="ca-pub-XXXXXX" data-ad-slot="XXXXXXX"
ganti tulisanXXXXX
dengan 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"
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
Mas... Template boshjn ini ada versi non amp nggak?
BalasHapusTemplate yang dipakai blog ini adalah versi Non AMP nya
Hapus