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.
Tentang Pinktong
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.
Tampilan Pinktong
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.
Fitur dan kecepatan Pinktong
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. Hasilnya pun cukup bagus, tidak kalah dari tema premium CiamikPlus
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.
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.
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
Pemasangan
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u2kkhPUxgHDMXDrIfSrG1YnkDwfTYYqA1dzcLc9EOcVf5-DYokr_InZdutu4GSoppLyztXTPmXo8Zhujqddpfjc0xc5l9Mp3qEhRow8YS3IlPmtV0_h5BsQ158dHxcTXd5a2H3wRI6M/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://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==' />
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. Jika kode iklan kalian baru, cari tulisan async lalu ubah menjadi async='' atau async='async' agar tidak terjadi error.
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLiq3o_dJZws_SqJMH-2AD54vnwHwNXCDmU36QRHPOa48adgsxZn9kUk4yDD7IGTP01jhGeTnF_Vh8oIT7hM0ggneNA0SMDjotrQNcW_I5C81-b9b-pdf1ue5S8zWJ-5_KUzMarHd32z8/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLiq3o_dJZws_SqJMH-2AD54vnwHwNXCDmU36QRHPOa48adgsxZn9kUk4yDD7IGTP01jhGeTnF_Vh8oIT7hM0ggneNA0SMDjotrQNcW_I5C81-b9b-pdf1ue5S8zWJ-5_KUzMarHd32z8/s1600/food-1239423_640-min.jpg" /></a>
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.