Tips Mempercepat Loading Blog (Part II)

hosting Pada tutorial sebelumnya, saya juga membahas tentang tips mempercepat loading blog dengan mengkompress kode css, namun hasilnya tidak terlalu jauh berbeda dengan sebelum di kompress.

 

Berbeda dengan yang akan saya jelaskan kali ini, saya akan coba memberikan tips mempercepat loading blog dengan cara menyimpan kode css di tempat hosting gratis.

 

Kecepatan loading yang dihasilkan lumayan cukup signifikan dengan sebelum kode css di simpan di hosting gratis. Caranya sangat mudah, namun sebelumnya sobat harus punya dulu hosting yang akan dijadikan tempat menyimpan kode css-nya. Tidak perlu bayar, yang gratisan banyak kok, sobat bisa coba di Google Code. Silahkan daftar dulu, sudah daftar? baiklah sekarang ikuti langkah-langkahnya berikut ini :

 

  1. Login ke blogger.

     

  2. Silahkan tuju Elemen Halaman.

     

  3. Klik Edit Template.

     

  4. Biasakan backup template dulu sebelum melakukan perubahan.

     

  5. Lalu klik Expand Template Widget.

     

  6. Perhatikan kode css milik sobat, saya akan berikan sedikit contoh :

     

    #header {
        width: 960px;
        height: 150px;
        color: #888888;
        background:#000;
        font-size: 14px;
        font-weight: normal;
        margin: 0px auto;
        padding: 0px;
        overflow: hidden;
        position: relative }

    #header p {
        padding: 0px 0px 5px 0px;
        margin: 0px;
        line-height: 20px }


    #header h1 {
        color: #FFFFFF;
        font-size: 35px;
        font-family: Times New Roman, Georgia, Trebuchet MS;
        font-weight: normal;
        margin: 0px;
        padding: 20px 0px 0px 0px;
        text-decoration: none }


    #header h1 a, #header h1 a:visited {
        color: #EEEEEE;
        font-size: 40px;
        font-family: Times New Roman, Georgia, Trebuchet MS;
        font-weight: normal;
        margin: 0px;
        padding: 20px 0px 0px 0px;
        text-decoration: none }


    #header h1 a:hover {
        color: #CCCCCC;
        text-decoration: none }

     

  7. Sudah ketemu kan? nah sekarang buka notepad, lalu copy paste semua kode css milik sobat kedalam notepad.

     

  8. Setelah itu simpan file tersebut dalam bentuk css, sebagai contoh sobat bisa simpan dengan nama style.css

     

  9. Sekarang login ke hosting gratis yang sudah sobat daftarkan tadi, kemudian upload file style.css ke hosting tersebut.

     

  10. Setelah upload berhasil, sobat akan mendapatkan kode url, contoh seperti punya saya :

     

    http://miscah.googlecode.com/files/header.css

     

  11. Kemudian ubah kode url tersebut menjadi seperti ini :

     

    <link href='http://miscah.googlecode.com/files/header.css' rel='stylesheet' type='text/css'/>

     

  12. Dan letakkan kode tersebut tepat setelah kode ]]></b:skin>

     

  13. Sehingga hasilnya menjadi seperti berikut ini :

     

    ]]></b:skin>

    <link href='http://miscah.googlecode.com/files/header.css' rel='stylesheet' type='text/css'/>

    </head> 

     

  14. Jangan lupa Simpan Template.

 

Mudah kan, iya siapa bilang susah. Yang bilang susah berarti orang yang malas berpikir. Laughing Oke deh selamat mencoba !

Berlangganan artikel terbaru via Email
Artikel Lainnya :

25 comments

20 November 2009 05.32

Mantap tutorialnya. Cobain dulu ah. Makasi sob!

20 November 2009 10.26

mantapp langsung dipraktekkan

21 November 2009 00.51

ripway suka sering ngedown bagi yg gratisan Bos hiks....:(

21 Februari 2010 23.13

Gimana nich ngecek cepet ato gaknya,kayaknya hmpir sama dech dengan yang sebelumnnya...

22 Februari 2010 00.04

@ Fais : bs baca disini mas fais

2 April 2010 09.41

ini di tambahin apa di ganti c mas,, kode css-nya
sorry masih bingung...

2 April 2010 11.08

saya sdh coba tp tetap tdk bisa sob..hasilnya aneh, templatenya jd berubah..

arey
18 April 2010 20.44

yg ni, kodenya di ganti, pa cuma di tambahin ma yang dari google code??
thx..

19 April 2010 02.53

coba dlu ah

23 April 2010 10.40

wah bagus bang..sudah ane cobain jangan lupa berkunjung ke blog ane yah

7 Juli 2010 23.50

Ane dah coba cara ente dari awak ampe akhir, tapi pas ane save ga bisa, dgn tulisan>> Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The character sequence "]]>" must not appear in content unless used to mark the end of a CDATA section.

Apa yang salah tuh gan?? sebelumnya thanks hib jawabannya !!

8 Juli 2010 14.23

Langsung ke TKP Bos untuk mencoba, terimakasih atas share-nya...
salam kenal

15 Juli 2010 02.53

saya udah coba berkali2, cuma sayang, malah merubah tampilan blog saya. Akhirnya saya kembalikan seperti semula

19 Juli 2010 16.15

tips yang menarik, mas. blog saya lemooot banget. mungkin karena banyak gambar nya kali ya :D
atau pengaruh banner berjalannya? saya ndak tau. soale lagi senang-senangnya bikin blog baru hohoho. jadi kalau lemot jadi pengunjung bakal kabur ya. waah… musti di rampingkan nih. terima kasih buat sharing infonya :) salam kenal dan happy blogging

1 September 2010 01.07

sob... kok blog ane jadi amburadul?
tolong kasik pencerahan .... thank's

2 September 2010 16.00

gak work gan, pas saya coba di kode header nya atau pun yang lainnya. Oia yg di simpan di .css tuh di hapus gak ? jadi misalkan

#header {
width: 960px;
height: 150px;
color: #888888;
background:#000;
font-size: 14px;
font-weight: normal;
margin: 0px auto;
padding: 0px;
overflow: hidden;
position: relative }

kita save, nah yang asli nya kan masih ada di atas ]]>, yang di atas itu di hapus atau gak ?

7 Oktober 2010 11.46

info yg mnarik!
thnks info ny

15 Oktober 2010 03.41

makasih gan infonya sangat bermanfaat... saya coba praktekin dulu soalnya load blog saya kayak siput ...

26 Desember 2010 00.51

mantab bang sudah saya coba dan hasilnya memuaskan....mahesa (makin hebat saja)

8 September 2011 15.43

Hasilnya lebih cepat mana mas, seandainya dihosting di site.google? saya host di site.google.com
Nice Post! :)

11 Oktober 2011 14.35

dicoba diblogku...

13 Oktober 2011 21.07

mantaop

13 Desember 2011 12.50

mantaff, sukses di blogku mas dody, salam kenal dari yang lg belajar. saya follow bognya ya, sungguh kebanggaan yang tak terhingga jika mas dody jg follow balik .thanks.

amazing
kunjung balik http://smaboy-bisa.blogspot.com

6 September 2012 23.09

Lha kaloq sewaktu-waktu kita pengen ngedit CSS nya gimana nie bro??repot donk..

Poskan Komentar

Reader Community

Recent Comments