Cara Mempercepat Loading Blog With CSS External

Viyan Pradita Rabu, Mei 11, 2011 ,

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.

Ditulis Oleh :

Artikel Cara Mempercepat Loading Blog With CSS External ini dipublish pada hari: Rabu, Mei 11, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

64 komentar
Terjun Ke Kolom Komentar

  1. It is always something wonderful and something awful over it.

    BalasHapus
  2. kereeeen sob tipsnya! mantafff ;) ane coba ah .... thx :D

    BalasHapus
  3. @telenovelastube.com: yap that's right, the problem is if the connection is slow, certainly the effect is to create a blog so messy.
    but if the current connection, all goes well.. :)

    @na2ngismail: Sip, Selamat mencobanya sob :D
    Kalu sudah, jgn lupa kasih tw tanggapannya/efek setelah dipraktekan.
    Thank sob.

    BalasHapus
  4. tips yang bagus untuk memperingan Blog, sukses selalu

    BalasHapus
  5. @Tanpa Isi: Makasih komentarnya sob... yupz, sukses juga sob :)

    BalasHapus
  6. mantepp banget inbi sob,.,.udah saya coba,.,hasilnya sangat memuaskan,.,blog saya jadii mantapp,.,bisa di cek di htp://arifsblogger.blogspot.com

    BalasHapus
  7. @arif nur: iya sob, lumayan kan jadi lebih ringan :D

    BalasHapus
  8. markotop dah blog nya boss

    BalasHapus
  9. @telenovelastube.com: Thanks for visit me blog bro ?? why awful bro? These are things that are easy to make and easy also to be repaired again. hehe

    @na2ngismail: Sip, met mencoba sob..

    @M Harun Is: makasih sob, buat kunjungan dan komentarnya :)

    BalasHapus
  10. @Mohon Maaf buat temen2 yang sudah berkomentar disini, dan komentarnya hilang, ini disebabkan karena dari kemarin hari kamis dan hari jum'at pagi kira2 jam 4, blogger maintenance, sampai jam 00.00 td malam.
    Thank...

    BalasHapus
  11. krennn ni sob,.,udah saya cobaaa

    BalasHapus
  12. cara mendapat web hosting gmna bro,, aqw bingung

    BalasHapus
  13. @arif nur: Ok sob... :D

    @Imaduddin: Webhosting gratisan kan banyak banget sob, tingal register aja. tp kalo mau buat upload kode script, bisa di google site/google code, masih ada jg yang lainnya.
    yasudah drpd bingung jelasinnya, nanti saya buatin aja artikelnya.

    BalasHapus
  14. Thanks atas info-nya, sudah lama nyari trik seperti ini dan saya juga suka dengan theme yang anda pakai. pengen buat seperti ini gak bisa-bisa.

    oya.., izin posting artikel ini di blog saya ya bro? → http://johnsuntitledblog.blogspot.com

    sama ada 1 lagi, sedikit saran : setiap link coba dikasih underline ketika link hover atau dotted border ketika link focus, agar lebih mudah membedakan mana yang link dan mana yang bukan (jangan sekedar bold). sayang kan kalo artikel nya sudah sangat bagus sekali tapi untuk mencari link masih harus meraba-raba.

    segitu aja saran dari saya, maaf bila ada kesalahan kata thanks?

    BalasHapus
  15. @Johns: Yupz, silahkan ?? sudah saya cek :D
    Makasih buat masukannya sob, iya saya sebelumnya juga sudah kepikiran akan hal itu sob, cuman belum sempet diutak atik lagi :)) bener banget apa kata sobat diatas.
    Segera diperbaiki sob. oia blognya jg sudah bagus sob, mirip deconstructioncode, simple :D

    BalasHapus
  16. ok bro sip, blog nya bro viyan sudah bagus banget menurut saya. mudah kesana-sini-nya dan isi postingannya juga menarik.
    saya mau membuat seperti ini gak bisa bro hehe.. ujung-ujung-nya jadi mirip sama deconstructioncode, memang bener-bener bisa jadi rujukan itu blog hehe.. sayang sudah gak akif lagi?
    thanks.

    BalasHapus
  17. navigasi buat submenunya keren, itu bawaan template, atau agan buat sendiri??

    BalasHapus
  18. Sepertinya saya akan sering-sering kesini nih

    BalasHapus
  19. @Johns: hehe makasih banyak sobat. blog sobat jg keren, dan juga saya sendiri lebih suka blog yg simple dan ringan. hehhee
    iya sob, udah gak main blog lagi Dia.

    @arief ahsan: bikin sendiri sob, tapi teteplah untuk kode css dan script yo nyontek. hehehe

    @Kang Amphi: makasih kang komentarnya :)
    liat blog akang, jd inget template ini dulu.. hehehe

    BalasHapus
  20. Wah Artikel Yang bermanfaat Sob,,.truz berkreasi Sob,,Salam blogger

    BalasHapus
  21. @BLOG KEREN: Sepp lah :D
    Makasih buat komentarnya sob. Keep blogging !!

    BalasHapus
  22. walah walah gagal malah ancur blognya perbaikinya gimana neh

    BalasHapus
  23. @Weleh: mana link blognya, biar bisa tw masalahnya

    BalasHapus
  24. mantap gan... salam dari http://aksesilmu.blogspot.com//

    BalasHapus
  25. @mind hacker: Sip.. Makasih ya sob :)

    BalasHapus
  26. wahh.. terima kasih infonya kode blogger ^^
    saya sudah coba Cara Mempercepat Loading Blog With CSS External sayangnya T_T tampilan blog saya berubah >_< gak maniss.. hal yang sama terjadi ketika saya meng-compress html blog.. yahh apa boleh buat ~ setidaknya blog saya masih normal :)

    BalasHapus
  27. @Nurmayanti Zain: Untuk kompress CSS, setelah liat templare sobat, copy dari kode / * GENERAL * / sampai kode diatas ]]>< /b:skin >

    Untuk CSS External, sobat upload file.css nya dmn?? saya kasih saran di site google aja. untuk petunjuk css external saya kira sudah jelas.

    BalasHapus
  28. T_T hasilnya sama viyan
    aku coba yang css external.. alamat aku yang ini :
    di sites.google.com kok
    ...tapi tampilannya tetap berubah :( background belakangnya terpotong T_T gak maniss >_< apa memang selalu begitu ya?

    BalasHapus
  29. @Nurmayanti Zain: Waduh, memang ada beberapa template yg gak bisa di buat CSS external Mba??
    Tp di blog sy lancar2 saja tuh, semua yg saya posting sudah saya terapkan di blog saya , dan sukses :)

    BalasHapus
  30. viyan >_< makasih ya masukannya.. walau gak sukses, tapi setidaknya udah usaha ^^ tengkyuu tutorialnya :)

    BalasHapus
  31. @Nurmayanti Zain: Maaf ya, penasaran juga sebenernya, coz di blog saya lancar2 saja. dan memang ada beberapa template yang tidak bisa di buat dengan CSS external.

    BalasHapus
  32. uda bisa makasi om, hehe :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

    BalasHapus
  33. Asmara Susanto: Weleh... blm juga saya balas :))

    BalasHapus
  34. @Asmara Susanto: Sob, untuk CSS external, body jgn di ikutsertakan di .CSS, perhatikan lagi langkah no 5.
    berantakan tuh blog km :|

    BalasHapus
  35. trus langsung nge-cut nya mulai
    background:#f5fffa;
    width:980px;
    color:#333;
    font-size:12px;
    font-family:Arial,Tahoma,Verdana;
    margin:0 auto 0;
    padding:0}

    ampe

    ]]>

    gitu kah? minta no. hp(prustasi):)] ~x( :-t

    BalasHapus
  36. @Asmara Susanto: Jiahaha.. add fb aq aja mas :))
    Setelah liat kode CSS pada template sobat, cut semua code dari:

    a:link
    {

    sampai

    #credits a
    {
    blablabla
    }

    atau sampai kode diatas: ]] >< /b:skin >

    BalasHapus
  37. udah kak uda bisa, coba km liat

    BalasHapus
  38. @Asmara Susanto: http://www.facebook.com/fiyant
    kayaknya template sobat yg bermasalah deh, coba perhatikan meta tag, ada yg salah penempatannya tuh, masa di atas kode /head ?? :|

    Sebaiknya coba di kembalikan ke setting awal sob, upload kembali backUp templatenya. :)

    BalasHapus
  39. sory baru bales, kmarin gk ngecek soalnya
    hmmm, ok saya liat lagi ;))

    BalasHapus
  40. mantap tuh buat ngurangi berat blog ane,, thanks ya sob...

    BalasHapus
  41. artikel manfaat. coba dl deh. thanks

    BalasHapus
  42. tengkyu infonya gan, udah ane coba, tapi ko ga bisa ya

    BalasHapus
  43. Tambahan aja dari pada ribet urusan editing css blogger yang menyatu ma style HTML, javascipt dan css dalam satu folder...
    Kamu bisa pisahkan seperti diatas dengan hostingan gratisan di xtgem.com dan kamu bisa buat halaman css sesukamu secara terpisah agar memudahkan dlam pengeditan css terutama via hp...
    Kamu bisa buat 4 css menurut bagiannya.. Misal
    http://misal.xtgem.com/css/blogku/header.css
    http://misal.xtgem.com/css/blogku/body.css
    http://misal.xtgem.com/css/blogku/sidebar.css
    http://misal.xtgem.com/css/blogku/footer.css
    Disatukan dalam folder jga gak apa tapi
    Memisahkan css hanya tuk memudahkan pengeditan terutama pengguna hp dgn 1 syarat jangan ada css ID yang double..

    Lalu ting masukan link style sheetnya ke html blog kamu seperti diatas...

    Salam...
    s blogger yang menyatu ma style HTML, javascipt dan css dalam satu folder...
    Kamu bisa pisahkan seperti diatas dengan hostingan gratisan di xtgem.com dan kamu bisa buat halaman css sesukamu secara terpisah agar memudahkan dlam pengeditan css terutama via hp...
    Kamu bisa buat 4 css menurut bagiannya.. Misal
    http://misal.xtgem.com/css/blogku/header.css
    http://misal.xtgem.com/css/blogku/body.css
    http://misal.xtgem.com/css/blogku/sidebar.css
    http://misal.xtgem.com/css/blogku/footer.css
    Disatukan dalam folder jga gak apa tapi
    Memisahkan css hanya tuk memudahkan pengeditan terutama pengguna hp dgn 1 syarat jangan ada css ID yang double..

    Lalu ting masukan link style sheetnya ke html blog kamu seperti diatas...

    Salam...

    BalasHapus
  44. @ak: Silahkan :)

    @roy.ahmad: gak bisanya dibagian mana sob.. bisa dijelaskan ??

    @Admin: Ada lagi yang lebih simple gan, upload saja semua file css nya, cuma 1file.css fak satu persatu kek gitu mas. hihihi
    trik itu jg udah pernah saya share, coba disearch saja diblog ini "Cara Mempercepat Loading Blog With CSS External"
    BeTeWe.. makasih gan infonya :)

    BalasHapus
  45. gan knpa stelah di preview blog jadi brantakan ?
    font size brubah , background hilang ,etc ?
    mohon pnjelasanya

    BalasHapus
  46. @edwin naiborhu: Coba sebelum mempraktekanya, di backup dulu templatenya. setahu saya kalu tampilan blog berantakan, berarti salah dalam memulai/memotong kode CSS'nya. untuk background blog itu biasanya ada di kode body" sedangkan yg saya jelaskan diatas, body' itu tidak di ikutsertakan. coba diteliti lagi sob.

    BalasHapus
  47. kan di mulai kan kk viyan
    tolong awl di CUT diperjelas lagi kk viyan

    BalasHapus
    Balasan
    1. Tergantung dari templatenya juga mas, ada yang bagian body yang tidak ikut dibukus malah jadi berantakan, tapi ada juga yang sukses.

      Seperti blog ini semua code css saya bungkus.

      Hapus
  48. Ini yg saya cari, susunan script dg css ternyata beda pantes kga bisa
    Mkasih buat admin

    BalasHapus
  49. Bro kloq misahin CSS,,ntar kloq sewaktu-waktu mau ngedit CSS nya gimana??

    BalasHapus
    Balasan
    1. Uploadnya di googlecode saja mas, biar enak editnya lagi.

      Kalau gak bisa edit di tempat uploadnya, ya terpakasa di edit lagi terus upload ulang. :)

      Hapus
  50. sob kog di blog saya gk bisa yak ??

    BalasHapus
  51. di blog saya kog gk bisa ya sob ???
    gk kebaca CSS nya sob http://editinglagi.blogspot.com/

    BalasHapus
    Balasan
    1. Mungkin ada kesalahan di pembungkusnya atau pada penempatan scriptnya.

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

      Ditaruh di atas:
      </head> atau dibawah ]]></b:skin>

      Hapus
  52. Bukannya kloq pake CSS eksternal loadingnya akan lebih lama bro, karena harus membaca kode CSS yg sudah kita upload ke tempat hosting CSS eksternal tadi...

    BalasHapus
  53. Bukannya tempat hosting yang bagus itu di code.google.com yah??

    BalasHapus
  54. ini yg di cari infonya gan
    thanks ya
    <a href="http://geulishoutbound.blogspot.com">paket outbound bogor </a>
    <a href="http://adventurebogor.wordpress.com">team bulding bogor</a>
    <a href="http://arungsukabumi.blogspot.com">outbound bogor</a>
    <a href="http://adventurebogor.blogspot.com">tempat outbound bogor</a>
    <a href="http://tw-poppysnail.blogspot.com">outbound bogor</a>
    <a href="http://simbamanagemen.blogspot.com">paket outbound</a>
    <a href="http://adventurewana.blogspot.com/">TEMPAT OUTBOUND</a>
    <a href="http://www.wanaoutbound.com"> paket outbound</a>
    <a href="http://runneroutbound.blogspot.com"> OUTBOUND BOGOR</a>

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers