Panduan pemasangan dan pengaturan Template PinkTong Versi 1.5

- Diupdate November 09, 2021
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://1.bp.blogspot.com/-BuRzr0PYJ-c/XCXAgvO3MnI/AAAAAAAABTk/w2Gy6r4MYHw5d59rp5hNkMH3FoFZ1wqGQCLcBGAs/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://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. Atau kalau tidak mau repot cukup aktifkan fitur iklan otomatis yang disediakan Adsense.

Tampilkan Komentar Sembunyikan Komentar 47

47 Komentar

  • blogger profile image
    Kuamangmedia.com 8/05/2021 10:49:00 PM • • •
    Mau tanya mas, bagaimana menghapus script disgus agar bertambah ringan, saya baca-baca jika tidak banyak script atau js mampu mempercepat loading blogger, apakah demikian mas.

    Saya sudah menggunakan template ini untuk di uji coba web berita dan saya timpa banyak demo artikel, dan hasilnya cukup kencang, namun yang masih kurang bagi web berita tidak adanya Inline Post. atau adakah tutorial yang sesuai untuk template ini mas supaya ada menu Baca juga : minimal 3 dalam artikel.

    mohon maaf jika sedikit mengoreksi kekurangannya mas.

    Salam Hormat Saya
    Kuamangmedia.com
    • blogger profile image
      San Muliadi 8/06/2021 02:04:00 AM • • •
      Iya kalau tidak banyak js eksternal memang bisa nambah kecepatan blog. Cara hapus komentar disqusnya cukup cari kode lalu hapus:

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

      Kalau maksudnya post terkait dalam postingan bisa cek tutorial disini:

      https://www.igniel.com/2019/01/multiple-artikel-terkait-dalam-post.html
    • blogger profile image
      Kuamangmedia.com 8/07/2021 04:36:00 AM • • •
      saya sebelumnya menggunakan yang 1,3 setelah di update ke 1,5 ada peringatan dari GSC mas.

      Search Console telah mengidentifikasi bahwa situs Anda terpengaruh oleh 2 Kebergunaan Seluler masalah:

      Masalah Teratas

      Masalah berikut ditemukan di situs Anda:

      Konten lebih lebar dari layar

      Elemen yang dapat diklik terlalu berdekatan satu sama lain

      Sebaiknya perbaiki masalah tersebut jika memungkinkan agar situs Anda dapat memberikan cakupan dan pengalaman terbaik di Google Penelusuran.

      Untuk video youtube sepertinya melebihi layar hehehe,
    • blogger profile image
      San Muliadi 8/11/2021 11:39:00 PM • • •
      Mungkin bisa bantu cek mas, link/element mana yang berdekatan itu soalnya saya gak dapat peringatan.
      Untuk video youtube saya terapin teknik lazyload, bisa dicek di sini: https://www.goinsan.com/2019/01/lazy-load-video-youtube.html
      Untuk kode iframe yang disematkan saya lupa buat kode cssnya agar ukurannya bisa fluid. Masnya bisa googling caranya gimana
  • blogger profile image
    olim 8/11/2021 08:40:00 PM • • •
    How to add to wordpress?
  • blogger profile image
    Rohan 8/13/2021 05:50:00 PM • • •
    Hey! Where to add the code for comments counter so that it looks like yours? Help me!
  • blogger profile image
    Rohan 8/13/2021 07:32:00 PM • • •
    And also Contact us page which i had created earlier is not working now 🥺

    I will have to switch back to older theme!😶 I know many scripts are not loaded to increase the pagespeed but things are not quite favourable from last few days!
  • blogger profile image
    Rohan 8/13/2021 09:36:00 PM • • •
    Third-Party
    Transfer Size
    Main-Thread Blocking Time
    Blogger
    78 KiB
    640 ms
    …jsbin/243…-cmt.js

    Can you tell me how to fix this! This happened when i changed comments disqus to blogger.
  • blogger profile image
    Khalil abu syamil 8/15/2021 05:49:00 AM • • •
    Bang kalo mau hapus credit pinktong bayar berapa?
    • blogger profile image
      Kuamangmedia.com 8/15/2021 08:30:00 PM • • •
      Tidak usah di hapus, cukup di sembunyikan saja, lagian tidak ada salahnya memberikan Link ke situs pembuatnya.

      Situs pembuat tidak ada artikel yang melanggar aturan,jadi bagus buat Link balik, beda kalau situs pemiliknya itu ada film dan lain sebagainya yang di larang Google.
    • blogger profile image
      Khalil abu syamil 8/17/2021 03:13:00 AM • • •
      salahsatu cara menghargai selain dengan credit link adalah dengan membeli pada pembuatnya, salahsatu fasilitas membeli template adalah tidak adanya credit link..saya mau membeli lisensi template pinktong 1.5 ke pembelinya itu wujud menghargai juga
    • blogger profile image
      Kuamangmedia.com 8/17/2021 08:30:00 AM • • •
      kalau yang berbayar ada yang versi Ciamik Pluss mas, tapi bisa saja coba di hubungi saja secara pribadi, biar di khususkan buat piktong,
  • blogger profile image
    Cemilin 9/09/2021 08:05:00 AM • • •
    Selamat pagi Bang, saya sangat suka dengan templatenya, dan sudah saya pasang, jika berkenan mohon untuk diperiksa bang, khawatir ada kesalahan atau mungkin ada saran. Ini blognya bang: https://kondeslog.blogspot.com/
    Terimakasih.
  • blogger profile image
    Hira 9/10/2021 02:18:00 PM • • •
    Mas, kalau related postnya ga muncul sebabnya apa ya?
  • blogger profile image
    Hanna 9/13/2021 06:12:00 PM • • •
    Mas, kenapa dihapus pertanyaan saya?
    cara bikin breadcrumbs di pinktong v1.5 jadi seperti v1.3 gimana? soalnya label saya kepanjangan...
    • blogger profile image
      San Muliadi 9/13/2021 10:59:00 PM • • •
      Gak dihapus, kamu nanyanya di sini: https://www.goinsan.com/2021/07/update-template-blogger-gratis-pinktong.html?showComment=1631521147462#c8146664539577252946
    • blogger profile image
      San Muliadi 9/13/2021 11:13:00 PM • • •
      Kepanjang yang dimaksud jumlah labelnya? coba pakai css ini:

      .breadcrumbs>span{display:none}
      .breadcrumbs>span:nth-of-type(1),.breadcrumbs>span:nth-of-type(2){display:block}
    • blogger profile image
      Hanna 9/14/2021 05:55:00 PM • • •
      oh iya maaf mas, saya sudah berhasil mengganti breadcrumbs nya. tapi saya ingin tahu cara menampilkan current label di breadcrumb gimana ya? maaf sekali lagi mas, saya newbie tentang html. ini blogtes saya https://kepon2.blogspot.com/ bisa dibantu mas sekali lagi.
    • blogger profile image
      San Muliadi 9/15/2021 01:20:00 AM • • •
      Sorry saya kurang paham maksudnya, bukannya semua label yang muncul di bredcrumb itu current label?
    • blogger profile image
      Hanna 9/15/2021 12:14:00 PM • • •
      iya sih, maksud saya judul postingan muncul di label gitu, jadi tampilannya gini (label 1> label 2> .... > judul postingan). kalo di v1.3 kan tampilannya (lable1>label2>...).

      kalo bisa dijawab ya mas, kalo tidak ya gpp sih.
      makasih buat bantuannya ya mas sejauh ini.
    • blogger profile image
      San Muliadi 9/17/2021 02:02:00 PM • • •
      Kalau itu harus nambahin kode judul di dalam kode breadcrumb. Kalau paham ngotak atik template blogger bisa coba sendiri, tambahkan kode ini: <data:post.title/>
  • blogger profile image
    Admin 10/03/2021 04:12:00 AM • • •
    Hi. I come from Vietnam. I use Google translate so it probably won't be very accurate. Please tell me how to increase the height of the thumbnail. I want the thumbnail to be a square with equal width and height. Thank you.
  • blogger profile image
    Admin 10/03/2021 04:14:00 AM • • •
    Hai. Saya berasal dari Vietnam. Saya menggunakan Google translate jadi mungkin tidak terlalu akurat. Tolong beri tahu saya cara menambah tinggi thumbnail. Saya ingin thumbnail menjadi persegi dengan lebar dan tinggi yang sama. Terima kasih.
    • blogger profile image
      San Muliadi 10/03/2021 02:22:00 PM • • •
      find this code:

      .thumb-area{position:relative;background-color:#f5f5f5;overflow:hidden;width:100%;height:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;margin-bottom:15px;padding-top:60%;background-size: cover;}

      change padding top value from 60% to 100%

      Next find this code:

      <a class='thumbox' expr:data-src='resizeImage(data:post.firstImageUrl, 310,&quot;10:6&quot;)' expr:data-src-medium='resizeImage(data:post.firstImageUrl, 450, &quot;10:6&quot;)' expr:data-src-small='resizeImage(data:post.firstImageUrl, 354, &quot;10:6&quot;)' expr:href='data:post.url' expr:title='data:post.title'></a>

      Replace all 10:6 with 1:1
    • blogger profile image
      Admin 10/03/2021 07:09:00 PM • • •
      kenapa saat mencari postingan tidak muncul thumbnail. Saya belum mengedit apa pun. https://nhoc18.blogspot.com/search?q=l%E1%BB%9Bp&max-results=10
    • blogger profile image
      San Muliadi 10/03/2021 08:01:00 PM • • •
      Something wrong with the script. I have fixed it. You can download it here: Pinktong Update
    • blogger profile image
      Admin 10/03/2021 10:13:00 PM • • •
      I don't want to show the summary, what should I do? https://i.imgur.com/eviMQQv.png
    • blogger profile image
      Admin 10/03/2021 10:36:00 PM • • •
      Ngomong-ngomong. Saya ingin menasihati Anda. Jika Anda dapat mendesain menu di bagian atas halaman untuk menyembunyikan saat Anda menggeser ke bawah dan menampilkannya saat Anda menggeser ke atas seperti https://litespot-templateify.blogspot.com/ itu akan lebih baik.
    • blogger profile image
      Admin 10/03/2021 10:54:00 PM • • •
      Saya baru saja menemukan satu bug lagi. Tidak dapat memasukkan teks ke dalam kotak pencarian di browser seluler. Hanya satu huruf yang bisa dimasukkan.
    • blogger profile image
      Admin 10/03/2021 11:32:00 PM • • •
      Sepertinya mode malam diaktifkan secara otomatis ketika mencapai jam 10 malam. Bagaimana saya bisa mematikannya.
    • blogger profile image
      San Muliadi 10/05/2021 05:04:00 AM • • •
      To hide summary, find this code:

      .indexview .post-body

      and add display:none
    • blogger profile image
      San Muliadi 10/05/2021 05:06:00 AM • • •
      Search field on mobile is working fine here. And for the night mode it doesn't work at certain time.
  • blogger profile image
    Admin 10/03/2021 11:32:00 PM • • •
    Maaf karena terlalu banyak bertanya. Menantikan jawaban Anda
  • blogger profile image
    Admin 10/15/2021 09:33:00 PM • • •
    Blogger mới đổi định dạng link ảnh từ 1.bp.blogspot.com sang blogger.googleusercontent.com khiến cho hình ảnh related post bị mờ. Bạn có biết cách khắc phục không? Nhân tiện hộp tìm kiếm trên thiết bị di động không thể nhập được văn bản. https://phegai.blogspot.com/2021/10/blog-post.html
    • blogger profile image
      San Muliadi 10/16/2021 12:06:00 PM • • •
      I will fix related post as soon as possible and add it to Pinktong 1.5.2,
      I have checked the link you gave me on my phone and the search box is working fine. I can enter any text on it. By the way maybe it's your phone browser, outdated.
    • blogger profile image
      Admin 10/17/2021 12:00:00 AM • • •
      Những người khác cũng thấy như vậy. Tôi đã nhờ những người bạn của tôi kiểm tra và họ cũng như vậy

Batalkan