Panduan pemasangan dan pengaturan Template PinkTong Versi 1.5

Panduan pemasangan dan pengaturan Template PinkTong Versi 1.5

1. Pemasangan

Ekstak file ZIP template PinkTong, lalu buka file PinkTong V.1.5.xml dengan menggunakan text editor seperti notepad dan copy semua teksnya. Buka editor HTML tema blog kalian, lalu paste teks yang sudah kalian copy sebelumnya. Jangan lupa pilih desktop pada pengaturan seluler.

Meta Tag

-- Warna bar pada browser smartphone

  <meta content='#212121' name='theme-color'/>
  <meta content='#212121' name='msapplication-navbutton-color'/>
  <meta content='#212121' name='apple-mobile-web-app-status-bar-style'/>

Ganti #212121 dengan kode warna pilihan kalian. Sebaiknya sesuaikan dengan warna header.

-- OG facebook dan twitter

Cari "Kode Gambarmu", lalu ganti dengan URL gambar kalian. Resolusinya minimal 1280 x 768 pixel.

-- Kode Verifikasi

  <meta content='xxxxxxxxxxxxxxxxx_g' name='google-site-verification'/>
  <meta content='xxxxxxxxxxxxxxxxx' name='msvalidate.01'/>
  <meta content='xxxxxxxxxxxxxxxxx' name='p:domain_verify'/>
  <meta content='xxxx_xxxxx-xxxxxxx' name='majestic-site-verification'/>

2. Tampilan

Warna Utama

:root{
--bg:linear-gradient(30deg,#c39 19%,#66c 100%);
--bg-link:#40407a;
--bg-link-hover:#DE2F1B;
--link-color:#1C7CA6;
--link-hover:#e74c3c;
}

Ganti linear-gradient(30deg,#c39 19%,#66c 100%) untuk merubah warna background dan footer.

3. Lain-lain

-- Lazy load gambar

<img data-original-height="455" data-original-width="640" height="284" src="https://1.bp.blogspot.com/-BuRzr0PYJ-c/XCXAgvO3MnI/AAAAAAAABTk/w2Gy6r4MYHw5d59rp5hNkMH3FoFZ1wqGQCLcBGAs/s400/vegetables-1584999_640-min.jpg" width="400"/>

Rubah menjadi:

<img data-original-height="455" data-original-width="640" height="284" data-src="https://1.bp.blogspot.com/-BuRzr0PYJ-c/XCXAgvO3MnI/AAAAAAAABTk/w2Gy6r4MYHw5d59rp5hNkMH3FoFZ1wqGQCLcBGAs/s400/vegetables-1584999_640-min.jpg" width="400" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEXz8/SVuXQoAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg=='/>

Cara ini agak ribet karena harus dilakukan secara manual jadi opsional saja apalagi jika gambar postingannya cuma satu atau dua. Atau bisa menggunakan metode natif, silahkan baca di sini.

-- Lazy load Youtube

Silahkan baca di sini.

-- Komentar

Template ini menggunakan komentar disqus. Untuk mengganti dengan disqus kalian, cari kata santheme lalu ganti dengan shortname kalian.

Untuk menggantinya menjadi komentar blogger cari kode berikut:

<b:include data="post" name="disqus-comments"/>

lalu rubah menjadi

<b:include data="post" name="comments"/>

-- Menu, Sitelink dan sosial media

Buka menu tata letak, klik edit lalu ganti # dengan link kalian.

Menu

<ul>
<li><a href='#'>Static Page</a></li>
<li><a href='#'>BIZ</a></li>
<li><a href='#'>Politic</a></li>
<li><a href='#'>Entertainment</a></li>
<li class='dropdown-item'><span class='dropdown-label'>Film <span class='dropdown-symbol'></span></span>
<ul class='menu-dropdown'>
<li><a href='#'>Korea</a></li>
<li><a href='#'>Jepang</a></li>
<li><a href='#'>Cina</a></li>
<li><a href='#'>Thailand</a></li>
  </ul>
</li>
  </ul>

Site Link

<ul class='clearfloat'>
          <li><a href='#'>About</a></li>
          <li><a href='#'>Contact</a></li>
          <li><a href='#'>Sitemap</a></li>
          <li><a href='#'>Disclaimer</a></li>
          <li><a href='#'>Privacy Policy</a></li>
          <li><a href='#'>Terms and Conds</a></li>
</ul>

Sosial Media

<ul class='clearfloat'>
<li><a aria-label='Open Facebook' href='https://www.facebook.com/' rel='nofollow noreferrer' target='_blank'><svg><use xlink:href='#fbicon'/></use></svg></a></li>
<li><a aria-label='Open Twitter' href='https://twitter.com/' rel='nofollow noreferrer' target='_blank'><svg><use xlink:href='#twicon'/></use></svg></a></li>
<li><a aria-label='Open Instagram' href='https://instagram.com/' rel='nofollow noreferrer' target='_blank'><svg><use xlink:href='#isicon'/></use></svg></a></li>
<li><a aria-label='Open Youtube' href='https://www.youtube.com/' rel='nofollow noreferrer' target='_blank'><svg><use xlink:href='#yticon'/></use></svg></a></li>
</ul>

-- Iklan

Buka menu tata letak lalu paste kode iklan pada slot yang tersedia.

Posting Komentar Sembunyikan Komentar

Batalkan