Beberapa hari yang lalu k'ian sempat kerepotan waktu mengatur Code CSS diBlog ini, sampai-sampai k'ian hampir kehilangan seluruh konten dan aplikasi yang telah susah payah k'ian pasang, hanya karena ingin mengkompres code CSS nya. Hal inilah yang pada akhirnya menuntun k'ian untuk mencari dengan bantuan om-google, dan hasilnya adalah mencoba untuk mengkompres CSS codenya dengan menggunakan external (luar) link tanpa merubah susunan dari code itu sendiri.
Sampai disini k'ian tetap bertanya-tanya External linknya mau pakai yang mana..??? tapi k'ian teringat akan sebuah artikel dari sahabat (k'ian lupa namanya) yang memposting sebuah artikel "Cara mendaftar disitus Link External" beberapa bulan yang lalu, dan beliau merekomendasikan untuk menggunakan "Google sites" sebagai hosting untuk file - file yang akan kita buatkan linknya. Jika kamu belum punya situs / hostingan yang menyediakan external link, Untuk cara mendaftar di Google sites bisa kamu lihat disini.
Jika kamu sudah memiliki hostingan yang lain, kamu tetap bisa menggunakannya selama kode yang kita pasang dalam kondisi yang benar. Untuk tahapan awal masuk kedalam account blog kamu-->> Layouts -->> Edit HTML -->> copy / download template kamu terlebih dahulu agar jika terjadi kesalahan kamu tidak perlu khawatir, jangan lupa beri ceklist pada kotak "expand widget template", selanjutnya Cut atau potong kode CSS yang akan kita pindahkan. lihat contoh dibawah :
Seperti contoh diatas yang harus kamu perhatikan adalah proses pemotongan kode CSS nya dimulai setelah kode #navbar-iframe{height:0px; visibility:hidden; display:none} atau dimulai dari kode .body {...} dan sebelum kode ]]></b:skin>
jika sudah paste kan kode tadi kedalam file notepad dan simpan dengan nama yang kamu inginkan namun akhirannya dengan .css contoh template.css
Selanjutnya Upload file CSS kita tadi kedalam hostingan kamu ( Google sites ), jika sudah Copy link dari kodenya dengan cara klik kanan pada keterangan "download" pilih "copy link location". contohnya
Sebelum disimpan sebaiknya dilihat "preview" nya dulu untuk memastikan tidak terjadi kesalahan yang fatal, dan jika sudah dirasa baik silahkan disimpan. Code CSS kamu sudah berhasil di kompress sehingga Loading Blog kamu semakin cepat.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='B67Ds/beDLpC3GoSzXThaBQpGkEK0RIQJm5Se1ygges=' name='verify-v1'/>
<b:include data='blog' name='all-head-content'/>
<meta content='600' http-equiv='refresh'/>
<meta content='kiancoi' name='author'/>
<title><data:blog.pageTitle/></title>
<SCRIPT src=' http://sites.google.com/site/kianbersama/javascript/date.js' type='text/javascript'/>
<b:skin><![CDATA[/*
-----------------------------------------------
Theme Name: Celebration of Kian
Theme URI: http://www.kianhome.blogspot.com
Description: wonderful slide and simple display.
Author: Kian coi
Author URI:www.kianhome.blogspot.com
Converted to blogger template modified by Kian coi
Author URI: http://www.kianhome.blogspot.com
----------------------------------------------- */
#navbar-iframe{height:0px; visibility:hidden; display:none}
potong kode Css nya Mulai dari sini
]]></b:skin>
Seperti contoh diatas yang harus kamu perhatikan adalah proses pemotongan kode CSS nya dimulai setelah kode #navbar-iframe{height:0px; visibility:hidden; display:none} atau dimulai dari kode .body {...} dan sebelum kode ]]></b:skin>
jika sudah paste kan kode tadi kedalam file notepad dan simpan dengan nama yang kamu inginkan namun akhirannya dengan .css contoh template.css
Selanjutnya Upload file CSS kita tadi kedalam hostingan kamu ( Google sites ), jika sudah Copy link dari kodenya dengan cara klik kanan pada keterangan "download" pilih "copy link location". contohnya
http://sites.google.com/site/kianbersama/javascript/jquery.magnifier.js?attredirects=0
kemudian paste kedalam halaman Edit HTML kamu, sampai disini kita belum selesai karena link tersebut belum dinyatakan valid atau berfungsi, sehingga kita perlu melakukan sedikit penambahan dan perbaikan agar linknya bisa berfungsi dengan baik.Hal yang pertama adalah dengan menghapus kode yang berwarna orange pada contoh diatas sehingga kodenya akan seperti ini:
http://sites.google.com/site/kianbersama/javascript/jquery.magnifier.jsKemudian tambahkan kode <link href='....' rel='styleSheet' 'type='text/css' />, sehingga kodenya akan seperti ini :
<link href='http://sites.google.com/site/kianbersama/javascript/tempalte.css' rel='styleSheet' 'type='text/css' />dan letakkan diantara kode]]></b:skin> dan kode </head>. contohnya seperti ini :
]]></b:skin><link href='http://sites.google.com/site/kianbersama/javascript/tempalte.css' rel='styleSheet' 'type='text/css' /></head>
Sebelum disimpan sebaiknya dilihat "preview" nya dulu untuk memastikan tidak terjadi kesalahan yang fatal, dan jika sudah dirasa baik silahkan disimpan. Code CSS kamu sudah berhasil di kompress sehingga Loading Blog kamu semakin cepat.
Nb:
Pada saat mengkompres pastikan bahwa kamu tidak akan melakukan perubahan lagi pada kode CSS di template kamu, sehingga kamu bisa lebih memaksimalkan kodenya.
Langkah ini tidak hanya berguna untuk kode CSS saja namun bisa kita gunakan untuk kode JAVASCRIPT dan lain-lain, mungkin akan k'ian bahas di artikel yang lainnya..!!!
hadeh...gag mudeng rek... :'( ...Replay
yah.. Dah keduluan. @atas : cepet bgt.
Thx mas.. Tapi kok msh g ngeh y ...Replay
@ alliev : pada dasarnya tutorial ini mengenai format perampingan kode CSS maupun kode2 yg lain..dmn kita hanya perlu memasang link kode yang sudah kita simpan tadi,sehingga link yang akan kita jadikan acuan merupakan link dari kode CSS yg kita simpan..
@ super.sonic : penjelasannya sama kayak diatas sob...!!!
4all : thank's da comment...!!! ...Replay
Wah...bingung aku??, apaan sih itu, untuk apa trus kegunaannya apa??hehe..Akang sih pinter masalah gituan, klo neng sih sama seperti yang diatas gak mudeng..makasih udah mampir akang, kemana aja selama ini gak nongol batang idungnya hehe ...Replay
@ Lia : mungkin artikelnya terlalu cepat aku jelasin..mungkin lain waktu bakal aku update untuk kelengkapannya...!!!
makasih ya neng da comment..!!! cee u..!!! ...Replay
aq juga pernah menggunakan trik ini sob, ada perubahan si, tp g aq pakai lagi ...Replay
ok..ditunggu penjelasannya di posting berikutnya.. ...Replay
@ Lia_Lovaa : tunggu aja ya neng..tq da mampir..!!!! ...Replay
Terima kasih info bermanfaatnya.... ...Replay
@ Osi : sama-sama...!!! ...Replay
Wah,, keren nih artikelnya .. Request bhan2 css kode dan html donk ..
Keep share with me yah . :) ...Replay
bang..aku blogger baru, mau nanya TUTUP dan TAMPILKAN gimana seperti yang di sidebar blog ini, sekalian cara pasang banner You Comment I Follow nya...reply nya ke email djwelthan@gmail.com
(Saya ucapkan thank udah mau berbagi)
mlaili from kalteng @ http://mymoveis.blogspot.com ...Replay
bang..aku blogger baru, mau nanya gimana cara bikin TUTUP dan TAMPILKAN seperti yang di sidebar blog ini, sekalian cara pasang banner You Comment I Follow nya...reply nya ke email djwelthan@gmail.com
(Saya ucapkan thank udah mau berbagi)
mlaili from kalteng @ http://mymoveis.blogspot.com ...Replay
@ M.Lailie : Sob, pertanyaan lo udah aq jawab dengan seksama..semoga berhasil yach...!!! ...Replay