Oprek Variable Definitions Blog

Postingan ini masih berhubungan dengan mempercepat loading blog dengan cara mudah pada postingan sebelumnya. Cara tersebut bisa saya katakan mudah tetapi cukup signifikan untuk meningkatkan loading blog tetapi cara tersebut tidak akan berfungsi apabila komponen file css masih menggunakan komponen Variable Definitions sebagai definisi2 dari file css tersebut. Hal ini baru saya ketahui saya coba aplikasikan cara mempercepat loading blog tersebut ke blog saya yang juga menggunakan Variable Definitions sebagai definisi file css. Apa hasilnya?? Blog saya menjadi berantakan alias trik tersebut tidak berfungsi. Hal ini tidak saya temukan pada blog saya yang lain yang tidak menggunakan Variable Definitions sebagai definisi file css seperti pada blog Just a Blog ini dan blog Blogger Template by ireng_ajah. Trik tersebut berjalan normal dan cukup signifikan dalam mengurangi ukuran blog.

Bagaimana jika mau menggunakan trik itu tetapi Variable Definitions masih ada??

Variable definitions menurut saya adalah nilai untuk mendefinisikan file css yang ada baik itu untuk warna, font, ukuran font, dll.

Penulisan Variable Definitions pada file css menggunakan awalan "$" (tanpa tanda petik). Misalnya untuk warna link blog:

<variable name="linkcolor" description="Link Color" type="color" default="#384" value="#000000">

Untuk penulisan file css menjadi

a:link {
color:$linkcolor;
text-decoration:none;
}

linkcolor (value="#000000") pada Variable Definitions tersebut sebagai definisi warna untuk Link Blog. Penulisan pada css untuk link menjadi color:$linkcolor;

Apabila Variable definitions tersebut mau diterjemahkan langsung ke file css-nya, maka penulisan pada file css menjadi :

a:link {
color:#000000; (sama dengan value pada Variable definitions)
text-decoration:none;
}

* perhatikan warna biru dan merah


Untuk menterjemahkan Variable definitions yang lain langsung ke file css, tinggal samakan saja pada variabel name-nya dan valuenya. Melihat penterjemahan langsung Variable definitions ke file css yang saya lakukan pada blog saya, ada beberapa file css yang perlu ditambahkan kode baru. Yang sering saya temui yaitu pada font.

Jika masih menggunakan Variable definitions, penulisan font pada css akan seperti ini :

font: $bodyfont;

Tetapi jika langsung pada file css-nya, biasanya saya menuliskannya menjadi :

font: 14px arial; atau menjadi

font-size:14px;
font-weight:bold;
font-family:arial;

Untuk manfaat dan kerugian menggunakan Variable definitions atau menterjemahkan langsung ke css, saya sendiri aslinya gak terlalu paham, hehehehehe... Tetapi jika ingin menggunakan trik mempercepat loading blog dengan cara mudah, Variable definitions tersebut harus diterjemahkan dulu ke file css-nya.

Selain itu juga, trik mempercepat loading blog ini juga tidak akan berfungsi untuk template yang menggunakan tambahan file css dibawah kode ]]></b:skin> seperti pada blog saya free blogger template ajah

]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<---- file css ada disini ---->

</b:if>
</style>

File css pada bagian tersebut cukup di kompres saja dan tidak perlu menggunakan link eksternal. Links eksternal file css hanya untuk file css yang berasa diatas kode ]]></b:skin>


Terimakasih unuk sobat Blogging sehingga saya jadi tau soal ini.