Kali ini saya akan sharing tentang cara agar Loading Blog 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. Sebenarnya ini rahasia para master hingga sedikit sekali yang ngungkap masalah ini. Karena saya bukan master jadi saya bongkar aja rahasianya . Ini juga kadung telah janji pada postingan dulu sehingga sobat Munir Ardi menunggu postingan ini.. hehe
Kecepatan loading blog selain dipengaruhi oleh koneksi juga dipengaruhi oleh berat/ringannya blog tersebut, dan untuk mengurangi berat blog bisa dengan membuang pernak-pernik yang kurang penting, compress css dan bisa juga dengan membuat CSS External dengan cara memotong CSS dan menyimpannya di tempat hosting , cara terakhir inilah yang sekarang akan kita bicarakan.
Sebelum kelangkah berikutnya ada baiknya kita refresh dulu mengenai :- Apa dan bagaimana mengkompres CSS silahkan lihat disini.
- Apakah blog anda berat ?? lihat disini
- Sebelum membuat CSS External ketahui dulu berapa berat blog anda. catat agar nanti tahu berapa banyak pengurangannya.. silahkan timbang dulu di Posyandu
- Karena CSS ini akan disimpan di tempat hosting maka sebaiknya anda yakin dulu bahwa tampilan blognya seperti itu , misalnya background, jenis huruf, lebar kolom, struktur sidebar dsb. artinya tidak akan dirubah lagi. walaupun sebenarnya ini tidak mutlak karena bisa di host lagi.
- Siapkan makanan ringan atau kopi dulu biar kerjanya lebih tenang
- Sesudah itu yo.. kita mulai langkah2nya :
- Masuk ke Account Blogger anda atau Dashboard.
- Klik Layout dan pilih Edit HTML.
- Backup dulu templatenya dengan Klik Download Full Template
- Gak usah mencentang Expand Widget Template
- Kode CSS itu letaknya antara <b:skin><![CDATA[/* sampai dengan sebelum kode ]]></b:skin>
- Cari kode seperti ini ( contoh template blog ini, mudah2an sama):
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Revolution Crunch Wordpress Theme
Designer: Brian Gardner
URL: www.briangardner.com
Converted into blogger by: Dinesh Dhakal
URL: www.bloganol.com
----------------------------------------------- */
#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> - Simpan di notepad kemudian di Save dengan ekstensi .css , caranya ya klik File pilih Save As .. di kolom file name tulis misalnya : cssblogsaya.css atau saungweb.css lalu Save.
- Setelah disave berarti kita sudah punya file css, lalu Upload ke tempat hosting, misalnya di google site.
- Cara uploadnya silahkan lihat di Cara Hosting File di Google Site , disini juga sudah saya beri contoh file css yang dihost disana ada pada point 10.
- Jika sudah dapat filenya misalnya filenya seperti ini
<link href='http://sites.google.com/site/saungwebsite/js/saungweb2.css' rel='StyleSheet' type='text/css'/>
Copy file tersebut dan pastekan di antara : ]]></b:skin> dan </head> , lihat contohnya seperti ini :
]]></b:skin>
<link href='http://sites.google.com/site/saungwebsite/js/saungweb2.css' rel='StyleSheet' type='text/css'/>
</head> - Silahkan preview dulu kalau sudah ok baru Save Template
- Jika semuanya ok.. berarti selesai .. tinggal sujud syukur saja . dan silahkan komentar disini ..hehe..
Demikianlah caranya agar Loading Blog Cepat Dengan CSS External yang disimpan ditempat hosting gratisan seperti google site .. semoga bermanfaat
