Halo",, sore ini Admin akan mencoba Post tentang " Cara Percepat Loading Blog ". Cara ini sudah Admin lakukan di blog Dwi-Tekhnologi dan 1000% berhasil. Loading blog di Dwi-Tekhnologimenjadi lebih cepat. Caranya yaitu dengan Compress CSS yang ada di blog sobat.

CSS terdapat diantara code :
Hingga code : ]]>

Contoh CSS sebelum di Compress

#navbar-iframe{
visibility:hidden;
display:none
}

Contoh CSS setelah di Compress

#navbar-iframe{visibility:hidden; display:none}

Ok, sebelum masuk ke tutorial,sebaiknya kalian membaca hal-hal ini sebelum melakukan Compress CSS. Hal-hal tersebut yaitu :

a. Element Blogspot
Element Blogspot penyusun template kurang lebih ada tiga (3) pilar utama yaitu Cascading Style Sheet (CSS), Java Script, dan HTML.
b. Dari ketiga (3) macam element tadi harus dikompresi tersendiri.
c. Perhatian! Jangan mengcopy seluruh kode mulai dari hingga ]]> secara total dan mengcompress nya di tool compressor.
d. Backup dulu Template Sahabat sebelum melakukan Compress
e. Kesabaran dan Ketelitian
f. Berdo'a

Alat yang digunakan untuk Compress CSS : CSS Compressor (Jangan centang satupun tools di CSS Compressor, ikuti seperti gambar)

[-] Tutorial

- Copy CSS yang mau di Compress (Jangan langsung Copy semua CSS dari hingga ]]>. Tapi copy CSS satu persatu

------------------------------------

Contoh :

#header .description{
color:#999;
font-family:verdana;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:italic; font-variant:normal;
font-weight:normal;
letter-spacing:0;
line-height:normal;
margin:0 5px 5px;
max-width:700px;
padding:0 20px 15px 0;
text-transform:none;
visibility:hidden;
display:none
}

#header img{
margin-left:auto;
margin-right:auto
}

Dari contoh diatas terdapat 2 code CSS, kita copy mulai dari CSS yang paling atas

#header .description{
color:#999;
font-family:verdana;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:italic; font-variant:normal;
font-weight:normal;
letter-spacing:0;
line-height:normal;
margin:0 5px 5px;
max-width:700px;
padding:0 20px 15px 0;
text-transform:none;
visibility:hidden;
display:none
}

Kita copy, lalu kita Compress sehingga menjadi

#header .description{color:#999; font-family:verdana; font-size:12px; font-size-adjust:none; font-stretch:normal; font-style:italic; font-variant:normal; font-weight:normal; letter-spacing:0; line-height:normal; margin:0 5px 5px; max-width:700px; padding:0 20px 15px 0; text-transform:none; visibility:hidden; display:none}

------------------------------------

- Jika sudah di Compress gantikan code sebelum di Compress, diganti menjadi code yang sudah di Compress. Contoh :

#header .description{color:#999; font-family:verdana; font-size:12px; font-size-adjust:none; font-stretch:normal; font-style:italic; font-variant:normal; font-weight:normal; letter-spacing:0; line-height:normal; margin:0 5px 5px; max-width:700px; padding:0 20px 15px 0; text-transform:none; visibility:hidden; display:none}

#header img{
margin-left:auto;
margin-right:auto
}

- Jika sudah diganti, kita lanjutkan dengan Code CSS selanjutnya. Ulangi cara-caranya mulai dari Copy code CSS, sampai menggantikan code CSS dengan code CSS yang sudah di Compress.

Kurang lebih sih begitu caranya. Semoga kalian jelas dengan tutorial yang Admin berikan, dan semoga berhasil melakukan Compress CSS.

Sumber : Sejutatrik

Add Comment

Label: Blog

.img-show {
width:400px;
margin:50px auto;
background-color:black;
border:2px solid black;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
position:relative;
overflow:hidden;
}

.img-show .img-holder {
background-color:white;
}

.img-show .img-holder.loading {
background:white url('img/loading.gif') no-repeat 50% 300px;
}

.img-show .img-holder img {
display:block;
}

.img-show .img-nav {
margin:0px 0px;
padding:0px 0px;
overflow:hidden;
}

.img-show .img-nav li {
margin:2px 2px 0px 0px;
padding:0px 0px;
float:left;
display:inline;
list-style:none;
}

.img-nav li a {
display:block;
background-color:#ccc;
color:black;
padding:3px 7px;
font:normal 12px Georgia,Serif;
font-style:italic;
text-decoration:none;
}

.img-nav li a.active {
background-color:#900;
color:white;
}