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 :
- Login ke blogger.
- Silahkan tuju Elemen Halaman.
- Klik Edit Template.
- Biasakan backup template dulu sebelum melakukan perubahan.
- Lalu klik Expand Template Widget.
- 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 } - Sudah ketemu kan? nah sekarang buka notepad, lalu copy paste semua kode css milik sobat kedalam notepad.
- Setelah itu simpan file tersebut dalam bentuk css, sebagai contoh sobat bisa simpan dengan nama style.css
- Sekarang login ke hosting gratis yang sudah sobat daftarkan tadi, kemudian upload file style.css ke hosting tersebut.
- Setelah upload berhasil, sobat akan mendapatkan kode url, contoh seperti punya saya :
- Kemudian ubah kode url tersebut menjadi seperti ini :
<link href='http://miscah.googlecode.com/files/header.css' rel='stylesheet' type='text/css'/>
- Dan letakkan kode tersebut tepat setelah kode ]]></b:skin>
- Sehingga hasilnya menjadi seperti berikut ini :
]]></b:skin>
<link href='http://miscah.googlecode.com/files/header.css' rel='stylesheet' type='text/css'/>
</head>
- Jangan lupa Simpan Template.
Mudah kan, iya siapa bilang susah. Yang bilang susah berarti orang yang malas berpikir. Oke deh selamat mencoba !
Tweet
|
Berlangganan artikel terbaru via Email
|
25 comments
Mantap tutorialnya. Cobain dulu ah. Makasi sob!
mantapp langsung dipraktekkan
ripway suka sering ngedown bagi yg gratisan Bos hiks....:(
Gimana nich ngecek cepet ato gaknya,kayaknya hmpir sama dech dengan yang sebelumnnya...
@ Fais : bs baca disini mas fais
ini di tambahin apa di ganti c mas,, kode css-nya
sorry masih bingung...
saya sdh coba tp tetap tdk bisa sob..hasilnya aneh, templatenya jd berubah..
yg ni, kodenya di ganti, pa cuma di tambahin ma yang dari google code??
thx..
coba dlu ah
wah bagus bang..sudah ane cobain jangan lupa berkunjung ke blog ane yah
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 !!
Langsung ke TKP Bos untuk mencoba, terimakasih atas share-nya...
salam kenal
saya udah coba berkali2, cuma sayang, malah merubah tampilan blog saya. Akhirnya saya kembalikan seperti semula
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
sob... kok blog ane jadi amburadul?
tolong kasik pencerahan .... thank's
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 ?
info yg mnarik!
thnks info ny
makasih gan infonya sangat bermanfaat... saya coba praktekin dulu soalnya load blog saya kayak siput ...
mantab bang sudah saya coba dan hasilnya memuaskan....mahesa (makin hebat saja)
Hasilnya lebih cepat mana mas, seandainya dihosting di site.google? saya host di site.google.com
Nice Post! :)
dicoba diblogku...
mantaop
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
Lha kaloq sewaktu-waktu kita pengen ngedit CSS nya gimana nie bro??repot donk..
Posting Komentar