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.

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.

edit
Tambahkan Komentarmu Sembunyikan Komentar 68

Batalkan

68 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
      Hira 9/10/2021 02:25:00 PM • • •
      Sudah bolak balik pasang dan reset tema tapi tetap gak muncul.
    • blogger profile image
      San Muliadi 9/10/2021 03:00:00 PM • • •
      Pastikan postingannya punya label, https aktif. Pakai penyedia SSL luar seperti cloudflare?...

      Coba cari kode ini:

      homePage:"<data:blog.homepageUrl/>",

      lalu ganti <data:blog.homepageUrl/> dengan url blog kamu. Urlnya yang lengkap pakai https 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
  • blogger profile image
    WatikamKwe 1/03/2022 07:44:00 PM • • •
    Sebelumnya maaf bro..
    Kok tidak ada kode:



    di HTML??
    • blogger profile image
      WatikamKwe 1/03/2022 08:02:00 PM • • •
      Maksudnya pake facebook komen bagaimana ya bro?
    • blogger profile image
      San Muliadi 1/04/2022 02:10:00 PM • • •
      Kode yang mana nih bro? :)
      Kalau mau pasang kode facebook cari saja tutorialnya, banyak kok. Nanti cari kode ini di template:

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

      Lalu ganti kode itu dengan koden komentar facebook
  • blogger profile image
    Raya Septi 1/12/2022 10:08:00 AM • • •
    Halo min mau nanya nih, ini yang salah apanya yah ko di gambar postingan ada tulisan "JANGAN HAPUS DONG" https://xyzpemandangan.blogspot.com

    mohon bantuannya min
  • blogger profile image
    Riazul Islam 1/30/2022 12:44:00 PM • • •
    PinkTong is supper fast loading template. is there any paid version I dont like any Encrypted script..
    if you provide premium version without any encryped script I will definatly buy this for my website Meghnar Bazar
    • blogger profile image
      San Muliadi 2/06/2022 01:28:00 AM • • •
      I'm sorry there's no paid version of it. And don't worry there's no suspicious thing inside that encrypted scripts.
  • blogger profile image
    Tasty Soul Food Recipes 3/28/2022 09:10:00 AM • • •
    Hello san ,
    How can I just keep the day and delete the night
  • blogger profile image
    Rahast 3/31/2022 10:07:00 PM • • •
    Share post nya kok ada di dua tempat ya kak? Pertama ada di atas postingan. Kedua di bawah postingan.
    Cara ngilangin share post di atas postingannya gimana?
    • blogger profile image
      San Muliadi 4/02/2022 07:35:00 PM • • •
      cari kode di bawah, ada 2 hapus yang pertama


      <div class='share-box'>
      <b:include data='post' name='postShareButton'/>
      </div>
  • blogger profile image
    Admin 4/07/2022 11:08:00 PM • • •
    kalo icon linkedin gmna yah?
  • blogger profile image
    Shantanu 9/10/2022 08:12:00 PM • • •
    hello i am using pinktong blogger template , but ads widget not working in post inside properly. how to fix theme middle ads inside the posts.
  • blogger profile image
    CM Pokhrel 11/19/2022 10:04:00 PM • • •
    bro i am using your template but in home page instead of showing thumbnail of post as in demo there is a image https://1.bp.blogspot.com/-EspIUsdiXNE/YPK6ZYK33aI/AAAAAAAAAYs/ATPci5dMZD0C_Ze75fgi91zY9bjIeGjmACLcBGAsYHQ/s0/Khaby-Lame-transparent-meme-template%25281%2529.png and written Jangan Dihapus dong. Is this an error or the template is as it is.
    • blogger profile image
      San Muliadi 11/20/2022 06:34:00 AM • • •
      It's author protection, Just don't delete the credit, you can hide it and add nofollow attribute instead of deleting it.
  • blogger profile image
    echaimutenan 12/24/2022 03:25:00 PM • • •
    mas mau nanya, caranya biar bagian tulisan jadi besar bagaimana ya? saya sudah ngubah ke width nya 1200 tapi bagian tulisan tetap kecil pengen agak gede kalau via dekstop. terus mau nanya ini kan ada iklan tiba2 di samping2 gitu itu iklannya template apa iklannya saya ya kak?
  • blogger profile image
    Nishant Suthar 5/07/2023 11:08:00 AM • • •
    where the typo and shortcodes
  • blogger profile image
    Shantanu 11/01/2023 01:52:00 AM • • •
    when coming pinktong blogger template v1.5.2 new update version or new twitter icon x
  • blogger profile image
    Malik Sani Ibnu Zahir 11/15/2023 11:06:00 PM • • •
    Komentar ini telah dihapus oleh pengarang.
  • blogger profile image
    Malik Sani Ibnu Zahir 11/15/2023 11:18:00 PM • • •
    Mau nanya nih, saya sangat suka dengan temanya namun masalahnya adalah kok bentuk list dalam postingan bentuknya centang, cara membuatnya jadi titik kembali gimana, mohon bantuannya, saya selalu menanti balasan anda
    url blog : https://maliksiz.blogspot.com
Tambahkan Komentar