Ditulis oleh: Ditulis pada: 4/11/2013
Karena saya penasaran dengan error pada W3C dan sebuah widget (apa itu namanya...saya sebut saja widget CSS Bundle Blogger) yang membebani loading blog, saya googling terus untuk mencari cara mengatasinya.
Pencarian saya akhirnya berlabuh pada sebuah blog DamZaky kepunyaaan mas Damar Zaki, seorang blogger asal Bandung yang sepertinya mengkhususkan pada tutorial "Koding".
Seperti apa sih CSS Reset Stylesheet Blogger atau widget CSS Bundle Blogger itu? Jika Anda melihat "Page Source" blog Anda dengan CTRL + U, Anda akan melihat kode seperti di bawah ini:
<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/2761160889-widget_css_bundle.css' />
<link type="text/css" rel="stylesheet" href="//www.blogger.com/dyn-css/authorization.css?targetBlogID=5187131679737497634&zx=3763bd4d-298d-41d6-9a30-9b4bd68ba958"/>
Pada kode di atas ada 2 buah CSS (widget_css_bundle.css dan authorization.css). Untuk kode CSS pertama itu mengakibatkan loading blog lebih berat. Dan untuk kode CSS kedua itu menyumbangkan error pada validasi HTML5 yang kedua-duanya sering saya sebut "kode siluman" heheehe...terserah Anda mau menyebutnya silaman apa...hehehe.... Karena jika Anda mencoba untuk mencari kode tersebut di edit HTML, saya yakin Anda pasti tidak akan menemukannya.
Nah pada trik yang mas Damar Zaki paparkan adalah dengan cara menyembunyikannya sehingga tidak terlacak browser, bukan menghilangkannya. Namun dalam hal ini ada yang perlu diperhatikan, jika kita menggunakan trik ini maka widget yang kita gunakan dari blogger (widget yang diambil dari edit gadget pada tata letak/layout) tidak akan berfungsi atau error.
Trik ini sudah saya pakai dan buktikan, ternyata berhasil baik pada validasi HTML5 maupun loading blog yang meningkat lebih ringan. Coba saja lihat "Page Source" halaman ini, kode di atas sudah tidak berwarna lagi kan...? Alias warnanya menjadi hitam artinya bukan link hidup sehingga browser mengabaikannya.
Jika Anda ingin mencobanya silahkan ikuti tutorial dari mas Damar Zaki DI SINI.
Biasanya kode CSS pembentuk blog akan seperti di bawah ini:
Perhatikan kode yang berwarna merah dan biru, itu yang akan kita ganti.
Untuk kode yang berwarna merah silahkan ganti dengan kode di bawah ini
Dan untuk kode yang berwarna biru silahkan ganti dengan kode di bawah ini
Selesai.... Silahkan save templatenya.
Dengan trik ini biasanya yang paling terlihat berubah yaitu blog pager-nya menjadi ngumpul di tengah (next, prev, dan home). Nah untuk mengatasinya silahkan tambahakan kode CSS di bawah ini dan satukan dengan kode CSS lainnya.
Nah pada trik yang mas Damar Zaki paparkan adalah dengan cara menyembunyikannya sehingga tidak terlacak browser, bukan menghilangkannya. Namun dalam hal ini ada yang perlu diperhatikan, jika kita menggunakan trik ini maka widget yang kita gunakan dari blogger (widget yang diambil dari edit gadget pada tata letak/layout) tidak akan berfungsi atau error.
Trik ini sudah saya pakai dan buktikan, ternyata berhasil baik pada validasi HTML5 maupun loading blog yang meningkat lebih ringan. Coba saja lihat "Page Source" halaman ini, kode di atas sudah tidak berwarna lagi kan...? Alias warnanya menjadi hitam artinya bukan link hidup sehingga browser mengabaikannya.
Jika Anda ingin mencobanya silahkan ikuti tutorial dari mas Damar Zaki DI SINI.
UPDATE:
Karena masih ada yang kurang paham cara penggunaan trik ini, maka saya coba sederhanakan triknya. Silahkan ikuti trik sederhana di bawah ini.Biasanya kode CSS pembentuk blog akan seperti di bawah ini:
<b:skin><![CDATA[
......
KODE CSS DI SINI...
......
]]></b:skin>
Perhatikan kode yang berwarna merah dan biru, itu yang akan kita ganti.
Untuk kode yang berwarna merah silahkan ganti dengan kode di bawah ini
<style type="text/css">
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
Dan untuk kode yang berwarna biru silahkan ganti dengan kode di bawah ini
</style>
Selesai.... Silahkan save templatenya.
Dengan trik ini biasanya yang paling terlihat berubah yaitu blog pager-nya menjadi ngumpul di tengah (next, prev, dan home). Nah untuk mengatasinya silahkan tambahakan kode CSS di bawah ini dan satukan dengan kode CSS lainnya.
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager{text-align:center}