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.
Lebar Bilah
Untuk merubah lebar bilah (badan konten) Cari kode berikut
.full-row {
width: 100%;
margin: 0 auto;
max-width: 980px;
}
Lalu ganti 980px dengan lebar yang kalian inginkan.
3. Lain-lain
-- Lazy load gambar
<img data-original-height="455" data-original-width="640" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u2kkhPUxgHDMXDrIfSrG1YnkDwfTYYqA1dzcLc9EOcVf5-DYokr_InZdutu4GSoppLyztXTPmXo8Zhujqddpfjc0xc5l9Mp3qEhRow8YS3IlPmtV0_h5BsQ158dHxcTXd5a2H3wRI6M/s400/vegetables-1584999_640-min.jpg" width="400"/>
Rubah menjadi:
<img class='b-lazy' data-original-height="455" data-original-width="640" height="284" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u2kkhPUxgHDMXDrIfSrG1YnkDwfTYYqA1dzcLc9EOcVf5-DYokr_InZdutu4GSoppLyztXTPmXo8Zhujqddpfjc0xc5l9Mp3qEhRow8YS3IlPmtV0_h5BsQ158dHxcTXd5a2H3wRI6M/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. Atau kalau tidak mau repot cukup aktifkan fitur iklan otomatis yang disediakan Adsense.
