Cara Mempercepat Loading Blog With CSS External

Mengingat kecepatan akses blog sangatlah penting dan berpengaruh besar untuk sebuah website/blog, saya rasa trik ini sangatlah penting untuk dicoba. tidak jauh-jauh, sebagai contohnya blog saya ini, yang saya rasakan makin lama makin berat saja, hehehe :D dan kebanyakan blogger, bila koneksi lagi down pasti rada maleez tuh untuk mem-visite blog yang lumayan berat. hihihi :p
Karena itulah saya berusaha memaksimalkan, semaksimal mungkin mengompres dan mengurangi berat blog saya ini. kali ini saya akan membahas Cara Agar Loading Blog Lebih Cepat Dengan CSS External , Maksudnya adalah bagaimana kita menyimpan CSS (Cascading Style Sheet) ke tempat hosting agar blog sedikit ringan karena file CSS terpisah dengan file XML-nya.

sreenshot

Kecepatan loading blog, selain dipengaruhi oleh kecepatan koneksi, juga dipengaruhi oleh berat/ringannya blog itu sendiri. ada banyak cara untuk mengurangi berat blog yaitu dengan mengurangi jumlah widget/pernak-pernik blog yang tidak begitu penting, dengan cara mengkompres kode baik CSS maupun HTML, ataupun juga bisa dengan membuat CSS External, yang diupload/disimpan di webhosting. Dan yang akan saya bahas kali ini adalah membuat CSS External.

Sebelumnya cobalah sobat cek berat loading blog sobat Disini

1. Seperti biasa, Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget" ataupun tidak, tidak masalah.

Perhatikan kode CSS dibawah ini, kode tersebut terletak diantara kode
<b:skin><![CDATA[/* sampai dengan sebelum kode ]]></b:skin>

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Minima
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe{
display:none !important}
body{
background:#f5fffa;
width:980px;
color:#333;
font-size:12px;
font-family:Arial,Tahoma,Verdana;
margin:0 auto 0;
padding:0}
Potong atau Cut semua kode CSS-nya mulai dari sini sampai dengan diatas atau sebelum kode:
]]></b:skin>

6. Simpan di Notepad dengan ekstensi.css caranya: klik File, pilih Save As, beri nama file tersebut misal: Blogku.css lalu Save.
7. nah sampai disini kita sudah mempunyai file.css. Selanjutnya kita tinggal mengUpload/menyimpannya di WebHosting, misal yang saya pakai yaitu Google Site.
Bila belum mempunyai webhosting sendiri, silahkan lihat disini cara membuatnya.
8. Jika sudah meng-Uploadnya, misal:

http://sites.google.com/site/kodeblogger/JavaScript/blogku.css

Penulisan untuk scriptnya menjadi seperti dibawah ini:

<link href='http://sites.google.com/site/kodeblogger/JavaScript/blogku.css' rel='StyleSheet' type='text/css'/>

Letakan kode script diatas di antara kode: ]]></b:skin> dan </head> , lihat contohnya seperti ini :

]]></b:skin>
<link href='http://sites.google.com/site/kodeblogger/JavaScript/blogku.css' rel='StyleSheet' type='text/css'/>
</head>

9. Sebelum menyimpannya, harap di Preview terlebih dahulu, bila tampilan blog tetap pada aslinya, berarti sobat berhasil mempraktekannya. dan terakhir Save Template Sobat. Sippppp Selesaiiiii.


Catatan:
Setelah mengetahui cara diatas, pasti kita akan direpotkan saat kita akan menambah kode CSS pada template blog kita, yah... mau tidak mau kita harus mengedit dan meng-Upload kembali ke webhosting sobat.
Saya rasa cukup sekian dari saya, bila sobat blogger ada yang mengalammi kesulitan, silahkan berkomentarlah disini, dan semoga saja, saya bisa membantu.