Trik Menyembunyikan CSS Reset Stylesheet Blogger

Karena aku penasaran dengan error pada W3C dan sebuah widget (apa itu namanya...saya sebut saja widget CSS Bundle Blogger) yang membebani loading blog, aku googling terus untuk mencari cara mengatasinya.

Pencarian aku alhasil 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 isyarat ibarat 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 isyarat di atas ada 2 buah CSS (widget_css_bundle.css dan authorization.css). Untuk isyarat CSS pertama itu menjadikan loading blog lebih berat. Dan untuk isyarat CSS kedua itu menyumbangkan error pada validasi HTML5 yang kedua-duanya sering aku sebut "kode siluman" heheehe...terserah Anda mau menyebutnya silaman apa...hehehe.... Karena bila Anda mencoba untuk mencari isyarat tersebut di edit HTML, aku yakin Anda pasti tidak akan menemukannya.

Nah pada trik yang mas Damar Zaki paparkan ialah dengan cara menyembunyikannya sehingga tidak terlacak browser, bukan menghilangkannya. Namun dalam hal ini ada yang perlu diperhatikan, bila 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 aku pakai dan buktikan, ternyata berhasil baik pada validasi HTML5 maupun loading blog yang meningkat lebih ringan. Coba saja lihat "Page Source" halaman ini, isyarat 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 aku coba sederhanakan triknya. Silahkan ikuti trik sederhana di bawah ini.

Biasanya isyarat CSS pembentuk blog akan ibarat di bawah ini:

 
 <b:skin><![CDATA[
 ......
 KODE CSS DI SINI...
 ......
 ]]></b:skin>
 

Perhatikan isyarat yang berwarna merah dan biru, itu yang akan kita ganti.

Untuk isyarat yang berwarna merah silahkan ganti dengan isyarat di bawah ini

  <style type="text/css">
 &lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
 <style type='text/css'> 

Dan untuk isyarat yang berwarna biru silahkan ganti dengan isyarat 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 isyarat CSS di bawah ini dan satukan dengan isyarat CSS lainnya.

  #blog-pager-newer-link{float:left}
 #blog-pager-older-link{float:right}
 #blog-pager{text-align:center}