Cara agar Loading Blog Cepat Dengan CSS External

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 :

1. Apa dan bagaimana mengkompres CSS silahkan lihat disini.
2. Apakah blog anda berat ?? lihat disini
3. Sebelum membuat CSS External ketahui dulu berapa berat blog anda. catat agar nanti tahu berapa banyak pengurangannya.. silahkan timbang dulu di Posyandu
4. 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.
5. Siapkan makanan ringan atau kopi dulu biar kerjanya lebih tenang
6. Sesudah itu yo.. kita mulai langkah2nya :

Agar Loading Blog Lebih Cepat Dengan CSS External, caranya :

1. Masuk ke Account Blogger anda atau Dashboard.
2. Klik Layout dan pilih Edit HTML.
3. Backup dulu templatenya dengan Klik Download Full Template
4. Gak usah mencentang Expand Widget Template
5. Kode CSS itu letaknya antara <b:skin><![CDATA[/*  sampai dengan sebelum kode ]]></b:skin>
6. 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 sinisampai dengan diatas atau sebelum kode  :

   ]]></b:skin>

7. 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.
8. Setelah disave berarti kita sudah punya file css, lalu Upload ke tempat hosting, misalnya di google site.
9. 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.
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>

11. Silahkan preview dulu kalau sudah ok  baru Save Template
12. 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

Artikel Terkait: