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 merah tua. Pada bilah kiri, postingan berbentuk grid pada halaman index.

PinkTong, Template Blogger Sederhana, Gratis Dengan Speed Wuzz

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 Google Pagespeed Insight untuk halaman index, blog yang menggunakan template ini memperoleh skor 100/100 untuk versi desktop dan 100/100 untuk versi seluler.

gpsi report

Sedangkan pada pengujian pada Gtmetrix diperoleh skor Pagespeed 100/100 dan Yslow 98/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 report

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.

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'/>

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

Silahkan cari kode warna c13a30 lalu ganti dengan kode warna pilihan kalian.

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.

Komentar Disqus

Silahkan cari kode santheme lalu ganti dengan username disqus kalian. jangan lupa sembunyikan komentar blogger dengan masuk ke menu setelan > Postingan, komentar dan berbagi > lokasi komentar lalu pilih sembunyikan

Kotak Berlangganan

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

Iklan

Silahkan cari tulisan <!--pasang kode iklan disini--> lalu ganti dengan kode iklan kalian

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 membutujkan 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);};

Lain-lain

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

Lihat Komentar