Trik Menyembunyikan Css Reset Stylesheet Blogger
Karena aku ingin tau 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 risikonya berlabuh pada sebuah blog DamZaky kepunyaaan mas Damar Zaki, seorang blogger asal Bandung yang tampaknya 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 arahan 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 arahan di atas ada 2 buah CSS (widget_css_bundle.css dan authorization.css). Untuk arahan CSS pertama itu mengakibatkan loading blog lebih berat. Dan untuk arahan 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 kalau Anda mencoba untuk mencari arahan tersebut di edit HTML, aku yakin Anda niscaya tidak akan menemukannya.
Nah pada trik yang mas Damar Zaki paparkan yakni dengan cara menyembunyikannya sehingga tidak terlacak browser, bukan menghilangkannya. Namun dalam hal ini ada yang perlu diperhatikan, kalau kita memakai 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, arahan 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 arahan CSS pembentuk blog akan ibarat di bawah ini:
Perhatikan arahan yang berwarna merah dan biru, itu yang akan kita ganti.
Untuk arahan yang berwarna merah silahkan ganti dengan arahan di bawah ini
Dan untuk arahan yang berwarna biru silahkan ganti dengan arahan 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 arahan CSS di bawah ini dan satukan dengan arahan CSS lainnya.
Nah pada trik yang mas Damar Zaki paparkan yakni dengan cara menyembunyikannya sehingga tidak terlacak browser, bukan menghilangkannya. Namun dalam hal ini ada yang perlu diperhatikan, kalau kita memakai 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, arahan 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 arahan CSS pembentuk blog akan ibarat di bawah ini:
<b:skin><![CDATA[
......
KODE CSS DI SINI...
......
]]></b:skin>
Perhatikan arahan yang berwarna merah dan biru, itu yang akan kita ganti.
Untuk arahan yang berwarna merah silahkan ganti dengan arahan di bawah ini
<style type="text/css">
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'> Dan untuk arahan yang berwarna biru silahkan ganti dengan arahan 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 arahan CSS di bawah ini dan satukan dengan arahan CSS lainnya.
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager{text-align:center}
0 Response to "Trik Menyembunyikan Css Reset Stylesheet Blogger"
Posting Komentar