Mengenal apa itu CSS?

Apa itu CSS? 
CSS merupakan kependekan dari (Cascading Style Sheets) yang merupakan salah satu bahasa pemrograman desain website atau web yang berfungsi untuk mengontrol format tampilan halaman web. CSS umumnya digunakan untuk mendesain halaman HTML (Hyper Text Markup Language) dan XHTML, namun sekarang pengaplikasian CSS sudah lebih luas lagi seperti pada dokumen XML. CSS akan membantu tampilan dokumen bahasa HTML atau sejenisnya seperti meliputi tampilan layout, penggunaan font, warna, background, dan lain-lainnya sehingga akan memudahkan dalam pengkontrolan tampilan website yang tentunya akan meningkatkan efektifitas, dan fleksibitas dalam pengelolaan halaman website.

Software untuk membuat tab menu CSS

Buat sobat blogger yang tertarik dengan dunia web design tentunya penggunaan tab menu sangatlah penting sebagai navigasi menu untuk web yang akan kita buat, namun kadang kalanya waktu kita lebih banyak tersita untuk membuat layout ataupun gambar menu tersebut dengan pengolah gambar seperti adobe photoshop, gimp, ataupun pengolah gambar lainnya belum lagi kita mengubahnya ke dalam bentuk CSS. Kali ini saya menemukan salah satu tools untuk memudahkan buat sobat blogger dalam hal mengkustomisasi tab menu ini, sehingga akan lebih memudahkan sobat dalam membuat tab menu untuk desain web kita, terlebih tool ini juga dapat mengkonvertnya ke dalam bentuk kode CSS sehingga kita tidak perlu di repotkan lagi dengan hand coded yang tentunya perlu extra effort buat pemula seperti saya. Tool ini cukup ringan dengan ukuran file 1,45 MB dan software tab menu CSS ini sangat mudah di gunakan dalam pengaplikasikannya apalagi software ini gratis alias FREEWARE!!!
Software tab menu CSS ini menyediakan beberapa menu style CSS bawaan yang lumayan menarik, baik itu model horizontal tab menu maupun yang vertikal tab menu, jadi tinggal pakai saja karena sudah di sediakan kode HTML dan CSS nya sungguh sangat simple dan efektif menurut saya, karena dengan sofware tab menu CSS ini memudahkan kita dalam membuat menu-menu CSS tanpa perlu kita di pusingkan dengan hand coded atau menulis kode HTML atau CSS nya. Kalau sobat  blogger berminat silahkan download langsung aplikasi gratisan  tab menu CSS  klik di sini.

Berikut screenshootnya :

Margin dan Padding

Margin dan padding merupakan suatu property CSS yang tidak asing buat sobat blogger yang senang dengan mengedit template, di postingan ringan ini saya mencoba mengenal margin dan padding dengan gaya bahasa saya sendiri dan tidak lebih untuk sebagai media catatan saya dan bukan bermaksud untuk menggurui., karena pada dasarnya saya juga sering lupa perbedaan margin dan padding ini :p. 

Untuk memudahkan sobat dalam mengenal margin dan padding ini saya akan berikan screenshootnya seperti di bawah ini :  

Masing-masing element saya definisikan nilainya sebagai berikut :

element 1 { margin:0px; padding:0px;}

element 2 { margin:0px 10px 10px 0px; padding:0px 10px 10px 0px}

element 3 ( margin:0px; padding:0px}

Sekarang masuk ke definisi margin dan padding  :

Margin : Digunakan untuk mengatur jarak border batas atas (top), kanan ( right ), bawah ( bottom ) dan kiri ( left ) antar elemen (E2) dengan element di luarnya (E1)  
Syntax  propertynya :
     margin-top : value;
     margin-right: value;
     margin-bottom: value;
     margin-left: value;

Bisa ditulis shorthand property (secara singkat) :
contoh: 

margin {10px 20px 10px 0px}

Padding :  Digunakan untuk mengatur jarak border batas atas (top), kanan ( right ), bawah ( bottom ) dan kiri ( left ) antar elemen (E2) dengan element di dalamnya (E3}

Syntax propertynya : 
     padding-top:value;
     padding-right: value;
     padding-bottom:value;
     padding-left:value;

Bisa di  tulis Shorthand Property (secara singkat) :
contoh: 
padding {10px 20px 10px 0px}

Pada hal ini kita hanya fokus pada element 2 (E2) saja dimana saya sudah berikan margin bottom E2 dengan garis merahnya, margin right E2 garis kuning, padding bottom E2 dengan garis hitamnya, dan padding right E2 garis ungu dan nilai-nilai yang saya berikan untuk element 2 akan memberikan tampilan seperti screenshoot di atas, beda lagi apabila kita memberikan nilai element 2 (E2)dengan 0px uintuk margin dan paddingnya, maka element tersebut akan berdempetan dengan element 1 (E1) karena margin E2 0px dan element 3 (E3) karena padding E2 0px.

Semoga pengertian margin dan paddng ini dapat membantu sobat untuk lebih dalam mengenal property css, dan saya harapkan postingan ringan ini bermanfaat buat sobat blogger and happy blogging.

Sumber :

1. Mengenal margin dan padding oleh Suhu jaloee 
2. Setting properties of container 
3. w3schools
   

Membuat bingkai foto di blogspot

Karena sekarang lagi momen bagi-bagi award di dunia blogger dan banyak juga sobat blogger yang kebagian award terus bingung mau menaruh di mana awardnya, nah saya punya cara bagaimana membuat bingkai foto , pas banget nih buat sobat blogger yang mau menaruh award ini di bingkai, jadi lebih rapi dan elegan :p . Oke kita lihat contoh di bawah ini :

Mau tahu cara buatnya?

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Tidak perlu centang tanda Expand widget, setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

td {text-align:center;} .fotoatas { border:5px outset gold; background-color:#FFFFFF;} .fotobawah {border: 2px outset gold; background-color:#FFF4EA;}
Jangan lupa save hasil pekerjaan sobat
3. Sekarang tinggal aplikasinya ke dalam blog sobat
Saya sarankan taruh kode ini di dalam postingan sobat sebenarnya bisa saja taruh di sidebar kalau sobat sudah tahu cara mengubah widht dan height nya.

<tr><td><table width="100" align= "center">
<tr><td colspan="2" class="fotoatas"><img src="URL IMAGE" width="278" height="183"></td> </tr>
<tr><td class="fotobawah"><img src="URL IMAGE" width="84" height="87"></td> <td class="fotobawah"><img src="URL IMAGE" width="83" height="91"></td></tr>
<tr><td class="fotobawah"><img src="URL IMAGE" width="104" height="87"></td><td class= "fotobawah"><img src="URL IMAGE" width="98" height="70"></td></tr>
</table>


Ubah URL IMAGE dengan url gambar anda

Ok, selamat menaruh award di bingkai foto sobat yang baru buat, semoga sukses and kalau gagal kasihan deeeh looo wekekekekeke :p .

Membuat image CSS popup di blogspot

Kali ini saya akan memposting bagaimana cara membuat image atau gambar muncul (popup) di blogspot, yang apabila kita mengarahkan kursor mouse ke gambar tersebut maka akan muncul gambarnya menjadi besar, trick ini sangat bagus buat yang suka menaruh koleksi foto-foto pribadinya di blognya, teknik ini ga perlu javascript hanya sedikit permainan di bagian CSSnya. Kalau mau lihat contohnya bisa lihat di bawah ini :

I'm so Cute

Hi, my name is Cella and you?

Arahkan kursor mouse sobat ke gambar di atas dan lihat efek popupnya

Mau tahu cara buatnya?

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Centang tanda Expand widget, setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

Kalau mau ambil code di atas klik view plain nanti akan muncul popup code silahkan copy dari situ

Kemudian save hasil pekerjaan sobat.
3. Sekarang untuk mengaplikasikannya dengan memakai kode di bawah ini :

<a class="thumbnail" href="#thumb"><img src="Image Url" width="100px" height="66px" border="0" /><span><img src="Image Url" /><br />YOUR TEXT</span></a>

<a class="thumbnail" href="#thumb"><img src="Image Url" width="100px" height="66px" border="0" /><span><img src="Image Url" /><br />YOUR TEXT</span></a>


Ganti Image URL dengan alamat gambar sobat blogger
Ganti YOUR TEXT dengan kalimat yang sobat blogger kehendaki

Teknik image css popup ini bisa di aplikasikan di dalam postingan ataupun di sidebar dengan cara add page elements > HTML/Javascript terus copy paste kode di atas tersebut. Thinking Out The Box sesuaikan dengan imajinasi sobat blogger. Ok sampai di sini aja and happy blogging. Kalau kurang jelas bisa YM saya yang sudah tersedia di sidebar

Mengenal border lengkung

Kali ini saya akan membahas bagaimana membuat border lengkung tapi efek ini hanya bisa di lihat di browser firefox dan google chrome, border lengkung ini bisa di aplikasikan di blog sobat biar ga monoton dengan border-border lainnya biar nambah variatif dalam mendesain blog sobat, nih saya kasih contohnya.

contoh dengan border biasa :

Memakai border biasa

contoh dengan border lengkung :

Memakai border lengkung

Tertarik mau membuatnya?

Kalau sobat sudah mengenal properties CSS untuk mengaplikasikan tag properties border lengkung ini sangat mudah, cukup menambahkan :

-moz-border-radius: npx
Nilai n merupakan nilai kelengkungan bordernya
Turunan properties border lengkung ini ada 4 :

* -moz-border-radius-topleft
* -moz-border-radius-topright
* -moz-border-radius-bottomleft
* -moz-border-radius-bottomright

Saya contohkan mengaplikasikannya menggunakan tag <div>

<div style="-moz-border-radius-topleft:12px;-moz-border-radius-bottomright:12px;border:1px solid black;background-color:#c0c0c0;padding:6px;">Hanya contoh pemakaian border lengkung kiri atas dan border lengkung kanan bawah </div>

Maka akan hasilnya akan seperti :

Hanya contoh pemakaian border lengkung kiri atas dan border lengkung kanan bawah

Di atas hanya sebagian contoh penggunaan dari -moz-border-radius kalau sobat sudah pandai dalam CSS maka bisa di terapkan juga di properties border pada bagian style sheet CSS blog sobat, ok saya contohkan mengaplikaskannya ke dalam properties border blockquote, saya akan mengunakan tag blockquote pada contoh ini :

.post blockquote {
margin : 15px 15px 15px 0px;
padding :30px 10px 10px 10px;
clear : both;
list-style-type : none;
background : transparent url(http://lh4.ggpht.com/jaloee/SJnxszef6II/AAAAAAAACX4/etpucC5BrdM/paku.png) no-repeat 50% 5px;
border-top : 1px solid #cccccc;
border-right : 2px solid #000000;
border-bottom : 3px solid #000000;
border-left : 1px solid #eeeeee;
-moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;
}
.post blockquote p{ margin:.75em 0}

Kalau mau ambil code diatas klik view plain nanti akan keluar popup window copy kodenya dari sana

Maka ketika sobat blogger memakai tag blockquote maka hasilnya akan seperti ini :

Lorem ipsum dolor sit amet, consectetuer jquery rules! elit, sed diam nonummy nibh euismod tincidunt ut laoreLorem ipsum dolor sit amet, consectetuer jquery rules! elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam et dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut jquery rules! ex ea commodo consequat

Sekarang tergantung sobat blogger mau di aplikasikan kemana, "Think Out The BOX", daya kreatif sobat di perlukan untuk bisa memakai properties -moz-border-radius- ini. Kalau pengen mengenal border lengkung ini lebih jauh silahkan ke sini

Efek border lengkung in hanya bia dilihat di firefox dan google chrome