PinkTong, Template Blogger Sederhana, Gratis Dengan Speed Wuzz

Kali ini saya ingin berbagi template yang bernama pinktong. Tak usah ditanya asal muasal namanya, saya hanya asal ngambil saja. Tidak ada pesan khusus di dalamnya.

Template ini dari segi layout seperti kebanyakan template, terdiri dari dua kolom, yaitu kolom postingan dan kolom sidebar di sebelah kiri. Skema warna defautnya adalah ungu. Pada bilah kiri, postingan berbentuk grid pada halaman index.

PinkTong, Template Blogger Sederhana, template blogger terbaik 2019, template blogger gratis

template blogger cepat, seo, premium, gratis
Tampilan pada desktop

Mengingat penggunaan smartphone dalam menjelajah dunia internet naik sangat signifikan maka template ini saya buat se-friendly mungkin untuk perangkat smartphone baik dari segi tampilan dan fungsi.

Template blogger terbaik
Tampilan mobile

Untuk fitur sendiri bisa dibilang minim, yang saya masukkan hanya yang penting-penting saja seperti tombol berbagi dan postingan terkait, serta tidak menyertakan font icon seperti fontawesome melainkan menggantinya dengan svg, maklum saya berorientasi pada kecepatan.

Untuk kecepatan pemuatan blog ini berdasarkan pengujian pada Google Pagespeed Insight dan Gtmetrix.

Pada pengujian dengan menggunakan Google Pagespeed Insight untuk halaman index sebanyak 3 kali, blog yang menggunakan template ini memperoleh skor 95/100, 98/100, 98/100 untuk versi desktop dan 94/100, 97/100, 99/100 untuk versi seluler.

google pagespeed test result


Sedangkan pada pengujian pada Gtmetrix diperoleh skor Pagespeed 100/100 dan Yslow 86/100. Tapi perlu diingat bahwa skor tinggi selain dipengaruhi oleh template juga dipengaruhi oleh faktor lain seperti gambar. Skor di atas hanya akan diperoleh jika gambar yang dicantumkan dioptimasi terlebih dahulu.

gtmetrix test result

Untuk memaksimalkan kecepatan template ini, penggunaan javacsript maupun css seperlunya saja. Tidak ada javascript libary seperti jquery maupun css ekternal yang saya gunakan. Selain itu pada template ini, css dan javascript bawaan dari blogger ditiadakan jadi mungkin beberapa fitur bawaan seperti dropdown pada arsip tidak berfungsi.

Berikut ini fitur template pinktong:
  • Responsif
  • Loading cepat di halaman index, cek Pagespeed | Gtmetrix
  • Loading cepat di halaman postingan, cek Pagespeed | Gtmetrix
  • Data Terstruktur (scheme.org), Cek di sini
  • Breadcrum
  • Sticky sidebar
  • Lazy load Gambar
  • 2 Iklan di tengah atikel
  • Lazy load Youtube
  • Tombol Berbagi
  • Related Post
  • Sistem Komentar Disqus
  • dll

Berhubung karena saya tidak sempat membuat file dokumentasinya, saya tuliskan disini saja elemen mayor yang mungkin teman-teman ingin ubah.

1. Meta Tag

Kalau yang sudah biasa otak atik template pasti sudah tahu yang mana yang harus diubah. Silahkan disesuaikan contentnya.
<meta content='YOUR KEYWORD 1 HERE, YOUR KEYWORD 2 HERE, YOUR KEYWORD 3 HERE, YOUR KEYWORD 4 HERE' name='keywords'/>
<meta content='XXXXX' name='google-site-verification'/>
<meta content='XXXXX' name='alexaVerifyID'/>
<meta content='XXXXX' name='p:domain_verify'/>
<meta content='XXXXX' name='yandex-verification'/>
<meta content='XXXXX' name='msvalidate.01'/>
<meta content='https://www.facebook.com/XXXXX' property='article:author'/>
<meta content='https://www.facebook.com/XXXXX' property='article:publisher'/>
<meta content='XXXXX' property='fb:app_id'/>
<meta content='XXXXX' property='fb:admins'/>
<meta content='XXXXX' property='fb:profile_id'/>
<meta content='XXXXX' property='fb:pages'/>
<meta content='@YOUR_TWITTER_USERNAME_HERE' name='twitter:creator'/>

2. Warna background header, label, kolom berlangganan, tombol, dan warna link.

Silahkan cari kode warna 75539e lalu ganti dengan kode warna pilihan kalian. Untuk warna header menggunakan gradien, silahkan rubah manual pada kode #header

3. Lazy Load Untuk Gambar dan Video Youtube

Untuk gambar silahkan masuk ke mode html saat membuat postingan lalu tambahkan class lazy load, rubah src menjadi data-src, dan tambahkan src baru dengan url png base. Contoh:

Sebelum:
<img border="0" 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" />

Sesudah:
<img border="0" 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==' />

Untuk lazy load youtube silahkan baca artikel ini.

4. Komentar

Memasang komentar disqus

Silahkan tekan tombol ctrl + f lalu cari kode "disqusmu" lalu ganti dengan shortname disqus kalian. jangan lupa sembunyikan komentar blogger dengan masuk ke menu setelan > Postingan, komentar dan berbagi > lokasi komentar lalu pilih sembunyikan (opsional)

Mengganti komentar disqus dengan komentar blogger

Silahkan cari kode berikut
<b:include data="post" name="disqus-comments"/>

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

5. Kotak Berlangganan

cari kode uri=Pinktong lalu ganti pinktong dengan nama feedburner kalian.

6. Iklan

Silahkan cari tulisan <!--pasang kode iklan disini--> nanti di bawahnya ada kode seperti di bawah, ganti kode tersebut dengan kode iklan kalian
<div class='testad' style='width:100%;height:200px;background:#eee'/>

7. Memindahkan Gambar Ke Atas Judul Postingan

Untuk memindahkan gambar ke atas judul postingan silahkan masuk ke mode html, cari gambar yang akan dipindahkan kemudian tambahkan id='desc'. Contohnya:
<a id="desc" href="https://2.bp.blogspot.com/-Y9aspUBC3Xk/XCV19Ol7zkI/AAAAAAAABS4/ic7pwrLZGCUArw2F2MdqWBK-8OJplMYeACLcBGAs/s1600/food-1239423_640-min.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="348" data-original-width="640" src="https://2.bp.blogspot.com/-Y9aspUBC3Xk/XCV19Ol7zkI/AAAAAAAABS4/ic7pwrLZGCUArw2F2MdqWBK-8OJplMYeACLcBGAs/s1600/food-1239423_640-min.jpg" /></a>

Namun jika tidak membutuhkan fitur ini silahkan hapus kode javascript berikut agar tidak ada report error di console
var newParent = document.getElementById('top-img');
var oldParent = document.getElementById('desc');
while (oldParent.childNodes.length) { newParent.appendChild(oldParent.firstChild);};

8. Tampilan Mobile

Pada seksi "Tema" di dashboard blogger silahkan pilih "Tidak. Tampilkan tema desktop di perangkat seluler." Pada pengaturan tema seluler

9. Kontak Whatsapp

Untuk kontak whatsapp pada footer silahkan cari nomor ini NO-WAMU lalu ganti dengan nomor whatsapp kalian.

Changelog:

Ver. 1.0 (12/02/19)
- Rilis

Ver. 1.1 (03/04/19)
- Perbaikan tombol Whatsapp
- Perbaikan beberapa css tampilan
- Menghapus link google plus

Ver. 1.2 (27/06/19)
- Perbaikan meta tag
- Perubahan warna tema
- Perbaikan tombol navigasi dan tombol komentar
- Menambah tombol kirim pesan whatsapp
- Perbaikan pada tombol berbagi
- Perbaikan pada gaya kolom subscribe

Ver. 1.3 (03/10/19)
- Perbaikan tombol navigasi dan tombol komentar
- Perbaikan related post
- Perbaikan tombol berbagi whatsapp
- Perbaikan widget profil
- Penambahan menu dropdown
- Beberapa perbaikan minor


Lain-lain

Ternyata banyak teman-teman yang menambahkan widget standar seperti archive, kontak dan sebagainya pada blognya. Sedangkan pada tema pinktong ini javascript maupun css bawaan blogger dicekal. Akibatnya tampilan widget standar tersebut akan amburadul.

Pada updaten kali ini saya menghilangkan pencekalan untuk javasript widget bawaan blogger karena sepertinya pihak blogger sudah melakukan pembaharuan, terlihat dari hasil pengujian kecepatan lewat gtmetrix maupun google pagespeed insight tema pinktong tetap cepat sekalipun javascript widget bawaan blogger dimuat.

Selebihnya mengenai fitur maupun perbaikan lainnya akan diupdate pada versi terbarunya. Jika ada yang ingin ditanyakan silahkan tulis di kolom komentar.