Sedikit Tips merampingkan kode css dan mempercepat loading blog

kebiasaan mengintip ROK MINI kode orang lain akhirnya kambuh lagi setelah sekian lama coba saya tinggalkan karena sibuk untuk mengurus sawah yang hampir kering karena kekurangan air kini kebiasaan tersebut muncul lagi heeee, ya karena saya tertegun dan terkesima ketika melihat sawah milik kang rohman yang dibanjiri oleh air yang banyak dan airnya pun mengalir dengan deras...weleh bahasa apa ini wekekekekekekek.
Begini sebenarnya saya tuh tertegun dengan blognya kang rohman ko loading blognya cepat sekali akhirnya saya coba selidiki ko bisa seperti itu dan seperti biasa saya selalu melihat pada source kodenya awalnya sih kaget apa browser saya yang eror soalnya kode-kode CSS nya ko ga ada eh akhirnya saya jadi teringat perkataan abang saya kemarin agar enaknya blog terlihat rapi kode CSS nya di panggil aja atau di host diluar katanya..dan akhirnya saya pun langsung tanya pada kang rohman CSS nya di kemanakan?? dan beliau pun menjawab di pangkas semua dan saya host diluar silahkan kamu lihat sendiri kan kamu biasanya mencuri...wekekekeke *mode on ngarang*.
Sudah cukup basa basinya sekarang yang ingin merapikan kode CSS nya agar terlihat cantik dan rapi dan sekaligus mempercepat loading blognya seperti milik kang rohman ini "Online Magazine" atau contohnya bisa di lihat juga di blog tutornya milik kang rohman pasti anda kaget karena loading blognya cepat sekali padahal banner-bannernya banyak, nah sekarang anda bisa mengikuti cara berikut ini bagi yang ingin:

Login ke blognya kemudian langsung ke Edit HTML dan tidak usah mencentang kotak widgetnya. setelah itu potong kode CSS nya:
mulainya pas di bawah kode body dan ingat mulainya sehabis tanda } ini :
body {
background: #CEF6CE repeat-x bottom ;
width: 980px;
color: #333;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 10px auto 0;
padding: 10px 10px 10px 10px;
border= 10px 10px 10px 10px;
}
sampai pada kode sebelum ]]></b:skin> dan kemudian kode yang anda potong tadi di simpan ke notepad dan si save dengan ekstensi .css misalnya novaljelek.css
kalau tulisan ini tidak dimengerti coba lihat gambar berikut:



Nah untuk memanggil kode CSS tadi ada dengan cara menulis seperti ini <link href='http://namatempatupload/namafile.css' rel='stylesheet' type='text/css'/>
dan disimpan tepat pada posisi seperti berikut ini:

]]></b:skin>
<link href='http://doumbozo.googlepages.com/kn.css' rel='stylesheet' type='text/css'/>
</head>

kalau sudah silahkan di preview dulu sebelum di save dan lihat perbedaannya loading blog anda cepat atau tidak dari sebelumnya tapi sebenarnya untuk mempercepat loading blog juga itu di lihat dari sedikitnya kita memakai JS, kemudian berat blog kita, sedikit widget, maka blog anda akan loading cepat asal koneksi internet ga seperti kura-kura heee dan kalau ingin lebih tahu detailnya proses mempercepat loading blog silahkan cari di google.... oke silahkan di coba dan kalau masih bingung lebih baik tidak usah dilakukan karena akan membawa bencana bagi template anda. dan ingat jangan sampai salah potong oke.

Pengenal dan Belajar HTML basic 2 (akhir)

Masih pada pembahasan tentang basic tag html lanjutan episode terakhir (wek ko cuman dua periode aja ya???) bagian anda yang belum membaca basic tag html seri pertama silahkan baca dulu disini pengenalan dan belajar html basic1 . Seperti biasa ini hanya untuk pembelajaran dasar saja bagi yang udah kuasai mungkin lebih baik melihat yang lain saja atau sekedar manmbah di halaman komentar (atau kalau kalau bosan boleh deh kabur wekekekeke) dan ada pun kekurangannya sudilah pembaca untuk menambahkan di kolom komentar. Oke tanpa perlu basa-basi, ngalor-ngidul yang panjang saya akan lanjutkan :

<b> ---> adalah tag untuk menebalkan huruf kalau lengkapnya itu namanya Bold.
<strong> ---> adalah tag yang fungsinya sama dengan tag b diatas untuk menebalkan huruf.
<i> ---> adalah tag untuk membuat tulisan miring
<u> ---> adalah tag untuk menggaris bawah tulisan.
<strike> ---> adalah tag untuk mencoret tulisan
<hn> ---> adalah tag untuk memberikan nilai heading pada tulisan namun karena nilai n itu pada umumnya langsung diberi nilai yang berkisar antara 1 sampai 6 seperti h1,h2,….h6 dan pemberian nilai ini semakin besar nilainya semakin kecil hurufnya.
Contoh:

saya mau belajar blog: dengan h1

saya mau pergi kepasar:dengan h2

saya mau belajar bisnis: dengan h3

saya mau membuat blog yang gratis:dengan h4

ini ibu budi: dengan h5

foto yang naik sepeda motor cewek manis pacarnya seorang pencuri:dengan h6

<ol> adalah tag yang dipakai untuk membuat daftar urutan dan sama dengan tag <ul> namun perbedaan dari kedua tag ini terletak pada pendefinisiannya atau yang tampil di browser kalau ol itu untuk angka dan ul itu untuk bullet dan kedua tag tersebut selalu di ikuti oleh tag <li>
<span> ---> tag ini biasanya digunakan dengan menggunakan CSS.
<sub> ---> tag ini akan menerjemahkan hurufnya menjadi bagian subscript.
Contoh: P_encuri Kode nah cara untuk menghasilkan tulisan itu adalah seperti ini P_encuriKode
<sup> ---> nah tag ini lawan dari tag sub diatas kalau yang ini modelnya kayak pangkat gitu bahasa kerennya superscript.
Contoh: pencuri kode ^TM untuk menghasilakn tulisan itu kode yang saya tulis adalah pencuri kode ^TM

Yah selesai deh semoga aja basic tag html ini membuat anda, saya dan kita semua lebih familiar dengan kode-kode html sebenarnya masih banyak lagi namun itu semua diluar dari kemampuan saya dan kalau pun ada pertanyaan silakan ditanyakan di kotak komentar atau layangkan bertanya di kontak saya disini

Nb: untuk diketahui bahwa semua tag baik yang basic satu dan basic dua itu ketika anda ingin menampilaknya jangan lupa ditulis balasan tagnya contoh seperti ini <b>belajar basic tag html</b> agar browser bisa menerjemahkan seperti ini Belajar basic tag html

Pengenalan dan Belajar Tag HTML Basic 1

Pada dasarnya ketika kita ingin membuat sebuah WEB site kita harus mengenal bahasa-bahasa pemograman seperti HTML, PHP, dan bahasa2 pemograman lainnya yang relevan untuk membangun sebuah WEBSite. Namun Seiring berkembangnya jaman maka sekarang ini walaupun tanpa mengenal HTML, PHP tersebut kita sudah bisa membuat sebuah WEBSITE. Dan kemudahan ini lah yang akhirnya sekarang ini lebih mewarnai duania internet dan biasa di sebut dengan WEBBlog, salah satu jasa penyedia WEBBLog gratisan adalah Blogspot dan mengenai cara pembuatan blogspot ini saya rasa udah banyak dibahas oleh para master blog salah satunya yang banyak membahas blog dari awal sampai tahap modifikasi adalah kolom-tutorial.blogspot.com dan kebetulan blog ini juga merupakan blog yang menjadi promotor dan yang menjadi landasan saya untuk memulai blogging nah bagi anda yang ingin memulai membuat blog ada baiknya kesana. dan yang ingin saya tulis/sharing sekarang adalah pengenalan Tag-tag Html Basic yang tentunya ini merupakan hal terpenting dalam sebuah Blog ataupun WEBSITE..oke mari langsung aja...

elemen-elemen atau tag HTML adalah seperti berikut ini:
<head> ---> sesuai namanya ini adalah bagian kepala yang dipakai untuk mengisi informasi yang tidak diterjemahkan pada browser yang ditutupi dengan tag </head>
<body> ---> dan yang ini adalah bagian badan dan pada elemen ini semuanya akan diterjemahkan dalam browser dana sama ditutupi juga dengan tag </body>
<html> ---> ini menunjukkan bahwa file html diawali dengan tag ini dan akan diakhiri juga dengan tag yang sama </html> tag ini tidak memiliki atribut.
<title> ---> tag ini untuk menampilakan teks pada browser dan akan terlihat pada titlebar atau kata lainnya adalah judul dari sebuah WEBsite/WebBlog dan biasanya di simpan dibawah <head> dan tentu saja harus ditutupi dengan tag </title> agar bisa di tampilakan
<--...--> ---> tag ini hanya pemberitahuan kepada browser untuk mengabaikan saja text apa yang ada didalamnya atau bahasa kerennya hanya berupa komentar atau pesan mungkin hal ini sering anda jumpai dalam template anda.
<a> ---> tag ini hanya untuk membuat text atau gambar yang di barengi dengan hyperlink dan atribut yang biasa digandengkan dengan tag ini adalah href, dan penutupnya tentu sama juga </a>
contohnya seperti ini <a href="http://inihanyasitus-untuk-dewasa.com">
<br> ---> ini untuk membuat perintah baris baru.
<p> ---> perbedaan antara p dan br adalah pada tag p ini tidak memformat tekx memiliki paragraf sendiri dan juga tidak memiliki line spacing, tapi tag ini hanya memberikan satu baris baru.
<div> taq ini membuat teks yang di lingkupinya itu memiliki struktur yang baru atau blok sendiri dan biasanya ini untuk memberikan definisi CSS yang baru untuk contoh penggunaan div ini bisa anda lihat di tentang kombinasi html dan css

NB: ingat semua tag harus ada penutupnya agar bisa di eksekusi oleh browser. dan maaf sampai ini dulu nanti dlanjutin lagi sedikit-sedikit saja...

Masih tentang Kombinasi CSS dan HTML

Seperti yang telah ditulis oleh Mas Abdul Munir tentang Kombinasi CSS dan HTML, sekarang saya hanya memberikan sedikit contoh, tapi sebelumnya jangan lupa baca Kombinasi CSS dan HTML yah....

OK....start.....!! Yuuk langsung ke contohnya aja, misalnya untuk membuat text-area seperti dibawah ini :

Cinta sejati bukan pada apa yang dilakukan dan diheboh-hebohkan tetapi pengorbanan tanpa diketahui

--> Cara Pertama :
Kita bisa masuk ke Dashboard --> Lay out --> Edit HTML, kemudian letakkan kode dibawah ini diatas kode ]]></b:skin>:

.nove {
margin : 10px 30px 10px 10px;
padding : 10px;
background : #b6cdff url(http://i283.photobucket.com/albums/kk285/joviedhy/blow.gif) no-repeat right bottom;
color :#cc0000;
border-top : 1px solid #b6cdff;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #b6cdff;
}

Untuk memanggil kode-kode tersebut, setiap posting kita hanya menuliskan <div class="nove"> sebelum TEXT dan </div>
setelah TEXT......

Seperti dibawah ini :
<div class="nove">Cinta sejati bukan pada apa yang dilakukan dan diheboh-hebohkan tetapi pengorbanan tanpa diketahui </div>

--> Cara Kedua :

Langsung menyelipkan kode CSS di tengah kode HTML pada posting, caranya :

<div style="
margin : 10px 30px 10px 10px;
padding : 10px;
background : #b6cdff url(http://i283.photobucket.com/albums/kk285/joviedhy/blow.gif) no-repeat right bottom;
border-top : 1px solid #b6cdff;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #b6cdff;">
Cinta sejati bukan pada apa yang dilakukan dan diheboh-hebohkan tetapi pengorbanan tanpa diketahui
</div>

Hasilnya akan sama aja............Sekarang mana yang temen-temen pilih??

PS * :

• Cara pertama diatas memang tidak ribet, tapi sayang....apabila kita mengganti template, text area yang kita pake pada postingan akan hilang.....*kecuali kalo kode2 diatas skin tersebut dipasang lagi*.....
• Untuk url(http://i283.photobucket.com/albums/kk285/joviedhy/blow.gif) bisa diganti dengan signature atau dihilangkan aja.....
• Bisa juga Background dibelakangnya adalah gambar, yaitu dengan menghapus no-repeat right bottom;
• Untuk kode warna bisa dilihat di Mengocok-ngocok kode warna Blog

Mempercepat Loading Gambar

Halo Semuanya Setelah dua hari merasakan Pusing dan sterss akhirnya saya mulai sadar dan tidak ingin terlarut dengan semua kegelisahan itu...dengan semangat 17 agustus (weleh sok patriotisme)ini saya ingin sekeder berbagi tips aja ya (bukan bagi uang)...heee...heee. Pasti deh teman-teman yang suka narsis dengan memasang Photonya sendiri kadan foto pacarnya pasti ingin deh halaman Blognya tampil/loading dengan cepat tanpa pengunjung merasa bosan karena loadingnya kayak kura-kura..nah salah satu tips untuk meminimalkan itu semua caranya sangat gampang sekali mau tahu????

Caranya seperti ini:
terlebih dahulu kita harus mengetahui berapa ukuran gambar tersebut. Nah contohnya seperti gambar ini memiliki ukurun 125 X 125 atau WITDH=125 dan HEIGHT=125 nah cara supaya gambar ini loadingnya cepat maka pada kodenya gambarnya saya hanya memasukkan ukuran gambar tersebut contoh seperti ini:

<img src="http://i255.photobucket.com/albums/hh146/doumbozo/bannerexhacaerngerlink-1-1.gif" border="0" alt="BelajarBlog" width="125" height="125">

pasti anda bertanya kenapa Tag Width dan Height bisa menambah kecepetanya jawabannya karena bila anda tidak mendefinisikan atau dalam bahasa pemograman yaitu mendeklarasikan maka suatu browser akan menghabiskan dulu waktunya untuk memuat gambar tersebut agar ukurannya di peroleh...nah gimana mau coba atau tidak??? dan apakah loading blog saya cepat??? mohon informasinya???

Cara tambahkan Icon pada link list

Semalam dah aku bagikan kue tar yang di beri nama target _blank pada linklist blogspot versi ose' eh salah beta. yang semalam itu merupakan fungsi, trus gimana caranya untuk menambah gaya dikit agar terlihat cantik seperti yang punya blog tersebut? (sungguh, sumpah... saya suka wanita cantik).

Dalam blog, site, atau yang sejenisnya bila berbicara cantik, elok, bahenol, manis, bikin bernafsu, tidak main kasar, maka sangat erat kaitannya dengan CSS (style... boh..). biar miskin yang penting style... :D. Olehnya itu, pada pertemuan kita yang romatis ini, akan saya ajar di kau bagaimana cara meraba dengan mesra pada bagian list, baik itu link, category, comment, de el el.. sehingga terpoles dengan icon mungil yang menambah rasa kasih dan sayang padanya.

Sebenarnya mudah bangat bila anda ingin tampilan blog kamu cantik..!!! yaitu silahkan belajar. salah satu tempat belajar adalah blog ini.

Ok langsung kebagian yang paling geli (sensitif).

kembali lagi seperti biasa kalau mau raba kiri raba kanan login dulu di blogger.com maka akan terpajang tatto pada lengan kiri yang bertuliskan layout, silahkan di pijat tatto tersebut maka akan lahir tatto2 baru yang juga siap di pijat, namun pada tatto ini cukup memijat tatto yang bikin agresif yaitu EDIT HTML.

Nah silahkan di copy code dibawah "tapi jangan tambahkan gula ya...!!!":

Untuk Links:

#LinkList1 li a {

background:

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyyriLuycJBA1nioBP71JUxv2yHW1mUe541FDeNkGiQIgq5TScDq5BvEqKwLPeZ9MhCSF3KB5eZJ4EEAxsi_7kbr3dgpALYUl5vZDGaL9CFmZiLhq-A86Cq9ZwqZbpD5EOw6TdTs3-Lwg/s1600/link.png)

no-repeat left;

padding-left: 20px;

}

catatan dikit: perhatikan pada widget blog kamu, linklist berapa yang ada? apakah linklist1 atau linklist2 atau linklist15. Sedangkan url yang berwarna romantis tersebut silahkan ganti dengan icon favorit kamu.

Untuk comment link:

.post .post-comment-link a {

background:

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Q80xdXul6-Jf710XRHnIKdX1W91QYJkb1GmBXgTbVSdC2mpaSSfUwnYVZW6opF3X5Ycmk38BV733li00wo5xMSOWL40Rwg5UFzH7r2kMmRUglyrqXAaARbUPcdbifN2ItTalvbiAlKU/s1600/19.png)

no-repeat left center;

margin: 0px;

padding-left: 30px;

display: block;

float: right;

color: #000;

text-decoration: none;

}

klo yang ini sesuaikan postur template, bila cocok disebelah kiri maka floatnya left tp klo memang mau ditempatkan di kanan ya... pake aja yang diatas.



Demikian pula halnya dengan fitur2 lain, apakah itu link di bawah posting, ataukan widget2.



Silahkan raba-raba, asal jangan di bikin hamil template tersebut entar yang buat template tersebut marah lagi.

Kombinasi CSS dan HTML

Seperti yang pernah dibahas sebelumnya bahwa CSS itu dapat juga di slip/masukkan di tengah HTML. Tips seperti biasanya dilakukan pada postingan, yang mana sifatnya relatif artinya karena mungkit tak dipakai lagi untuk komponen yang lain atau sesudahnya.
contoh:

<div style="padding: 3px; border: 1px solid #ccc; width: 400px; background: #eee;">
Contoh CSS dikombinasikan langsung pada HTML,..
Contoh CSS dikombinasikan langsung pada HTML,..
Contoh CSS dikombinasikan langsung pada HTML,..
</div>

maka hasilnya akan seperti ini:

Contoh CSS dikombinasikan langsung pada HTML,..
Contoh CSS dikombinasikan langsung pada HTML,..
Contoh CSS dikombinasikan langsung pada HTML,..

Ket:
pada masing-masing property dapat diganti nilainya sesuai selera. misalnya background dapat ditambahkan gambar sebagai latar.

OK... saya kira dapat di mengerti dan salam.
By. Abdul Munir

Margin dan padding pada CSS

Persoalan klasik namun masih banyak yang mendapat problem disesi ini.

apa itu makhluk yang bernama margin dan padding itu?

margin adalah menentukan jarak komponen dari bagian paling luar, sedangkan padding adalah sebaliknya yaitu yang bagian dalam.

tarulah sekarang kita mengedit layout blogspot. (bagian content atau potingan dan sitebar).

yang saya tandai dengan garis merah tersebut adalah merupakan bagian luar dari komponen ini. tarulah saya tentukan ukuran lebarnya 760px saya beri nama bagian_content_luar. Nah pada bagian dalam komponen ini akan ada 2 komponen lagi yang tercipta. oleh karena itu perlu ditentukan berapa jaraknya dari bagian komponen (bagian_content_luar) ke bagian postingan dan header.

Ketika anda menggunakan code padding.... maka secara otomatis sisa ruang untuk dua komponen bagian dalam ini akan berkurang. tarulah anda memberi nilai padding: 10px; maka ukuran yang tersisa tinggal 740px; sebab akan terhitung dari komponen bagian_content_luar untuk sisa bagian dalam. lain halnya bila menggunakan code Margin, bila menggunakan perintah margin maka komponen bagian_content_luar ini akan bergeser (yang kiri bergeser ke kanan sebanyak 10px, dan kanan tidak bergeser namun akan memberi jarak kosong pada sebelah kanan sebanyak 10px; begitu pula pada bagaian atas dan bawah.

Sebaiknya.... bila anda memilih dalam menggunakan margin..!!! tentukan bagian per bagian, atau dengan kata lain atasnya berapa, kanan berapa, bawah... dll, dalam penulisan code untuk menentukan bagian per bagain terdiri dari dua cara yaitu:

1. margin: 2px 2px 5px 0px; urutannya --> Atas, kanan, bawah, kiri

2. margin-top: 2px; margin-right: 2px; margin-bottom: 5px; margin-left: 0px;

demikian juga halnya dengan padding bila di tulis bagian per bagain.



Ok saya akhir dulu postingan ini... sengaja saya posting pendek2 sebab bila postingan panjang sekali, saya khawatir... anda akan ngeri melihatnya maksud saya...!!! jangan sampai anda belum baca sudah takut... karena panajang sekali :D



Layout diatas di ambil dari layout4all boleh lihat tampilannya sini

Mengenal Id, Class dan Span pada CSS

apa itu Id?
dan apa itu class?
lalu apa pula yang dimanakan span?

Id, class dan span adalah untuk menentukan elemen atau komponen tertentu yang diawali dengan tag html seperti div, td, tr dan sebagainya, selanjutnya akan dideklarasikan oleh CSS. pada CSS sendiri Id ini ditulis dengan code # (cress) sedangkan class dan span di tulis dengan . (titik)
Contoh:
#header
.header
.header_inner <-- Span

Nah sekarang, mari kita cipatapkan sebuah halaman web (blog).
Saya mengawalinya dengan menulis code html... ingat...!!! ketika kita membuat suatu halaman harus memiliki edentitas tersendiri sebagai status halaman itu. maksudnya apa? tarulah kita membuat halaman dengan menggunakan html maka harus ada pembukanya yaitu <html> nah segala sesuatu yang dibuka maka harus ditutup kembali... lalu apa penutup dari bagian ini yaitu </html>.

ok kita mulai tulis... code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <!-- pembuka html -->
<head> <!-- pembuka head -->
<meta content=" ......................" /> (disini boleh ditambahkan meta)
<link rel=" ......................./> (sini juga boleh ditambahkan link rel atau link diluar halaman ini)

----------- nah disini anda bisa menuliskan juga CSS seperti yang banyak digunakan pada blogger ---------
<style type='text/css'>
Code CSS anda...........
</style>
</head> <!-- penutup head -->
Nah sinilah ditulis isi halaman web kita... dan awali dengan ...body... maka akan seperti dibawah:
<body>
<div id="bagian_halaman_luar"> Isi komponen </div>
</body>

</html> <!-- penutup html -->

---

Bila telah dibuat html seperti diatas... maka code CSS yang dapat ditulis adalah

body {
margin: ...;
paddding:...; dan seterusnya...
}

#bagian_halaman_luar {
padding:...;
margin-top:..;
margin-left:...;
width:...;
height:..; dan seterusnya...
}

Keterangan:
Nama pada sebuah komponen terserah anda menamainya apa, agar anda mudah mengklafikasikannya.
Pada bagian Isi komponen diatas dapat ditambahkan class atau span lagi sesuai kebetuhan halaman yang diciptakan.
contoh:
<div class="bagian_kanan"> XXXXXX </div>
maka cssnyapun ditulis seperti ini:
.bagian_kanan {
font-size:....;
padding:..;
background:..; dan seterusnya...
}

span sangat jarang digunakan... namun perlu juga. karena span tidak membentuk paragraf sendiri atau bagian sendiri akan tetapi langsung menyatu dengan bagian yang ada.

CSS lebih lanjut

Siapa bilang kalau CSS itu tak penting...?
Mari kita melirik ke samping, atas, bawah sana... apa yang paling disibukkan orang dalam mengatur layout Friendster, Multiply, Wordpress bahkan pada Blogger (blogspot) itu sendiri. tiada lain dan tiada bukan itu semua peran serta dari CSS itu sendiri.
Seperti yang telah di posting sebumnya... CSS itu adalah singkatan dari Cascading Style Sheets. artinya apa? cukup kita lihat dari satu kata diatas yaitu Style (gaya, corak, tampilan dll..) Lalu timbul pertanyaan lagi.. apasih hebatnya CSS itu? meskipun kebanyakan orang menilai kalau CSS itu hanya di berupa dokumen yang terpisah dari html namun jangan, salah CSS juga dapat di sisipkan pada html itu sendiri atau juga di tulis terpisah pada <head> dan </head>
Ada benarnya namun tidak semuanya salah kalau pakar-pakar, yang mengaku pakar, atau sejenisnya... menyatakan kalau css itu tak perlu dipelajari tapi cukup dilihat-lihat saja, maka dengan sendirinya akan paham. Paham si ya.. paham tapi tahu di kau... bila berbicara CSS akan melibatkan apa? Yang paling dekat adalah Design (desain).

Nah berbicara tentang desain ini sendiri bukan hal yang mudah seperti membalikkan telapak tangan, akan tetapi perlu perencanaan, bayangan akan seperti apa layout/template yang akan di desain nantinya. apakah yang desain ini akan support/compatible dengan CSS . Maka dari itu, CSS ini tak boleh disepelekan, biar gimana indahnya desain yang telah dibuat bila tak dapat di deklarasikan dengan CSS hasilnya 0 (NOL BESAR).

Belajar kode CSS

Hallo semuanya heee lagi apanih ya setelah kemarin saya steress dan hanya bisa posting Joke yang lendir tapi banyak juga tuh yang koment ... Nah sekarang saya ingin mengajak teman-teman blogger untuk memahami dan belajar bersama tentang CSS...Pasti para blogger ga asing lagi dengan CSS apa lagi yang sering edit template dan buat tamplate pasti udah menjadi makanan pokoknya...tapi kalau ada yang masih belum paham dan mengerti saya jelaskan apa itu CSS.
CSS adalah singkatan dari Cascading Style Sheets (*sok jadi guru aaah*)...oke kita langsung aja...untuk melihat mengetahui kode CSS ini biasanya kalau anda sering melihat source kode dari sebuah WEB maka anda akan menemukan kode yang ruwet sekali nah itulah dia CSS yang memiliki tag yang sangat banyak sekali tuh dari background, tulisan atau font dan lain2...kadang ada juga yang memakai CSS ini dengan link external jadi CSS ini akan dipanggil dengan sebuah alamat namun kalau kita membahas CSS di blogspot maka kode CSS nya berada di atas <Body> dan contoh nya seperti ini:

#header-wrapper{ width:973px; height:130px; margin:0px; padding:0px; text-align:left; background:#ffffff; border-bottom:5px solid #F781BE; border-top:5px solid #F781BE; -moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px}

nb: kode ini saya ambil dari template yang baru di buat oleh o-om yang saya pakai sekarang...
pasti setelah anda melihat kode diatas pasting bingung apa maksudnya nah karena semuanya bingung maka saya pun ikut bingung....heeeee....heeee biar nanti o-om aja yang jelaskan ya....*kabuuuuurrrrrrrrr *
Nb:Tunggu Postingan Berikutnya pengenalan dari properti CSS:

Mengocok-ngocok Kode Warna Blog

Jangan berpikiran lain!!! nah kamu seringkan liat warna-warna ada hijau, ada biru,...dan lain2 nah buat yang suka edit css atau yang suka edit templet blog kayak si maniak ini kamu ga usah mikir-mikir kayak profesor karena sekarang kamu tinggal klik aja tuh warna maka kamu akan segera melihat kode-kode warnanya...dan kode warna ini falid lo karena kode warna ini di kasih oleh profesor trik-tips nah tunggu apa lagi ayo ntar komputer kamu kepanasan tuh karena kamu lama-lama mikir hanya melototin komputer yang menunjukkan warna...nah silakan di coba tuh mumpung masih hangat ko mbulet sih tulisanya padahal intinya hanya tentang warna sori semuanya karena saya lagi mau belajar tentang yang terbaru....

sumber kode warna: trik-tips.blogspot.com

Comprees Kode CSS

saya sedikit bingung untuk membuat postingan ini soalnya mungkin blog saya terasa lama loadingnya jadi lucu kalau saya buat tutorial ini??? tapi ga apalah mungkin ini bisa bermanfaat bagi teman2...siapa saja pasti ingin sekali tampilan webnya/ blognya  cepat sekali loadingnya dan kadang kita tidak mengerti bagaimana cara untuk membuat blog/web kita bisa loading dengan cepat...nah berikut ini  mari coba kita compress kode CSS kita dan untuk mengkompress kode hatml ini kita harus menuju ke situs ini http://www.cssdrive.com/index.php/main/csscompressor/

setelah sampai pada situs tersebut maka ikutilah langkahnya, saya coba jelaskan setahu saya berdasarkan praktek tadi nah caranya download dulu templet kamu untuk menjaga-jaga.. dulu kode CSS kamu yang letaknya dimulai dari adalah mulai dari kode ini <b:skin> sampai dengan kode </b:skin> nah kamu kopi lah kemudian masukan kopian kamu ke kotak yang tersedia di situs penyedia kompress tadi dan lakukanlah atau tekan compress it..nah sesudah itu akan terlihat halaman hasil kompress tersebut yang berupa kode CSS dan tekanlah highlight code untuk copas kode tersebut dan di bagian bawahnya ada ini:
Compression results
Original size: 14987 bytes
Compressed size: 11386 bytes
Savings: 3601 bytes (24%) (ini adalah hasil kompres blog www.kangnoval.com)
setelah itu anda copas ke kode CSS di blog anda. Dan ganti kode CSS anda yang sebelum di kompres tadi dengan kode sesudah hasil kompress....jangan lupa di save untuk melihat hasilnya dan semoga cepat loadingnya...
artikel yang bahas masalah ini juga blogmenjrit