Template blog responsif


Template blog responsif – Banyak pertanyaan berdatangan dari teman2 blogger sejak saya mengganti template blog ini, lewat email maupun di jejaring sosial. Pertanyaannya hampir sama semua, “apa nama template, di dapatkan dari mana, gratis atau berbayarkah ? ”.

Pertanyaan itu sangat sering saya dapatkan apalagi saat diawal-awal pergantian, bahkan sampai sekarang. Saya juga tidak tau mengapa teman-teman blogger banyak menanyakan hal itu, saya rasa template ini masih biasa2 saja, dan tidak terlalu keren dibandingkan dengan template2 yang banyak digunakan oleh blog lain.

Bagi pemilik blog mengganti template mungkin hal yang wajar, dikarenakan berbagai alasan, diantara alasan yang paling sering kita dengar adalah ingin tampilan beda dan fresh dari sebelumnya. Juga ingin mengikuti tren design template yang terus berkembang tahun ketahun.

Postingan ini akan menjawab semua pertanyaan itu, juga saya ingin berbagi sedikit cerita kepada sobat semua tentang alasan mengapa mengganti template, dan kenapa pilihannya jatuh pada template yang saya gunakan saat ini.

Tampilan-blog-versi-lengkap

***

Tanggal 10 november 2015 kemarin, tepat satu tahun sudah template ini terpasang. Perlu banyak pertimbangan sebelum memutuskan pergantian tersebut, mengingat template sebelumnya adalah template yang sudah lumayan lama saya gunakan, yakni sejak awal ngeblog ditahun 2012, banyak kenangan tersimpan di dalamnya.

Dari awal sengaja saya tidak menggunakan template berbayar yang jelas memiliki lebih banyak keunggulan dari segi design dan SEO. Alasannya sederhana, saya ingin belajar Javascript dan HTML dulu, dan langsung mempraktekkannya diblog.

Template sebelumnya adalah template gratisan yang sudah disediakan blogger.com di fitur pemilihan template, memiliki tema sederhana. Dengan berbagai pengeditan yang saya pelajari secara otodidak membuat tampilannya sudah sangat jauh berbeda dari versi bawaan. Mungkin karena hasil kreasi sendiri, meski masih terbilang jauh dari kata keren, tapi saya merasa puas menggunakannya selama lebih kurang 2 tahun. HeHe.

Di akhir tahun 2014 kemarin, prinsip untuk tidak akan mengganti template walau apapun yang terjadi sepertinya harus saya pertimbangkan lagi. Sebab karena beberapa alasan berikut.

1. Tidak responsif

Template lama saya masih terbilang jadul, sangat jauh dari kata responsif. Salah satu pembeda template lama dengan template responsif adalah tampilan dan responnya. Template responsif secara otomatis akan menyesuaikan ukuran halaman blog-web pada semua perangkat elektronik tempat kita membuka halaman blog tersebut.

- Buka postingan -> mencoba update kembali, untuk melihat screenshot template lama.

Ditemplate lama, bila kita membuka nya dengan PC tampilan masih baik2 saja. Tapi hal janggal akan terjadi bila gadget yang kita gunakan adalah tablet, handphone, atau perangkat lain yang ukuran layarnya lebih kecil dari PC, tampilan layar yang kita dapat akan tetap seperti PC. Tentu ini menyulitkan pengguna, sebab butuh waktu lama untuk membuka keseluruhan halaman blog, halaman blog akan tetap terlihat seperti pada halaman di PC sedangkan ukuran layar perangkat yang kita gunakan sangat jauh lebih kecil, ribet, harus geser-geser  layar untuk melihat semua isi halaman, sangat menyiksa bukan ?! imbasnya, pengguna akan kabur dengan berbagai alasan.

Pengaturan versi mobile sendiri sebenarnya sudah disediakan pihak blogger, itu bisa kita temukan di Dasbor->Template->Seluler. Tapi saya sengaja tidak mengaktifkan fitur ini karena terkesan monoton dan mengingat kembali blog ini juga memasang beberapa script iklan (bukan google adsense), yang tidak akan muncul bila di buka dengan fitur seluler bawaan blogger (berbeda dengan iklan Google adsense yang sudah responsif).

2. Semakin berhembusnya kabar google akan segera melakukan update algoritma, algoritma mobilegeddon  2015.

Update algoritma google memang tidak bisa kita tebak kapan akan dilakukan, itu menjadi rahasia umum, tapi biasanya pihak google juga sudah memberi aba-aba jenis update apa yang akan dikeluarkan jauh hari sebelum update itu terjadi. Dan sejak akhir tahun 2014 kemarin, yang paling sering didengar adalah akan diadakannya update yang bernama mobilegeddon.

Algoritma mobilegeddon sendiri dilancarkan google untuk memperbarui hasil pencarian dalam versi mobile, namun tidak menutup kemungkinan hal ini juga akan berlaku pada hasil pencarian versi desktop. Algoritma mobilegeddon memberi ranking berdasarkan pantas tidaknya suatu halaman blog atau web menempati posisi terbaik mesin pencari dengan cara memasukkan faktor mobile friendly.

 ***

Setelah diskusi dengan beberapa teman webmaster dan yang sangat paham dengan SEO, kalau saya mah belum ngerti dalam dua bidang ini :). Kesimpulan yang didapat adalah, salah satu strategi  untuk mengantisipasi imbas dari update algoritma mobilegeddon itu adalah dengan segera mengganti template blog dengan yang responsif. Karena seperti yang sudah saya sebutkan diatas, algoritma mobilegeddon bisa dikatakan sebuah perintah dari google untuk menekankan kepada kita para pemilik blog-web agar memberikan penggunaan versi mobile yang nyaman dalam blog-web, Jauh hari google sudah mengkampanyekan hal ini, mengingat ditahun-tahun belakangan pengguna internet dengan smartphone 2 kali lipat lebih banyak dari versi desktop.

Kalau kita sudah menjalankan perintah dari mbah google ini, berarti satu tugas sudah terselesaikan dan kita sudah berada pada satu titik aman untuk mengahadapi update algoritma mobilegeddon.

Cara termudah untuk memberikan tampilan yang nyaman kepada pengakses blog-web adalah dengan menggunakan template yang responsif.

Mulai berburu template, sempat nyari2 di situs luar dan lokal, yang gratis maupun berbayar. Saya tertarik pada satu template buatan luar yang cukup keren, dengan harga 20$, dan nyaris saya putuskan untuk membelinya. Tapi pilihan akhirnya jatuh pada template buatan seorang teman blogger. Dan setelah dipikir2 template yang diberikan teman itu juga tidak kalah bagus dibanding template yang ingin saya beli, toh uang dengan nominal 20$ cukup berharga bagi saya. Mending digunakan untuk hal2 yang lebih bermanfaat #Alasan #MentalGakModal.

Si teman yang sudah mahir dalam hal membuat template memberikan mentahnya, saya dari dulu juga kurang nyaman kalau memakai suatu barang dengan versi bawaan, maunya harus dimodif dulu (sudah sifat dari kecil), dengan beberapa modifikasi struktur disana-sini, jadilah seperti yang bisa sobat blogger semua lihat pada tampilan blog sekarang.

Spesifikasi template ini sudah memenuhi syarat2 yang sangat saya butuhkan untuk jaga2 dari update algoritma google mobilegeddon. Terlebih template ini sangat minimalis sekali dan cocok jika dipasangi iklan PPC, karena biasanya template minimalis sangat tinggi CTR, (ingat, tujuan awal saya ngeblog selain bisa mengasah kemampuan menulis, berbagi ide, cerita, juga bisa mendapatkan penghasilan tambahan dari blog itu sendiri. HeHeHe...)

Fitur yang dimilikinya antara lain :


Responsive
Ads Ready
Valid HTML5 + CSS3 (All Page)
Valid Author Rich Snippet
Webmaster Structured Data
SEO + User Friendly
Fast Loading
HCard Author and Update ( Home Page, PostPage and SaticPage )
Auto Readmore
Breadcrumbs
Related Posts
Cool Threaded Comment
Share Button
Page Navigation
Custom Error Page
Custom Navigation In Post Page
Back Top Top Button
And more.

Setelah menggunakannya, perbedaan yang sangat saya rasakan ada pada pageview blog, meningkat 3 kali lipat, kadang lebih. Karena ditemplate baru ini fitur navigasi (seperti page postingan terbaru, postingan terpopuler, dll) semua muncul pada saat blog dibuka dengan versi mobile. Link yang terlihat dan diklik jadi lebih banyak. Kecepatannya saat diaksespun sangat fast load karena tidak terlalu banyak memakai script.

Dan yang paling menyenangkan, ketika update algoritma google mobilegeddon benar2 dilakukan google pada tanggal 21 april 2015 kemarin, blog ini tidak mengalami perubahan yang signifikan dari sisi peringkat dan trafik. Artinya, tujuan awal saya mengganti template berhasil.

Oke, untuk teman2 blogger yang kemarin nanya2, ingin mengganti serta mencoba template responsif seperti template saya ini, silahkan culik disini. Sebelumnya saya sudah minta izin kok pada si teman untuk mempubikasikannya. Lagian, versi template yang saya bagikan ini adalah versi yang saya gunakan sekarang, jadi sudah sangat berbeda dengan script yang diberikan waktu pertama kali.

Keunggulannya sendiri sudah terbukti, berikut hasil pengecekan di Google Page Speed Insight.

Tampilan-Mobile-Template


HTML-5


Test-HTML-5





Tampilan tata letak


Tata-letak




Ada beberapa hal yang harus di sesuaikan untuk Pengaturan Setelah memasang template ini , oleh karena itu silakan diikuti.

Ganti ID dan Nama

<meta content='ID Google Webmaster' name='google-site-verification'/>
<meta content='ID Bing Webmaster' name='msvalidate.01'/>
<meta content='ID Alexa' name='alexaVerifyID'/>
<link href='https://plus.google.com/ID Google Plus/posts' rel='publisher'/>
<link href='https://plus.google.com/ID Google Plus/about' rel='author'/>
<link href='https://plus.google.com/ID Google Plus' rel='me'/>

Perhatikan kode yang saya tandai, silakan ganti kode tersebut.

Meta Tag

Sebelum memasang Meta Tag silakan sobat aktifkan Meta Tag pada Setelan.

  1. Masuk ke blogger dan pilih Setelan
  2. Pilih Preferensi Penelusuran
  3. Kemudian pilih Meta Tag > Deskripsi
  4. Silakan isi dengan deskripsi blog yang di inginkan
  5. Simpan
Meta Tag pada postingan silakan sobat ikuti cara dibawah ini.

  1. Buat Postingan
  2. Lihat sebelah kanan ada menu Deskripsi Penelusuran, klik dan isi dengan deskripsi yang di inginkan.
  3. Selesai
Nonaktifkan Mobile Version

Silakan sobat matikan fitur mobile pada template ini, agar fitur responsive bekerja pada perangkat mobile.

  1. Masuk ke Setelan
  2. Pilih Template
  3. Klik Icon Gerigi pada Seluler
  4. Pilih Tidak. Tampilkan template seluler di perangkat seluler.
  5. Simpan
Menu Navigasi

Silakan cari kode dibawah ini dan ganti linknya sesuai keinginan.

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href='/' title='Home'>Home</a></li>
<li><a href='/' title='Kontak Kami'>Contact Us</a></li>
<li><a href='/' title='Kebijakan Privasi'>Privacy Policy</a></li>
<li><a href='/'>Disclaimer</a></li>
<li><a href='/' title='Ketentuan Kebijakan Sayarat dan Layanan'>Term of Service</a></li>
<li><a href='/' title='Forum Diskusi / OOT'>Forum OOT</a></li>
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>

Validasi HTML 5 Widget

Jika ingin menambahkan widget baru silahkan cari kode ini <b:include name='quickedit'/> lalu hapus kode tersebut agar blog sobat tetap valid HTML 5.

***

Template ini cocok digunakan untuk semua jenis blog, personal atau umum. Sangat saya rekomendasikan bagi teman-teman yang fokus dengan PPC.

Sekian dulu sob, postingan tentang template blog responsif, semoga template yang saya bagikan ini bisa bermanfaat bagi sobat blogger semua.

Share :

Facebook Twitter Google+
20 Komentar untuk "Template blog responsif"

Template ini blog benar-benar simpel...

Makasih ya infonya. Mau nyobain juga pakai template yang lebih responsive :)

Iya ya.. Klo tampilan mobile gk dimatikan, templatenya jadi default dr blogger gitu. Gk keliatan iklan yg kita pasang :D

Mmm jd punyaku responsif ga mas templatenyaaa

Daleeeeemmmmm

wkwkwkwkwk

wahhh ilmu baru nih bang
template responsif

Sepertinya belum deh mbak, silakan dicoba template saya itu. #Promosi HeHe...

saya suka template seperti ini, tampilan simple
makasih mas, pas banget untuk ganti templet

wah mantap, enak dilihat dan nyaman ya.. minta pendapat dong kalau blog saya bagaimana?

Udah keren, responsif juga. Tapi biar tambah keren lagi, mending pake Template saya aja. HaHa #PromosiLagi

blog aul udah responsif belum sih bang?

Belum, template seperti itu sudah sangat ketinggalan dari sisi SEO Aul, buruan ganti.

Moga aja punyaku responsif jadi ga perlu gonta ganti lagi template hihihi

Keren nih template ane juga make template ini hehe...

Wah templateku juga belum responsif nih, untungnya sudah nemu template yang pas tinggal pasang templatenya yang belum.

mmm udah nyaman dengan template sekarang sih bang ..
cuma masih jengah aja karna belum terlalu responsive ,,
Males ngutak-ngatik skript nya .. :((
Barangkali mas Yozi mau bantu .. hehehe *modus*

blog saya tampilan mobile phone nya di hilangin, padahal responsif, tapi sekarang udah ngga responsif lagi...

Punya kayaknya perlu diganti dehhh

mantap juga nih template nya cuman ditampilan kompi ku agak kurang lebar aja sih :)
loading oke banget :)

Buat yang gak punya akun blogger masih bisa ikutan koment kok. Caranya,
Pilih (Name/Url) lalu masukan nama dan link kamu (misal link FB).

Thanks buat yang ninggalin koment #KissHug

Pengikut

Back To Top