Situs berbagi informasi tentang teknologi terupdate

Gapleh Amp Theme Documentation

Dokumentasi dan Tutorial Template Gapleh Amp

Artikel ini berisi dokumentasi, tutorial, dan penjelasan lengkap seputar tema Blogger (Blogspot) Gapleh Amp. Jika ingin melihat jenis font yang digunakan, cara membuat tombol, blockquote, table, syntax highlighter, dan atribut lainnya, silakan kunjungi artikel Gaya dan Tipografi Gapleh Amp

1. Cara Install

Berikut adalah cara memasang template Blogger Gapleh Amp. Ada dua cara yang bisa dipilih:

1.1. Salin HTML (Direkomendasikan)

Cara ini direkomendasikan karena akan langsung menghasilkan tampilan yang 100% sama dengan versi demo Gapleh Amp. Resikonya adalah semua isi widget seperti kode iklan, kode Histats, dll akan hilang. Jadi pastikan simpan dulu semua kode widget tersebut sebelum melakukan cara ini.

Masuk ke menu Theme (Tema) > Edit HTML.

Salin semua kode template yang ada di dalam file hasil dowload lalu paste ke text editor yang muncul.

Terakhir klik tombol Save theme.

1.2. Unggah XML

Cara ini aman karena semua widget yang sudah terpasang sebelumnya tidak akan ikut terhapus. Tapi ada kemungkinan letak widget akan berantakan karena tidak sesuai dengan kode HTML template Gapleh Amp. Cara memperbaikinya mudah, tinggal geser-geser posisinya di menu Layout (Tata Letak) atau dihapus.

Masuk ke menu Theme (Tema) > Backup / Restore.

Jika ingin melakukan backup pada template yang sedang digunakan, klik tombol Dowload theme.

Setelah itu langsung upload template Gapleh Amp dengan klik tombol Choose File dan cari lokasi file .xml berada.

Terakhir, klik tombol Upload.

2. Meta Tag

Bagian ini cukup penting sebagai bagian dari SEO dan pelengkap properti saat link dibagikan di media sosial. Ganti kode berikut menggunakan milik kamu sendiri.

2.1 Kode Tracking

Untuk verifikasi Google Search Console dan Bing Webmaster. Jika belum punya, hapus saja semua baris kode ini. Jika sudah ada, silakan ganti yang ditandai.

<meta content='xxxxxxxxx' name='google-site-verification'/>
<meta content='xxxxxxxxx' name='msvalidate.01'/>

2.2. Kata Kunci

Ganti dengan keyword atau kata kunci pencarian blog. Pisahkan menggunakan tanda koma.

<meta content='Keyword 1, keyword 2, keyword 3, keyword 4, keyword 5, etc' name='keywords'/>
<meta content='Keyword 1, keyword 2, keyword 3, keyword 4, keyword 5, etc' property='article:tag'/>

2.3. Info Penulis

<meta content='Your Name' name='author'/>
<meta content='Your Name' property='article:author'/>
<meta content='xxxxxx' property='fb:admins'/>
<meta content='https://www.facebook.com/xxxxxx' property='article:author'/>
<meta content='https://www.facebook.com/xxxxxx' property='article:publisher'/>
<meta content='@YOURusername' name='twitter:site'/>
  • Your Name: nama kamu
  • xxxxxx: ID dari akun Facebook atau Fanspage (Halaman)
  • @YOURusername: Username Twitter

2.4. Gambar Blog

Gambar ini akan muncul saat membagikan link utama (homepage) di media sosial. Ganti yang ditandai menggunakan URL dari gambar banner atau logo blog kamu sendiri.

<meta content='https://1.bp.blogspot.com/-Re5A6bdLxTg/X_NCmJzk4yI/AAAAAAAAF3c/pgvUEqH3HbIMPbouh2Bl013tdfRU-XIZgCLcBGAsYHQ/s0/Gapleh%2BAmp.jpg' property='og:image'/>
<meta content='https://1.bp.blogspot.com/-Re5A6bdLxTg/X_NCmJzk4yI/AAAAAAAAF3c/pgvUEqH3HbIMPbouh2Bl013tdfRU-XIZgCLcBGAsYHQ/s0/Gapleh%2BAmp.jpg' name='twitter:image'/>

3. Menu Navigasi di Header

Berisi tautan yang menuju ke halaman statis (page) namun bisa juga diisi dengan tautan eksternal yang mengarah ke alamat blog lain. Edit widget yang bernama Page Links.

Untuk mengurutkan posisi tautan, pada pengaturannya bisa digeser ke atas atau bawah.

3.1. Slide Navigation

Salin kode dibawah ini dan rubah sesuai kebutuhan Anda

<li class="navAuthor">
   <div class="navImg">
      <div class="slide-header">
         <div class="slide-author">
            <span itemprop="name">Author</span>
         </div>
         <div class="slide-name">
            <span itemprop="name">Yourname</span>
         </div>
      </div>
      <div class="slide-info">
         <div class="slideInfo-author">
            <a href="https://www.blogger.com/profile/01230509647052706348" rel="author nofollow">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21"></path>
               </svg>
            </a>
         </div>
      </div>
   </div>
</li>
<li>
   <a href='#url' itemprop='url'>
      <span class="iconLeft">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
            </path>
         </svg>
      </span>
      <span class='navtitle' itemprop='name'>Home</span>
   </a>
</li>
<li>
   <a href='#url' itemprop='url'>
      <span class="iconLeft">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </path>
         </svg>
      </span>
      <span class='navtitle' itemprop='name'>Judul</span>
   </a>
</li>
<li  class='break'>
   <a href='#url' itemprop='url'>
      <span class="iconLeft">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </path>
         </svg>
      </span>
      <span class='navtitle' itemprop='name'>Judul</span>
   </a>
</li>
<li>
   <a href='#url' itemprop='url'>
      <span class="iconLeft">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </path>
         </svg>
      </span>
      <span class='navtitle new' itemprop='name'>Judul</span>
   </a>
</li>
<li  class='break'>
   <a href='#url' itemprop='url'>
      <span class="iconLeft">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
            </path>
         </svg>
      </span>
      <span class='navtitle new' itemprop='name'>Judul</span>
   </a>
</li>
<li>
   <a href='#url' itemprop='url'>
      <span class="iconLeft">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
            </path>
         </svg>
      </span>
      <span class='navtitle' itemprop='name'>Judul</span>
   </a>
</li>
<li>
   <a href='#url' itemprop='url'>
      <span class="iconLeft">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </path>
         </svg>
      </span>
      <span class='navtitle' itemprop='name'>Judul</span>
   </a>
</li>
<li>
   <a href='#url' itemprop='url'>
      <span class="iconLeft">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </path>
         </svg>
      </span>
      <span class='navtitle' itemprop='name'>Judul</span>
   </a>
</li>
  • Your Name: nama kamu
  • #url: link tujuan saat diklik
  • judul: judul menu
  • new: untuk memberikan teks "New"

3.2. Dropdown

Jika ingin menambahkan dropdown, salin kode dibawah ini dan rubah sesuai kebutuhan Anda. Sebab menggunakan amp accrodion.

<amp-accordion class='break'>
   <section>
      <h4>
         <div class='submenu'>
            <span class="iconLeft">
        <!-- Icon Svg -->
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path>
               </svg>
            </span>
            <span class='navtitle' itemprop='name'>Judul</span>
            <span class="slideIcon">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                  </path>
               </svg>
            </span>
         </div>
      </h4>
      <div>
         <ul class="submenu-first">
            <li itemprop='name'><a href='#url' itemprop='url'>Sub Judul</a></li>
            <li itemprop='name'><a href='#url' itemprop='url'>Sub Judul</a></li>
            <li itemprop='name'><a href='#url' itemprop='url'>Sub Judul</a></li>
         </ul>
      </div>
   </section>
</amp-accordion>
Reaksi:
Share
Related Posts
Disqus Comments

Want to get free article updates via email? come on, enter your email