Cara Menata Template Gratis, SEO Friendly dan Loading Page Cepat - YUANAYU | Lifestyle Blog

Siapa yang sebal saat membaca artikel namun loading page lama? Yap, saya pun salah satunya. Bahkan, saya bakal mengurungkan niat untuk membaca lantaran loading page lama. Salah satu faktor loading page lama adalah penggunaan template gratis. Lantas bagaimana cara menata template gratis tapi speed loading oke? Yuk simak yuk! ^^

Website Template Gratis

Banyak website yang merambah dunia blogging menyediakan template gratis. Salah satunya adalah fiksioner.blogspot.com. Template gratis dari fiksioner banyak digunakan oleh blogger. Alasannya, loading page cepat dan SEO friendly. Apakah benar? yuk kita buktikan! 

Fiksioner memiliki template gratis yang bisa diunduh. Template ini memiliki tampilan yang sederhana namun enak dipandang. Akan tetapi, dapat dimodifikasi sesuai keinginan penggunaan. Diketahui, tepat pada 1 September 2020 fiksioner versi 3 diluncurkan. Fiksioner V3 ini juga menyediakan versi berbayar. Lantas, apakah berbedaan antara versi gratis dan berbayar? Hampir tidak ada, hanya saja pada versi premium alias berbayar ini kamu dapat menghilangkan tautan kredit. 

Memasang Template Gratis Fiksioner

Pada tahap ini blogger dituntut untuk fokus dan berani. Karena bakal bertemu dengan hal-hal yang berkaitan dengan coding yakni html, script, domain dan sebagainya. Oleh karena itu, wajib hukumnya untuk fokus memperhatikan kode-kode yang bisa diubah, dihapus, ditambahkan dan sebagainya. Jangan takut salah! 

Sementara itu, blogger dituntut untuk berani mencoba mengutak-atik kode. Ya meskipun, kadang hasilnya malah bikin eror atau berantakan tampilan blog/ website. 

Nah berikut tahapan memasang template gratis dari fiksioner:

1. Unduh HTML

Pada bagian ini, masuk ke blog fiksioner, pilih menu, akan muncul tampilan "Download Theme". Setelah diunduh, file yang tersimpan dalam bentuk zip, seperti pada gambar. Setelah itu, klik kanan pilih "Extract File" 

2. Salin HTML

File yang telah diekstrak akan memunculkan sebuah folde. Buka folder tersebut dan baca beberapa ketentuannya. Jika sudah paham, buka file HTML dengan menggunakan menu "Notepad". Caranya, klik kanan pilih " Open With" kemudian pilih menu "Notepad". 

Kemudian buka dashboard blogspot, klik menu "Tema", klik tanda panah di samping menu "sesuaikan/ Customize". Lanjut, pilih edit HTML. 

Hapus HTML dan pindahkan semua kode HTML yang ada pada Notepad. Setelah itu, klik menu yang berbentuk disket untuk menyimpan. 

3. Kode Tracking 

Kamu harus mengatur beberapa kode agar tampilan blogmu lebih cakep hahaha... setidaknya rapi enggak amburadul. Nah hal pertama yang perlu dilakukan adalah pencet tombol Ctrl + F, tombol ini untuk mencari beberapa. Diantaranya yakni kode Tracking Code. Caranya isi "XXXXXXXXX" Untuk verifikasi Google Search Console dan Bing Webmaster. Jika tidak punya, hapus saja. 

<!-- Tracking Code -->

 <meta content='xxxxxxxxx' name='google-site-verification'/> <meta content='xxxxxxxxx' name='msvalidate.01'/>

4. Info Penulis

Isilah info penulis sebagai berikut:

<!-- Facebook, Twitter, and Pinterest Meta Tag --> <meta content='article' property='og:type'/> <meta content='Your Name' name='author'/> <meta content='Your Name' property='article:author'/> <meta content='xxxxxx' property='fb:admins'/> <meta content='https://www.facebook.com/xxxxxx' property='article:author'/> <meta content='https://www.facebook.com/xxxxxx' property='article:publisher'/> <meta content='@YOURusername' name='twitter:site'/>

a. Your Name isilah dengan nama kamu

b. xxxxxx di ganti dengan ID Facebook yang kamu miliki

c. @YOURusername diganti dengan username akun Twittermu. 

5. Gambar Tumbnail

Gambar tumbnail blog akan muncul apalagi alamat blog dibagikan. Untuk dapat mengisi gambar tumbnail maka isi kode yang diwarnai dengan link gambar yang telah kami persiapan. 

Sementara, untuk mendapatkan link gambar caranya mudah, yakni buatlah draft gambar yang telah kamu pilih. Jangan lupa ukuran gambar yang tepat adalah 1000 X 500 pixels. 

Setelah gambar diunggah pada draft, klik gambar kemudian klik gambar link yang ada pada menu. Lanjut, copy seluruh link yang ditampilkan. 

Pindah link tersebut pada kode berikut. 

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWnreAh_nZlVQYKV3ElPY8m-DjUHdqNk8pLcrWVrjtIkXTHgS6VsbjbnZPM9YUteQc8v0nFR5Sf34oNRjuhxUYvYUdKg99ipLB8lZ38Vdg3WFMIpl0aYgSKEe8ayk6BeyXeKc-BxdJ4lk-/s1600/Fiksioner-Thumbnail-v3.png' property='og:image'/>

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWnreAh_nZlVQYKV3ElPY8m-DjUHdqNk8pLcrWVrjtIkXTHgS6VsbjbnZPM9YUteQc8v0nFR5Sf34oNRjuhxUYvYUdKg99ipLB8lZ38Vdg3WFMIpl0aYgSKEe8ayk6BeyXeKc-BxdJ4lk-/s1600/Fiksioner-Thumbnail-v3.png' name='twitter:image'/>

6. Atur Fitur 

Untuk pengaturan fitur lebih lanjut yuk pindah ke layout. Klik menu "Layout" kemudian klik "Theme Setting" isi navigation diantaranya: 

a. Postpage: 

yakni jumlah halaman pada tampilan halama. Wajib sesuai dengan yang ditetapkan oleh blogger. 

b. Number Page: 

adalah jumlah tombol yang muncul. 

c. Prev: 

menampilkan halaman sebelumnya. 

d. Next: 

menampilkan halaman berikutnya. 

e. Total Page: 

menunjukkan total halaman yang ditampilkan. Misalnya, 1-7/32. 

Relatedpost:

f. Image: 

menampilkan gambar, pilih true artinya pakai gambar, false artinya tidak menggunakan. 

g. Num: 

jumlah artikel terkait. 

h. Noimage: 

adalah gambar yang akan dimunculkan sebagai pengganti artikel yang tidak memiliki gambar. 

RelatedpostMiddlePost:

 adalah artikel yang muncul pada halaman artikel utama saat dibuka. Biasanya disematkan pada antar kalimat di dalam artikel. 

i. Num:

 jumlah artikel terkait, bisa di isi "0" apalagi tak ingin memunculkan RelatedpostMidePost. 

j. Text: 

sebagai penanda judul artikel. 

Selain itu, juga perlu melakukan editing pada header, menu navigasi pada header dan menu pada footer. Editing bisa dilakukan sesuai dengan minat style masing-masing ya guys hehe.. Akan tetapi khusus untuk link kredit igniel.com tak bisa diubah ya! 

Penting diingat, ada beberapa hal yang perlu dilakukan agar SEO Friendly dan punya speed loading yakni: 

1. Ubah html lang: yakni ubah kode expr:dir='data:blog.languageDirection'

expr:lang='data:blog.locale.language' menjadi lang='ID' xml:lang='ID'

2. Carilah kode berikut: <title><data:blog.pageName/> - <data:blog.title/></title>, dan hapus bagian ini - <data:blog.title/>

3. Hapus kata kunci atau keyword dengan kode berikut <!-- Keyword --> hingga dua baris di bawahnya. 

4. Pada bagian meta content carilah kode berikut: <h2> <a expr:href='data:blog.homepageUrl' expr:title='data:title'><data:title/></a></h2> Kode seperti ini akan berulang dua kali dan hapus kode

5. Terkahir, temukan "feedburner", kemudian hapuslah kode terkait feedburner yang dimulai dari <div class='follow-by-email-inner'> hingga ke </form></div>

Itulah cara menata template gratis dari fiksioner. Memang cukup memusingkan sekaligus menyenangkan bermain dengan kode-kodean ya hehe.. Keterangan lebih lanjut, kamu dapat mengunjungi blog fiksioner. Sementara itu, untuk lebih mempercantik tampilan blog juga bisa melakukan pengeditan melalui menu "Theme/ atau Tema" dan klik "Customize/ Sesuaikan". Selain itu, bisa juga menambahkan kode baru pada SCC.