Trik Menyembunyikan CSS Reset Stylesheet Blogger

Trik Menyembunyikan CSS Reset Stylesheet Blogger

Bola Hero Gawai

Trik Menyembunyikan CSS Reset Stylesheet Blogger

CSS Reset Stylesheet Blogger
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.

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


&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<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}

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×