PinkTong, Template Blogger Sederhana, Gratis SEO Responsive - masandri
Lompat ke konten Lompat ke sidebar Lompat ke footer

PinkTong, Template Blogger Sederhana, Gratis SEO Responsive

PinkTonk Template Blogger Sederhana  Gratis Selamat datang di blog yang sederhana ini masandri.org artikel kali ini saya akan membahas tentang template sederhana tapi berkualitas, Responsive, SEO Frendly, ramah terhadap mesin pencari google.

tidak usah ditanya lagi 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 disebelah kiri. Skema warna defaulnya adalah ungu. Pada bilah kiri, Postingan berbentuk grid pada halaman index.

PINKTONG Free Blogger Template

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

Untuk fitur sendiri bisa dibilang minim, yang  ada hanya yang penting-penting saja seperti tombol menggantinya dengan svg, maklum  berorientasi pada kecepatan website.

Untuk kecepatan pemuatan blog ini berdasarkan dengan pengujian pada Google Pagespeed Insight dan Gtmetrix. Hasilnya pun cukup bagus, tidak kalah dari tema premium LinkMagz milik mas sugen.id.

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.

PageSpeed Insight
PageSpeed Insight

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.
Gtmetrik pinktonk

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

Berikut ini fitur template pinktong : 

  • Responsive
  • Loading cepat di halaman index, cek Pagespeed | Gtmetrik
  • Data Terstruktur (scheme.org), Cek di sini
  • Breadcrum
  • Sticky sidebar
  • Lazy load Gambar
  • 2 iklan di tengah artikel
  • Lazy load Youtube
  • Tombol berbagi
  • Related Post
  • Sistem Komentar Disqus
  • dll
Berhubungan karena saya tidak sempat membuat file dokumentasinya, saya tuliskan disini saja elemen mayor yang mungkin teman-teman ingin edit/ubah.

1. Meta Tag

Kalu yang sudah biasa otak atik template pasti sudah tahu yang mana yang harus di edit/ubah. 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, kololm berlangganan, tombol, dan warna link. 

Silahkan cari kode warna 75539e lalu ganti dengan kode warna pilihan anda. 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 dibawahnya ada kode seperti di bawah, ganti kode tersebut dengan kode iklan. 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://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 beberap 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
-Perbikan pada gaya kolom subcribe

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 berantakan.

Pada updetan kali ini saya menghilangkan pencekalan untuk javascript widget bawaan blogger karena sepertinya pihak blogger sudah melakukan pemberharuan, terlihat dari hasil pengujian keceptan lewat Gtmetrik maupun google pagespeed insight tema pinktong tetap cepat sekaligus javascript widget bawaan blogger dimuat.

Selebihnya mengenai fitur maupun perbaikan lainya akan diupdate pada versi terbarunya. Jika ada yang ingin ditanyakan silahkan tulis di kolom komentar. Sumber Refrensi : goinsan.com
masandri.org
masandri.org Blog Personal Mengulas seputar dunia blogger, AdSense, Game, Islami dan Jasa pembuatan website SEO Responsive

Posting Komentar untuk "PinkTong, Template Blogger Sederhana, Gratis SEO Responsive"

Berlangganan via Email