Jika kita mengetikan pada url (http://www.depkominfo.go.id/wp-login.php), akan muncul form login wordpress.

Kreatif juga ya, dengan tools yang ada bisa membuat seperti ini. He”.. Berarti buat tutorial membuat situs kelas perusahan atau pmerintah menggunakan wordpress bakalan rame kali ya.. Saya juga termasuk orang yang suka pake wordpress, kalo kepepet, he”..

Beberapa situs saya yang menggunakan wordpress:

• rumah cerdas indonesia (www.rumahcerdasindonesia.com)
• yayasan yaspida (www.yaspida.com)

]]> http://blog.yudhi.web.id/capruk-an/web-depkominfo-pake-wordpress/feed/ http://blog.yudhi.web.id/bermain-css/kode-singkat-css/ http://blog.yudhi.web.id/bermain-css/kode-singkat-css/#comments Tue, 31 Mar 2009 13:05:56 +0000 admin http://blog.yudhi.web.id/?p=35 One of the main advantages of using CSS is the large reduction in web page download time. To style text, you used to have to use the <font> tag over and over again. You probably also laid out your site with tables, nested tables and spacer gifs. Now all that presentational information can be placed in one CSS document, with each command listed just once.

But why stop there? By using CSS shorthand properties you can reduce the size of your CSS document even more.

Font

Use:

font: 1em/1.5em bold italic serif

…instead of

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

This CSS shorthand property will only work if you’re specifying both the font-size and the font-family - omit either and the CSS rule will be completely ignored. Also, if you don’t specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so do bear this in mind too.

Background

Use:

background: #fff url(image.gif) no-repeat top left

…instead of

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Omit any of these commands from the background CSS shorthand property, and the browser will use the default values. If you leave out the background-position command then any background image will be place in the top-left of the container and then repeated both horizontally and vertically.

Lists

Use:

list-style: disc outside url(image.gif)

…instead of

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

Leave out any of these CSS commands from the shorthand rule, and the browser will use the default values for each, namely disc, outside and none (i.e. no images) respectively.

There are a number of different CSS shorthand commands for margin and padding, depending on how many of the sides of the containing element have the same margin or padding values:

Four different values

Use:

margin: 2px 1px 3px 4px (top, right, bottom, left)

…instead of

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

Three different values

Use:

margin: 5em 1em 3em (top, right and left, bottom)

…instead of

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em

Two different values

Use:

margin: 5% 1% (top and bottom, right and left)

…instead of

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%

One different value

Use:

margin: 0 (top, bottom, right and left)

…instead of

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0

The above rules also apply to padding and border (see below for more on border).

Border

Use:

border: 1px black solid

…instead of

border-width: 1px;
border-color: black;
border-style: solid

Use:

border-right: 1px black solid

…instead of

border-right-width: 1px;
border-right-color: black;
border-right-style: solid

(You can substitute right with top, bottom or left.)

The above CSS shorthand rules can be conveniently combined with the shorthand rules used by margin and padding. Take a look at the following box:

These borders can be achieved with the following CSS command:

border: 8px solid #336;
border-left: 10px solid #ccf;
border-top: 10px solid #ccf

You can achieve exactly the same effect by using:

border: 8px solid #336;
border-width: 10px 8px 8px 10px
border-color: #ccf #336 #336 #ccf

Conclusion

CSS shorthand properties are great! They’re a great way to reduce the amount of code contained in a CSS document, allowing for faster download times and easier editing. Now who can argue with that?

Setelah menggali di beberapa situs berkenaan css, saya mendapatkan solusinya pada tag css, yaitu z-index. Z-index adalah tag css yang mengatur urutan tumpukan suatu komponen (baik itu div, p, img dll).Pola kerjanya mirip sekali dengan pembuatan film kartun. Misal untuk membuat suatu film kartun, kita harus punya layer background dan layed manusia, dua layer ini memiliki urutan tumpukan. Layer paling bawah adalah layer background, dan layer diatasnya adalah manusia.Lain hal nya jika kita membalik posisi layer ini, maka gambar manusia tidak akan muncul

z-index memiliki value, yang bisa diisi dengan angka(integer), dengan aturan: nilai elemen yang lebih besar akan selalu ada di depan.

Setingan aslinya, z-index bernilai 0, dimana semua layer diurut secar natural berdasarkan urutan pengkodean. Namun jika anda memiliki 3 layer yang anda ingin urutkan, misal dalam kasus memunculkan dropdown, slideshow dan image thumbnail slideshow, maka kita bisa mengatur nilai z-index pada setiap komonen drop down dan slideshow. Untuk contoh nyatanya, nanti saya coba untuk upload beberapa contoh. Namun, jika Anda menginginkan agar suatu komponen selalu berada di atas, maka masukan nilai 1, dengan nilai z-index yang lain 0, maka komponen tadi akan selalu berada si posisi atas, tanpa terganggu oleh komponen yang lain.