Blockquote dan Pullquote

Pastinya dalam membuat sebuah postingan, kita tidak asing lagi dengan tag html <blockquote>, atau Sintaksnya  adalah

<blockquote><p> kutipan disini atau Kalimat yang di-quote</p> </blockquote>.

Maka yang akan terlihat di browser untuk tag <blockquote> standar, di tandai dengan tampilan text yang agak masuk ke dalam paragraph ( indent baik kiri maupun  kanan).

Dalam Editor Post Blogger view Compose, elemen html ini telah di sediakan toolnya, yang di wakili dengan gambar berbentuk tanda kutip (“ ).

Tujuan mengunakan blockquote sendiri pada dasarnya untuk memblock tulisan yang kita kutip dari sumber lain. Namun tak jarang ,  blockquote juga di gunakan oleh sebagian besar orang hanya untuk menonjolkan penekanan atau menarik  fokus sang pembaca pada  tulisan  yang dianggap manis oleh penulisnya.

Style Blockquote

Yang  sering saya dapati , ketika mendonwload sebuah free template, free blogger template atau mengunjungi sebuah blog teman. Banyak sekali gaya yang unik untuk menampilkan tag html <blockquote>  ini.

seperti :

Tanda kutip mengunakan sebuah background-gambar di samping kiri, font-style  italic, agar kutipan masuk kedalam paragraf di gunakan property padding-left  dengan nilai kurang lebih 60px.

Tanda kutip mengunakan dua buah gambar, pembukaan dan penutupan. property padding-left dengan nilai kurang lebih 50px.

 

Blockquite mengunakan sebuah border-left sekitar 2px.

 

Blockquite mengunakan sebuah border-kiri dengan ukuran yang sangat ektrem.

 

Super kreatifiti.

 

Pullquotes

Sebenarnya selain Blockquote adalah  istilah lagi dalam reperence web, yaitu  yang dinamakan dengan “ Pullquotes “.

Pada dasarnya antara Blockquote dan Pullquotes hampir mirip dalam tampilannya, cuman  perbedaannya terletak pada;  jika blockquite di gunakan untuk mengutip atau mengambil teks dari sumber , blog dan  web lain, maka pullquoites di gunakan untuk  menarik fokus pembaca dengan memberikan sebuah frame  pada tulisan, biasanya dalam media cetak sangat jelas sering kita temukan.

contonya seperti ini.

Dan Pullquotes tidak memiliki tag html seperti <blockquote>. Walaupun demikian, dalam prakteknya sering kali saya tidak bisa membedakan tampilan mana blockquote  mana Pullquotes. dan sering kali juga saya mengunakan tag blockqoute pada tulisan saya sendiri ( bukan di sumber lain… ya gitu dech :D ) .

Bagaiaman cara membuat gaya blockquote

But untuk kali, saya hanya bisa memberikan reperence tutorial tentang membuat style blockquites yang menurut saya sangat bangus untuk di pelajari. yaitu di mempercantik-blockquote-dengan-css.

atau untuk tutorial bulenya bisa di lihat di

simple-css-blockquotes-and-pullquotes,

six-ways-style-blockquotes,

block-quotes-and-pull-quotes-examples-and-good-practices ,

atau cari saja sendiri via abah google :D.

[..]

Cara mengedit heading [ h2 ] untuk Sidebar

Salah satu mangfaat pengunaan heading/judul ialah untuk mempermudah dalam menentukan sebuah topik. Pada html sendiri heading ini mempunyai tingkatan dan ukuran tertentu, mulai dari h1 sampai h6.

Dan secara default dalam template Minima Standar , pengaturan untuk tag heading h2 di atur secara umum ( inheritance= pewarisan property ), artinya ketika kita mengunakan h2 untuk konten dan untuk judul sidebar maka keduanya akan terlihat sama. dengan mengunakan script css di bawah.

/* Headings
----------------------------------------------- */
h2 {
  margin:1.5em 0 .5em;
  font:$headerfont;
  line-height: .4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}

Nah jika kita ingin mengunakan pengaturan h2 antara konten dan judul sidebar berbeda, maka caranya membuat h2 untuk sidebar secara khusus dengan menambahkan selector ID dan property-value .

contohnya  seperti ini.

#Sidebar-Wrapper h2 { property:value}

dengan begitu maka h2  untuk sidebar mempunyai aturan sendiri.

Sedangkan jika ingin membuat h2 mempunyai sifat yang lebih khusus lagi pada sebuah judul widget , maka yang perlu di ketahui dulu adalah nama widget dan Id nya.

contoh jika LinkList h2 untuk sidebar sama mengunakan  font tebal dan berwarna hitam seperti ini.

• LinkList1 h2.
  BlogKawan Satu
• Lisklist2 h2.
  BlogKawan Dua
• Linklist3 h2.
  BlogKawan Tiga.
  

ket : LinkList1,LinkList2,Linklist3  merupakan nama widget/gadget yang memiliki sebuah ID (  digunakan untuk tag secara individual dan spesifik, maka  untuk penulisannya dalam Css di awali dengan tanda pagar [ # ] ) .

Dan  jika saya ingin menampilkan BlogKawan Dua dengan hurup berwarna merah maka penambahkan pada halaman css-nya seperti ini.

#LinkList2 h2 { font-weight;Bold;color;red}

BlogKawan Dua

Otre selain dengan cara di atas,  ada lagi cara untuk membuat heading/judul untuk sidebar  berbeda satu sama lain, cara ini sering di sebut juga inline style sheet.

pertama centang/tandai di samping tulisan Expand Widget Templates.

kemudian cari tag html h2 yang ingin kita edit  atau ingin di atur secara individual. .

<h2><data:title/></h2>

dan tambahkan script seperti ini .

<h2 style=”background:…..; padding:…..; border:……”><data:title/></h2>

contohnya saya mengunakan inline style berupa border-top untuk h2 dengan warna yang berbeda-beda di blog ini.

 

 

yup mudah-mudahan pengalaman saya yang sangat sederhana ada mangfaatnya.

[..]

Css Conditional Comments: Solusi Bug untuk Ie

Hari gini masih pake browser IE ?

Peryataan seperti itu sering saya jumpai, bahkan tidak tanggung-tanggung, blogger sekelas “ C “ pun dalam satu balasan komentarnya pernah berkata seperti itu.

Ie terutama ie 6 , memang merupakan browser yang sering membuat saya frustasi. Terkadang kalau sebel dan malas membetulkanya saya pun sering mengatakan seperti itu “ Hari gini masih pake browser ie “ :D. 

Namun terkadang saya merasa bangga juga, jika saya bisa melewati test rendering di browser ini. tidak tahu kenapa ada kepuasan tersendiri jika hasilnya tidak terlalu buruk untuk di tampilkan di browser ie 6.  - makanya pernah teman saya suatu hari mengatakan via comment , bahwa saya ini terlalu perfeksiones  ( huhuuuuuuu ).

Kalau kita googling banyak sih jawaban dan solusi tengtang masalah bug  ie ini. cukup masukan keyword “ conditional comment “ atau “ conditional formatting” maka seabreg list akan kita temukan.

Tapi saya sendiri untuk mengatasi masalahnya  sering mengunakan tag seperti ini.

* html #elemen { property:value }

Syntax css tersebut hanya di baca di ie saja tidak untuk browser lainnya.

contoh ; ketika saya mengunakan lebar sidebar 210px , namun mendapatkan masalah jika di render di IE , maka saya akan tambahkan seperti ini.

* html #sidebar {width:200px }

Dengan syntax tersebut biasanya sangat manjur saya gunakan.

Selain syntax tersebut ada juga yang mengunakan seperti ini contohnya.

html>body .elemen { property:value }

Ada juga yang mengunakan conditional comments  seperti ini.

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" />
<![endif]—>

Syntak tersebut biasanya saya simpan di bawah tag ini ]]></b:skin>

Ya..ya..ya selain itu masih banyak sih tengtang bug ie. seperti tengtang float,box, image png transparent , height dll.

mungkin list judul artikel di bawah ini bisa membantu dan menambah wawasan seputar conditonal comment ( bug ie only ).

1. ie css bugs thatll get you every time
2. howto – javascriptkit
3. how to create an ie only stylesheet
4. select cuts off options in ie fix
5. Box model
6. Targeting Ie Using Conditional Comment

 

 

[..]

Global Css Reset

Menyeragamkan Ukuran Pada Setiap Browser.

Dalam tulisan tentang “ memasang linklist ala msn “ atau “ membelah komentar menjadi dua kolom “. saya menyarankan untuk memasukan kode css seperti ini.

*  { padding: 0;margin: 0; }

Dan sampai sekarang-pun setiap saya memodifikasi template, saya selalu mengawali css-nya dengan tag tersebut. Untuk apa tujuannya ??

Perlu kita ketahui setiap browser  mempunyai value ( nilai = pixel , persen dll ) yang berbeda-beda . seperti untuk tag  heading <h> , list <ul> dll. maka salah satu solusi -nya ialah saya selalu memberikan sebuh tag css di atas, yang sering di sebut “ global reset “, yakni mereset nilai padding dan margin untuk semua browser menjadi = 0 ( nol ).

Oh tentu saja jika kita memasukan tag css global reset  tersebut pada sebuah template yang sudah jadi , maka yang perlu kita lakukan mengatur ulang nilai margin dan padding pada tag-tag yang kita lihat berubah.

Contoh lain dari Global Reset.

* { outline: 0; padding: 0; margin: 0; border: 0; }

Yahoo Css Reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; } ol,ul { list-style: none; } caption,th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; } q:before,q:after { content:''; } abbr,acronym { border: 0; }

Contoh template yang sering mengunakan global reset bisa kita lihat pada Theme-nya Wordpress, Template blogspot keluaran BlogAndWeb atau themerious dll.

Technorati tags: Css, Blogger, Blogspot, Tutorial

Related Link.

1. a-killer-collection-of-global-css-reset-styles 

2. reser-reloaded – eric’s

3. Global White Space Reset

4. css tip global reset

Download Minima Cigazine Template

Makacih atas kunjugan dan supportnya selama ini

[..]

Triks Css : List Dua Kolom

Membagi satu list style ke dalam dua kolom.

Trik list menjadi dua kolom ini sebenarnya sangat berguna sekali terutama bagi yang mempunyai sidebar cukup lebar antara 260 px atas.  Setidaknya dengan cara itu bisa memangfaat space atau ruang yang sangat lebar tersebut.

Untuk peng-aplikasiannya sangat mudah pertama cari dulu tag ini.

]]></b:skin>

Kemudian Simpan kode  ini di atasnya.

/* Kode Css List Two Kolom 
------------------------------------------------------------------------------------------*/
#catl {
  padding :5px 10px;
  width : 91%;
  background-color : #ffffdd;
  border : 1px solid #ccc;
  margin : auto;
}

#catl h3 {
display : block; color : #669900; padding-bottom : 5px;
margin-bottom : 5px; border-bottom : 1px solid #666;font-size:14px; }

/* style all the list items here */
#catl ul li {
  height : 1em;
  list-style-type : none;
  color : #333;
  padding : 0.3em 0 0.4em 0.25em;
  font-size : 0.9em;
  border-bottom : 1px solid #ccc;
  text-indent:0px;
}

/* every second list item is positioned outward and moved up equal to LI height to even them */
#catl ul li.catl_l2 {
  margin-left : 50%;
  margin-top : -1.8em;
  padding : 0.3em 0 0.4em 0.5em;
  border : 0;
}  

/* Every other two list items are styled with a background for usability and style */
.catl_alt {
  background-color : #fffffc;
}

/* ini merupakan code hacking css untuk Ie 6*/
* html #catl ul li.catl_l2 {
  margin-top : -2.3em;
}

Setelah itu simpan perubahan. kemudian tambahkan sebuah widget atau gadget Html/javascript. dan masukan kode Html ini.

<div id="catl">
<h3>Satu List Dua Kolom</h3>
<ul>
<li><a href="#">List Item Satu</a></li>
<li class="catl_l2"><a href="#">List Item Dua</a></li>
<li class="catl_alt">List Item Tiga</li>
<li class="catl_l2">List Item Empat</li>
<li>List Item Lima</li>
<li class="catl_l2">List Item Enam</li>
<li class="catl_alt">List Item Tujuh</li>
<li class="catl_l2">List Item Delapan</li>
</ul>
</div>

Yang perlu di ganti adalah tulisan antara tag <li> dan </li>.

Jika ingin membuat linklist  menjadi seperti ini.

<li><a href=”http://alamat url/”> Nama List </a></li>

jika ingin membuat list berupa link gambar seperti ini.

<li><a href="http://alamat url/"><img src="alamat gambar></a></li>

* Note :

a. Atur tulisan list-nya jangan terlalu panjang

b Jika ingin mengunkana gambar atur nilai tinggi dan lebarnya, kira-kira 75px X 10px.

View Source : green-beast

Technorati tags: Belajar Css, List Dua Kolom

 

Download Minima Cigazine Template

Makacih atas kunjugan dan supportnya selama ini

[..]

List Image Dengan Teknik Css sprite

Ada yang  lucu kemarin malam ketika saya  gogling mencari alih bahasa  yang tepat untuk istilah yang satu ini " Css Sprite ". Selain sedikit sekali input yang kelur membahas tentang Css Sprite di webnya indonesia,  juga muncul di index pencarian ;   sprite campur Es batu.. hiksss :)

Namun satu hal yang sering saya temukan, setiap kali tulisan yang membahas tentang Css sprite , hampir semua reperensinya merujuk pada artikel yang di tulis oleh Dave Shea  " Css Sprites: Image Slicing Kiss of Death " di situsnya Alistpart.

View Demo

Menurut sebagian orang,  Css sprite hampir mirip hasilnya dengan cara  Image Map, di mana satu gambar bisa mempunyai beberapa alamat link tersendiri.

Namun kelebihan dari teknik Css sprite ini, selain simple penulisan kodenya, lebih dinamis  juga cakupannya lebih kreatif. karena bukan hanya membagi-bagi satu gambar untuk beberapa link , Akan tetapi  juga dapat membuat atau mengabungkan beberapa gambar  icon menjadi satu gambar untuk   di jadikan daftar list-image , seperti yang kita lihat di bagian kiri sidebar situsnya yahoo.

Mengabungkan beberapa icon ke dalam satu gambar

Bahkan yang lebih nyeleneh lagi, ada yang mengunakan teknik css sprite ini ke dalam  background halaman page-nya.

Maksud dan kegunaan dari Css sprite ini sendiri  pada intinya untuk mempersingkat loding sebuah halaman web atau blog  yang banyak mengunakan gambar,  dengan cara mengabungkan beberapa gambar tersebut ke dalam satu gambar. walaupun pada kenyataannya gambar yang di gabungkannya itu menjadi  sangat besar. ( jika yang sering mengunakan program animasi  flash pasti tahu istilah sprite , hampir setali tiga juta dengan konsep Css sprite ini.).

Contoh loding list Image dengan cara biasa, - yakni memasukan gambar iconnya satu persatu ke dalam list.

View Demo
( contoh saya ambil from Css trick.com )

Contoh loding list image dengan mengunakan Css Sprite. ( yakni mengabungkan gambar icon-nya ke dalam satu gambar )

View Demo
( contoh saya ambil from Css trick.com )

Praktek

Mengunakan  Css sprite untuk list image , perintah kode dalam css-nya sih sangat simple, yakni kita mengunakan Background-Position: x -y atau -x -y px. perintah ini untuk mengeser-geser gambar agar gambar yang muncul sesuai dengan yang kita inginkan.

Contoh yang sederhana seperti yang di gunakan oleh Yahoo. pertama mengabungkan beberapa gambar icon dengan bantuan program photoshop. jarak vertikal antara gambarnya 40px, sedangkan jarak horizontal antara gambar 300 px.

Kemudian menulis dalam css-nya, :

#menu li {
list-style:none;
font-size:12px;
padding:0px;
margin:0px;
}
#menu li a {
background:url(img/icon-04a.gif) no-repeat scroll 0pt;
display:block;
font-family: Georgia;
font-size:84%;
line-height:normal;
margin:0px;
padding:3px 0pt 13px 40px;
text-indent:-15px;
}

 

Sedangkan dalam Html-nya :

<ul id="menu">

/* jarak antar vertikal */
<li><a style="background-position: 0pt 0px;" href="#">List 1</a></li>
<li><a style="background-position: 0pt -40px;" href="#">List 2</a></li>
<li><a style="background-position: 0pt -160px;" href="#">List 3</a></li>
<li><a style="background-position: 0pt -120px;" href="#">List 4</a></li>

/*jarak horizontal dan vertikal */
<li><a style="background-position: -300px 0px;" href="#">List 5</a></li>
<li><a style="background-position: -300px -40px;" href="#">List 5</a></li>
<li><a style="background-position: -300px -80px;" href="#">List 5</a></li>
</ul>

hasilnya :

View Demo | View Donlot

 

Reperence

- CSS Sprites: What They Are, Why They're Cool, and How To Use Them
Css-Tricks.com
- CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
websiteoptimization.com
- CSS Sprites: Image Slicing’s Kiss of Death
alistapart.com.

Technorati tags: Css Sprite

 

[..]

Link : Cara membuat link pd Gambar

Untuk membuat link gambar, yakni menjadikan gambar ketika di klik membuka halaman blog atau alamat url  lain. kodenya seperti ini.

< a href= " Lokasi_tujuan ">< IMG SRC = " alamat url gambar"></a>

Contoh :

< a href= "http://catalog-tutorial.blogspot.com/">
< Img  Src ="http://jaloee.googlepages.com/combo-box.gif"></a>

* Lokasi Tujuan = http//catalog-tutorial.blogspot.com *
* IMG SRC ( url gambar ) = http://jaloee.googlepages.com/combo-box.gif.

Yang akan di tampilkan oleh browser adalah seperti ini.

 

Maka ketika kita menekan gambar tersebut, browser akan membuka alamat situs catalog-tutorial.blogspot.

Target Link

Sama seperti Link Teks. kita dapat membuat link gambar yang di tekan  membuka windows baru ( jendela baru ), yang perlu kita tambahkan adalah paremeter target Link, formatnya seperti tulisan yang berwarna.

< a href= "Lokasi_Tujuan" target="_blank">< Img  Src ="url / alamat gambar"></a>

 

Tulisan Yang Rada Nyambung

cara membuat link
menampilkan gambar ke dalam postingan
Trik Membackup Daftar Link
Membuat Kotak Scroll Untuk Blogroll

 

Technorati tags: Link Gambar, Tutorial Blogger

[..]

Link : Cara menulis Format / tag link

Link atau hyperlink merupakan sebuah navigasi dalam halaman webblog. Atau objek perantara yang menghubungkan satu situs web/blog dengan situs blog lainya, atau satu halaman blog dengan halaman blog lainya. bahkan juga bisa menghubungkan dalam sebuah artikel yang sama.

Dan objek link yang kita bisa gunakan di antaranya merupakan objek Teks, gambar, movie dan flash.

Sedangkan format penulisan dan pengunaanya sebagai berikut.

Link Teks.

Link ini merupakan link yang sederhana untuk di buat, format atau penulisannya seperti ini.

<a href="Lokasi_Alamat_Tujuan"> Nama Link </a>

Contoh:

<a href="http://catalog-tutorial.blogspot.com/"> Tutorial Blogger </a>

*Lokasi_Alamat_Tujuan yaitu : http://catalog-tutorial.blogspot.com *
*Nama Link yaitu Tutorial Blogger *

Yang akan di tampilkan oleh browser adalah nama link. seperti ini

Tutorial Blogger

maka ketika kita menekan tulisan Tutorial Blooger tersebut, maka browser akan membuka alamat situs catalog-tutorial.blogspot.

Target Link :

Format link di atas merupakan link dalam windows atau jendela yang sama. Sedangkan agar link yang di tekan membuka windows baru ( jendela baru ), yang perlu kita tambahkan adalah paremeter target Link, formatnya seperti tulisan yang berwarna.

<a href="Lokasi_Alamat-Tujuan" target="_blank"> Nama Link</a>

 

Technorati tags: Css dan Html, Tutorial Blogger

[..]

Text Berjalan ( marquee )

T entang marquee ini ( text berjalan ), sering di gunakan oleh para penguna blog khususnya blogger dari blogspot. tujuan yang utama mungkin untuk menyederhanakan content, baik itu blogroll dll.

Sebenarnya kodenya sangat simple sekali, di buat dengan tag <marquee> text yang akan berjalan  </marquee>.

sedangkan atribut yang sering di gunakan menyertainya ialah :

BGCOLOR="warna" - mengatur warna background text.

DIRECTION="left  \ right \ top \ down" - mengatur arah gerakan text

BEHAVIOR="scroll / slide / alternate /" - mengatur cara geraknya - bergerak berputar / bergerak sekali lalu berhenti / bergerak kiri-kanan.

TITLE="pesan" - pesan yang akan muncul saat mouse berada di atas text.

SCROLLAMOUNT="angka" - mengatur kecepatan gerakanya.

SCROLLDELAY="angka" - mengatur waktu tunda gerakan dalam milidetik.

LOOP="angka \ -1 \ infinite " - mengatur jumlah pengulangan.

WIDTH="angka" - mengatur lebar block text . baik secara pixel atau persen.

Contoh-contoh Marquee.

Simple

<marquee> simple scrolling text</marquee> simple marquee text

 

Mengunakan Background : <marquee bgcolor="#FFEFF0">mengunakan atribut bgcolor</marquee> mengunakan atribut bgcolor

 

Mengunakan atribut direction. " left " atau " right " / "top"  / "down" .

<marquee direction="right" bgcolor="#99CCFF">mengunakan atribut direction right atau dari kanan</marquee> direction right atau dari kanan

 

Mengunakan Atribut Behavior dan Direction

<marquee behavior="alternate" direction="down" bgcolor="#FFEFF0">Mengunakan Atribut Behavior dan Direction</marquee> Mengunakan Atribut Behavior dan Direction

 

Mengatur atribut Behavior, Direction dan SCROLLAMOUNT ( keceptan ).

<marquee behavior="alternate" direction="left" bgcolor="#990C13" scrollamount="2">Behavior, Direction dan SCROLLAMOUNT</marquee> Behavior, Direction dan SCROLLAMOUNT

 

Mengatur atribut Behavior, Direction , Scrollamount dan prilaku mouse.

<marquee behavior="scroll" align="middle" direction="left" bgcolor="#DF7D83" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()"><br /><br />    <a href=" http://catalog-tutorial.blogspot.com ">Nyahooo Booo</a>  <a href=" http://jaloee.blogspot.com ">Sotoshop yeuh</a> <br /><br />  </marquee>

Nyahooo Booo Sotoshop yeuh

Technorati tags: Text Marquee, New Blogger Tutorial

[..]

Mengenal Margin dan Padding

Setiap kali mengedit halaman css blog kita , sering kita menjumpai tulisan margin dan padding. apa sih arti margin dan padding, dan apa kegunaan dan perbedaan antara margin dan padding untuk halaman blog kita.

Postingan ini atau pertanyaan ini, sebenarmya terlalu berat buat saya, karena telah memasuki wilayah teori, sedangkan saya tahu ngeblog dan ngedit-edit ala kadarnya, itupun template orang lain bukan buatan sendiri, dan seratus persen hasil dari otodidak. Do you know otodidac ? seseorang yang mengandalkan insting ke timbang ilmu yang pasti, seorang yang bersandar dan berlindung di bawah KUHP trial dan error.

Akan tetapi saya akan coba tulis ini, dengan meng-gadaikan kemaluan saya,... eh rasa malu saya.

Untuk memudahkan pemahaman saya telah membuat ilustrasi berupa gambar seperti di bawah. ( jika ada yang tidak setuju harap acungkan tangan ).

Dalam hikayat lain :

Margin : Digunakan untuk mengatur batas atas (top), Kanan ( right ), bawah ( bottom ) dan kiri ( left ) antar elemen/kolom halaman web. atau The CSS margin properties define the space around elements.

Sintaks :

selector { property : value } atau Body { margin-top : value; margin-right: value; margin-bottom: value; margin-left: value; }

bisa juga di singkat seperti ini. contoh:

Body { margin:10px 5px 10px 5px; }

/* menurut yang saya ketahui dari w3school.com urutannya searah jarum jam. jadi Top-Right-Bottom-Left. ( kalau ada yg tidak setuju silahkan ngacung ) */

Untuk nilai yang di atur, kita bisa mengunakan satuan pixel, centimeter, em, dan %

Browser dan W3c Support untuk margin.

Lihat juga di www.w3schools.com

PADDING : Padding mengatur batas antara garis border dan content ( isi ). atau padding hanya untuk mengatur batas atas, kanan, bawah dan kiri pada properti border saja. The CSS padding properties define the space between the element border and the element content.

Sintaks :

selector {properti: value} atau .Class { padding-top:value; padding-right: value; padding-bottom:value; padding-left:value; }

bisa juga di singkat seperti ini. contoh:

.Class { padding:10px 5px 10px 5px; }

/* sekali lagi urutannya searah jarum jam. jadi Top-Right-Bottom-Left. ( kalau ada yg tidak setuju silahkan ngacung atau protes, demi kebaikan bersama ) */

Note : biasanya kalau saya bingung mengatur nilai margin atau padding, saya langsung saja menyebutkanya. misal Margin-top: value; atau mengatur jarak sebelah kiri Padding-left:value;

sama seperti margin, untuk nilai yang di atur, kita bisa mengunakan satuan pixel, centimeter, em, dan %

Browser dan W3c Support untuk padding.

Technorati Profile

Lihat juga di www.w3schools.com

SUMBER

1. Kupas Tuntas Css oleh Dominikus Juju

2. www.w3schools.com

Technorati tags: Belajar Css/Html

[..]

Ketombe Di Link

Ini sebenarnya telah saya posting satu tahun yang lalu, judulnya pun sama dengan waktu dulu saya menulis " Ketombe di Link ".
Ketombe Di Link Maksudnya ketika menekan link baik itu di sidebar blog kita atau link yang ada di postingan kita, maka akan terlihat bekas titik-titik garis yang putus, seperti yang di tunjukan gambar .

 Dan problem ini justru akan terlihat ketika membuka blog kita di browser  FireFox, - sedangkan di IE ngga ada masalah. Bagi yang merasa terganggung dan merasa mengotori leot blog kita dengan masalah ketombe di link ini, tambahkan saja di Css Style Sheet nya ( antara tag <head>...</head> code di bawah ini.

a:active
{
outline: none;
}
a:focus
{
-moz-outline-style: none;
}

Artikel tentang ini saya dapati dari bu Annie dalam bognya BlogU Student makacih yach Bu Annie

del.icio.us tags: Belajar css, tip n trik, blogs, new blogger

[..]

Memperbaiki Gambar PNG Transparant di IE

Kamu tahu , ternyata file gambar PNG yang transparant  ngga trasparant lagi ketika di liat di IE. Penasaran ! atau pingin bukti ! coba saja kita posting gambar PNG transparant, dan liat di browser IE, akan tampak sebuah background putih mengeliligi file gambar yang transparant itu. Untuk menghindari masalah tersebut  tambahin dan simpan  scrip di bawah ini, sebelum tag  /head 

<!--[if lt IE 7.]>

<script defer type="text/javascript" src="http://jaloee.googlepages.com/pngfix.js"></script>

<![endif]-->

Untuk lebih jelasnya tentang masalah ini, silahkan anda buka di  bioneural.net

del.icio.us tags: Belajar Css, Blogs, New blogger

[..]