Blog Khusus Membahas Tentang Tutorial, Tips dan Trik Seputar Blog Di BlogspotDotCom


Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan

8 Jun 2011

no image
| Rabu, Juni 08, 2011

Kompres CSS Untuk Mempercepat Loading Blog

Kompres Code CSS Untuk Mempercepat Loading Blog, kiranya itulah yang akan saya bahas malam ini, karena para pengunjung sering komplain dan paling males jika menemui blog yang loadingnya minta ampun beratnya, dimana efek buruknya yaitu, jangan berharap para pengunjung akan kembali lagi ke blog kita. contohnya gak jauh-jauh, blog saya ini juga tergolong berat, tp karana kebantu oleh cache jadi mending'lah gak berat-berat amat, tapi menurut saya masih perlu di kompres lagi. hihihi...
Setelah kemarin saya membahas tentang Cara Mempercepat Loading Blog With CSS External , dimana pada cara tersebut, kode CSS kita buat file.css dan mengupload ke webhosting, Nah kali ini ada cara yang lebih mudah dan lebih praktis, yaitu kita mengkompres kode CSS dengan aplikasi online. Cara yang sudah saya praktekan sebelumnya yaitu mengkompres CSS dengan CSS Compressor.

Penting!!
Untuk jaga-jaga selalu backUp dulu template sobat, agar bila nanti sobat mengalami masalah, bisa sobat upload kembali backup templatenya. Ok....
Berikut langkah-langkahnya:
  • Seperti biasa, Login ke akun blogger sobat
  • Masuk Rancangan/Layout
  • Pilih Edit HTML
  • Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
  • Perhatikan Langkah-langkah berikut ini

1. Kompres kode CSS pada umumnya (standart)
Untuk pada cara pertama ini adalah cara yang umumnya sering kita/para blogger lakukan.
  • Untuk melihat/membandingkan hasilnya, terlebih dahulu, untuk mengeceknya silahkan cek di Speed Test
  • Kemudian blok dan POTONG semua kode CSS dari setelah kode <b:skin><![CDATA[ sampai pada kode sebelum ]]></b:skin>
  • Bila sobat kurang jelas dengan penjelasan diatas perhatikan ini:
<b:skin><![CDATA[
disini mulainya | . . . . . .

. . . . .KODE-KODE CSS. . . . .

sampai disini |
]]></b:skin>

Compression mode = pilih 'Normal'
Comment handling = pilih 'Don't strip any comments'

Pastekan kode CSS yang telah di potong tadi pada kotak kosong
Kemudian klik Compress-It
Selanjutnya copy hasil kompresan tadi dan tempatkan pada template kamu diantara kode

<b:skin><![CDATA[
Pastekan disini kode CSS yang telah di kompres tadi
]]></b:skin>

  • Terakhir klik Simpan

Tugas sobat selanjutnya yaitu membandingkan berat blog sebelum dan setelah dikompres.


2. Cara Kompress Kode CSS Kedua (ini jurus dari mbah saya) dan juga Kompres pada Kode HTML

Triknya juga gak jauh-jauh dari cara yang pertama, cuma cara kedua ini lebih galak dari yang sebelumnya, (kata simbah gitu) Ckckckk
Karena memang caranya yang agak rumit, apalagi melihat kode CSS yang sudah kita kompres, pasti gak ada koma, titik dan spasinya. Pastinya membuat bingung kalo kita mau edit kodenya.
Tapi bila sobat berminat untuk mengkompres kode CSS biar makin maknyus, silahkan ikuti langkah-langkahnya berikut ini:

Caranya perhatikan kembali langkah pada cara yang pertama, yaitu:
  • Blok dan POTONG semua kode CSS dari setelah kode <b:skin><![CDATA[ sampai pada kode sebelum ]]></b:skin>
  • Buka situs CSS compressor disini
  • Settingnganya rubah seperti berikut:

Compression mode = pilih 'Super Compact'
Comment handling = pilih 'Strip all any comments'

  • Kemudian tempatkan hasil kompresannya diantara kode

<b:skin><![CDATA[
Pastekan disini kode CSS yang telah di kompres tadi
]]></b:skin>

  • kemudian potong kembali pada kode diantara kode

<body>
Bla. . . . .bla. . . . .bla. . . . . Bla . . . . .
</body>

  • Selanjutnya buka halaman berikut dan kompres kode tersebut disini HTML Optimizer
  • Copy dan pastekan kode hasil kompresan tadi diantara kode <body> dan </body>

  • Terakhir klik Simpan

Untuk cara kedua harap lebih berhati-hati dalam mempraktekannya, karena kode CSS/HTML setelah dikompres benar-benar akan membuat kita pusing membacanya, hohoho karena memang tanpa spasi.
Oke, tugas sobat selanjutnya yaitu membandingkan hasil dari sebelum dan sesudah dikompres.
Untuk cara diatas sudah saya terapkan pada blog saya ini. Dan Alhamdulillah tidak mengalami masalah alias lancar!! Dan akhirnya begitulah kiranya Cara Kompres CSS Untuk Mempercepat Loading Blog yang saya lakukan.
Selamat mencoba Sobat... Semoga bermanfaat.

Article Information:
Description: Kompres CSS Untuk Mempercepat Loading Blog
Reviewer: Viyan Pradita - Itemreviewed: Kompres CSS Untuk Mempercepat Loading Blog - Rating: 4.5
By di
Label: ,

11 Mei 2011

Cara Mempercepat Loading Blog With CSS External
| Rabu, Mei 11, 2011

Cara Mempercepat Loading Blog With CSS External

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.
By di
Label: ,

22 Mar 2011

Apa Itu CSS ?
| Selasa, Maret 22, 2011

Apa Itu CSS ?

Setelah membahas tentang pengertian HTML, sekarang lanjut untuk pengertian CSS. buat yang suka blogging pastinya sudah tidak asing lagi mendengar kata CSS.
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

CSS (Cascading Style Sheet) digunakan untuk melengkapi file HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style yang akan digunakan pada sebuah website.
CSS memungkinkan web developer untuk memisahkan HTML dari aturan-aturan untuk membentuk tampilan sebuah website.

CSS dapat mengubah besar kecilnya text, mengganti warna background pada sebuah halaman, atau dapat pula mengubah warna border pada tabel, dan masih banyak lagi hal yang dapat dilakukan oleh CSS.
Kesimpulan: CSS itu digunakan untuk mengatur susunan tampilan pada halaman HTML.

Code Sample: BackgroundsAndColors/Demo/Color.html

Kode CSS:
<div style="color: red">color: red</div>
<div style="color: #ff0000">color: #ff0000</div>
<div style="color: #f00">color: #f00</div>
<div style="color: rgb(255,0,0)">color: rgb(255,0,0)</div>
<div style="color: rgb(100%,0%,0%)">color: rgb(100%,0%,0%)</div>
Bila kode CSS diatas kita masukan dalam kode HTML
Kode HTML:
<html>
<head>
<title>Color</title>
</head>
<body>

<h1>Color</h1>

<div style="color: red">color: red</div>
<div style="color: #ff0000">color: #ff0000</div>
<div style="color: #f00">color: #f00</div>
<div style="color: rgb(255,0,0)">color: rgb(255,0,0)</div>
<div style="color: rgb(100%,0%,0%)">color: rgb(100%,0%,0%)</div>

</body>
</html>
Hasilnya akan seperti ini:


Seperti itulah yang bisa saya jelaskan tentang CSS.
Biar lebih jelas tentang CSS, pelajari CSS disini: http://learn-css-tutorial.com
By di
Label: