Tips Supaya Blog Tidak Berat Loading
Kompres css Blog Agar blog tidak loading Berat
2. Setelah mengukur loading blog anda, pikirkan kembali untuk menyingkirkan widget di bloganda yang tidak terlalu penting.
5. Klik "Download Template Lengkap" untuk mem-Back Up template anda, simpan juga semuakode css blog anda di notepad untuk jaga-jaga.
PENTING : Setelah dikompres nanti kode css template blog anda akan menjadi hampir tidak memiliki jarak, karena kompres css yang dilakukan disini prinsipnya adalah memadatkan/mengurangi jarak pada css blog, salah satunya adalah menghilangkan spasi pada kode css blog anda. Artinya hal ini akan membuat anda sedikit kurang nyaman atau pusing ketika akan kembali meng-editnya kelak. Karena itulah back-up sangat diperlukan disini.
6. Centang kotak Expand Template Widget
7. Cari (Ctrl+F) kode : <b:skin><![CDATA[/*
Perhatikan di bawah kode tersebut, jika css blog anda tidak mengandung "tag variable definitions" seperti di bawah ini :
<b:skin><![CDATA[/*
/* Use this with templates.html */
body#layout #subscription,body#layout #topsearch,body#layout #footer,body#layout #footer2 {display:none;}*{margin:0;padding:0}#
/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6 bla-bla-bla
maka AMBIL semua kode CSS dari setelah kode <b:skin><![CDATA[/* sampai pada kode sebelum]]></b:skin>
Namun jika tepat di bawah kode <b:skin><![CDATA[/* terdapat "tag variable definitions" seperti di bawah ini :
PERHATIKAN tag Variable definitions tersebut dan JANGAN DI IKUT SERTAKAN UNTUK DI KOMPRES !! Jika dilihat dengan seksama maka "anak dari tag Variable Definitions" memiliki bentuk penulisan kode seperti ini :<Variable name="keycolor" dst.. . Nah perhatikan saja kode-kode dengan penamaan seperti itu untuk diabaikan lalu ambil kode tepat di bawah setelah tag variable definitions tersebut berakhir.
CONTOH :
8. Buka dan kompres kode-kode tersebut di situs : [CSS compressor]
9. Ganti settingan compress css menjadi seperti ini :
11. Masih belum selesai, sekarang cari kode <body> atau </head>
13. Copy paste-kan kode hasil kompresan tersebut ditempat semula yaitu diantara setelah kode <BODY> hingga sebelum kode </BODY>
14. Klik >> Simpan
15. Ukur kembali berat loading blog anda, cara menimbang berat loading template anda masih sama seperti cara di atas, buka saja salah satu website pengukur loading blog berikut ini :
1. Sebelum anda kebanyakan melancarkan aksi, lebih baik cek atau ukur dulu berat blog anda sehingga anda tau berapa lama loading blog anda, saya sendiri biasa menggunakan :
Ariel nanya lagi : “kenapa harus diukur ?”
Luna menjawab : “untuk jadi patokan ‘sebelum dan sesudah’ css blog kamu dikompres ntar”
2. Setelah mengukur loading blog anda, pikirkan kembali untuk menyingkirkan widget di bloganda yang tidak terlalu penting.
>> Bagi anda pengguna draft blogger yang baru maka bisa mengakses Edit HTML dengan cara :
>> Pada Address Bar ketik : http://draft.blogger.com/html?blogID=2330173393363331430
>> Ganti tulisan yang berwarna MERAH dengan blogID akun blogger anda
5. Klik "Download Template Lengkap" untuk mem-Back Up template anda, simpan juga semuakode css blog anda di notepad untuk jaga-jaga.
PENTING : Setelah dikompres nanti kode css template blog anda akan menjadi hampir tidak memiliki jarak, karena kompres css yang dilakukan disini prinsipnya adalah memadatkan/mengurangi jarak pada css blog, salah satunya adalah menghilangkan spasi pada kode css blog anda. Artinya hal ini akan membuat anda sedikit kurang nyaman atau pusing ketika akan kembali meng-editnya kelak. Karena itulah back-up sangat diperlukan disini.
6. Centang kotak Expand Template Widget
7. Cari (Ctrl+F) kode : <b:skin><![CDATA[/*
Perhatikan di bawah kode tersebut, jika css blog anda tidak mengandung "tag variable definitions" seperti di bawah ini :
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name : Panduan-Info
Designer : Justin Bieber
----------------------------------------------- */
/* Use this with templates.html */
body#layout #subscription,body#layout #topsearch,body#layout #footer,body#layout #footer2 {display:none;}*{margin:0;padding:0}#
/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6 bla-bla-bla
maka AMBIL semua kode CSS dari setelah kode <b:skin><![CDATA[/* sampai pada kode sebelum]]></b:skin>
CONTOH :
<b:skin><![CDATA[/*
| AMBIL DARI SINI
.....................
SAMPAI DISINI | ]]></b:skin>
| AMBIL DARI SINI
.....................
SAMPAI DISINI | ]]></b:skin>
Namun jika tepat di bawah kode <b:skin><![CDATA[/* terdapat "tag variable definitions" seperti di bawah ini :
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name : Panduan-Info
Designer : Justin Bieber
URL : http://panduan-info.blogspot.com
----------------------------------------------- */
/* Variable definitions
====================
bla bla bla bla...
-----------------------------------------------
Blogger Template Style
Name : Panduan-Info
Designer : Justin Bieber
URL : http://panduan-info.blogspot.com
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#000000"/>
bla bla bla bla...
PERHATIKAN tag Variable definitions tersebut dan JANGAN DI IKUT SERTAKAN UNTUK DI KOMPRES !! Jika dilihat dengan seksama maka "anak dari tag Variable Definitions" memiliki bentuk penulisan kode seperti ini :<Variable name="keycolor" dst.. . Nah perhatikan saja kode-kode dengan penamaan seperti itu untuk diabaikan lalu ambil kode tepat di bawah setelah tag variable definitions tersebut berakhir.
CONTOH :
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name : Panduan-Info
Designer : Justin Bieber
URL : http://panduan-info.blogspot.com
----------------------------------------------- */
/* Variable definitions
====================
bla-bla-bla..
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
-----------------------------------------------
Blogger Template Style
Name : Panduan-Info
Designer : Justin Bieber
URL : http://panduan-info.blogspot.com
----------------------------------------------- */
/* Variable definitions
====================
bla-bla-bla..
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
*/
| AMBIL DARI SINI
/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
SAMPAI DISINI | ]]></b:skin>
8. Buka dan kompres kode-kode tersebut di situs : [CSS compressor]
9. Ganti settingan compress css menjadi seperti ini :
- Compression mode = pilih 'Super Compact'
- Comments handling = pilih 'Strip ALL comments'
Kemudian klik "Compress-it!
10. Kemudian tempatkan hasil kompresannya di tempat semula kode itu berasal.
CONTOH :
<b:skin><![CDATA[/* |TARUH DISINI
..................... SAMPAI DISINI |
]]></b:skin>
..................... SAMPAI DISINI |
]]></b:skin>
11. Masih belum selesai, sekarang cari kode <body> atau </head>
kemudian AMBIL semua kode setelah <body> atau </head> hingga sebelum </body>
CONTOH :
<body> |AMBIL DARI SINI
..................... SAMPAI DISINI | </body>
..................... SAMPAI DISINI | </body>
13. Copy paste-kan kode hasil kompresan tersebut ditempat semula yaitu diantara setelah kode <BODY> hingga sebelum kode </BODY>
CONTOH :
<body> |TARUH DISINI ..................... SAMPAI DISINI | </body>
14. Klik >> Simpan
15. Ukur kembali berat loading blog anda, cara menimbang berat loading template anda masih sama seperti cara di atas, buka saja salah satu website pengukur loading blog berikut ini :
Leave a Reply