Border-Radius : Membuat Garis Lengkung Dengan CSS

Sebelumnya saya pernah membahas tutorial membuat garis lengkung pada kolom atau curve corner. Mungkin kurang lengkap dan masih banyak yang menanyakan hal ini kepada saya. Sayangnya kode border-radius ini tidak support dengan internet explorer. Jika sobat suka menggunakan ie sebagai browser utama, sobat tidak akan bisa merasakan hebatnya css untuk garis lengkung ini.

 

Saya akan berikan contoh pengunaan border-radius pada tulisan saja, jika ingin menambahkan pada sidebar atau kotak postingan juga bisa. Berikut ini syntax untuk border-radius dan beberapa contoh penulisan di blog menggunakan kode border-radius.

 

Syntax untuk border-radius

 

Mozilla Equivalent	Browser Opera 10.5	Webkit Equivalent (Safari 3)
-moz-border-radius-topright	border-top-right-radius	-webkit-border-top-right-radius
-moz-border-radius-bottomright	border-bottom-right-radius	-webkit-border-bottom-right-radius
-moz-border-radius-bottomleft	border-bottom-left-radius	-webkit-border-bottom-left-radius
-moz-border-radius-topleft	border-top-left-radius	-webkit-border-top-left-radius
-moz-border-radius	border-radius	-webkit-border-radius

 

 

-Moz-Border-Radius (Untuk Mozilla)

 

<div style="background-color:#ccc; -moz-border-radius:5px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

 

<div style="background-color:#ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

 

<div style="background-color:#F5F6CE; -moz-border-radius-topright:30px; -moz-border-radius-bottomright:30px; border:5px solid #000; padding:10px;">ISI TULISAN</div>

 

<div style="background-color:#F5F6CE; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

 

<div style="background-color:#F5F6CE; -moz-border-radius:30px 10px;  border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

 

 

-Webkit-Border-Radius (Untuk Safari)

 

<div style="background-color:#A9D0F5; -webkit-border-top-left-radius:30px; -webkit-border-bottom-right-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

 

<div style="background-color:#F5D0A9; -webkit-border-top-left-radius:50px; -webkit-border-top-right-radius:50px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

 

 

 

Border-Radius (Support Opera 10.5)

 

<div style="background-color:#F5F6CE; border-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

 

 

Jika ingin membuatnya pada sidebar blog, silahkan sobat aplikasikan kode css sidebar blog sobat dengan kode diatas. Caranya hanya menambahkan kode yang saya tebalkan diatas kedalam css sidebar blog sobat.

 

Semoga bermanfaat ya.

More about → Border-Radius : Membuat Garis Lengkung Dengan CSS

Cara Membuat Dan Mempercantik Blockquote

Ada pertanyaan dari salah seorang sobat pada postingan membuat navigasi horizontal 2 baris yang menanyakan tentang modifikasi blockquote. Saya akan berikan sedikit contoh blockquote yang bisa sobat jadikan referensi dan mungkin bisa dipasang pada blog. Blockquote sendiri adalah tulisan menjorok kedalam yang memang sudah ada pada fasilitas blogger.

 

Blockquote Gambar

 

Sama seperti yang ada di blog ini, kode css-nya :

 

.post blockquote {
background:#F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAPYuoaaWh19uYTk-TyWMJt9VQTHQbgyI5ZrBb6qX0wHfMy7pipctW-tN1mDhlxV5pyzD0UQz6-pQlhJTm2Z01494E9ksm6ZV6n_siueGf27Pg-LmbSi5crkLIuE2VhxPe3AmXSqiNmY/s400/quotes_icon.gif) no-repeat scroll 5px 5px;
color:#3B0B0B;
border:2px outset #E6E6E6;
margin:10px;
padding:10px 10px 10px 40px;
}

 

Hasilnya :

 

Keterangan :

• #F9F9F9 adalah warna background.
• padding:10px 10px 10px 40px --->> perhatikan saja yang 40px karena ukuran tersebut adalah jarak antara garis pinggir kiri dengan tulisan, jadi jika sobat menggunakan gambar yang besar, maka ubah dan besarkan padding 40px-nya.
• Untuk gambarnya sobat sesuaikan dengan warna background, saya punya beberapa gambar dibawah ini yang bisa sobat gunakan.

 

 

Untuk penggunannya : silahkan klik kanan pada salah satu gambar diatas, kemudian pilih properties --->> location image properites --->> copy semua url gambar tersebut kemudian ganti url tulisan warna merah diatas dengan url gambar yang baru.

 

---

 

Blockquote Border dan Warna

 

Kode css :

 

.post blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px double #AEB404;
background-color: #F2F5A9;
}

 

Hasilnya :

 

 

---

 

Blockquote Tulisan Besar Pada Baris Pertama

 

Kode css :

 

.post blockquote {
margin: 1em 2em;
border-left: 1px dashed #999;
padding-left: 1em;

}
.post blockquote p:first-letter {
float: left;
margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
font-size: 250%;
font-weight: bold;

}
.post blockquote p:first-line {
font-variant: small-caps;

}

 

Hasilnya :

 

 

---

 

Blockquote Warna dan Model Tulisan

 

Kode css :

 

.post blockquote {
color: #66a;
font-weight: bold;
font-style: italic;
margin: 1em 3em;
}
.post blockquote p:before {
content: '"';
}
.post blockquote p:after {
content: '"';
}

 

Hasilnya :

 

 

---

 

Berikut cara pemasangannya :

• Login ke blogger.
• Tuju Tata Letak.
• Pilih Edit HTML.
• Cari kode .post blockquote { �������������dst } hapus semua kode tersebut dan ganti dengan salah satu kode css diatas.
• Jangan Lupa Simpan Template.

 

Mudah-mudahan bermanfaat ya.

More about → Cara Membuat Dan Mempercantik Blockquote

CSS Border Style

Belajar css memang sangat menyenangkan, kali ini saya coba berikan sedikit tips dalam membuat border blog. Mungkin ada yang belum mengetahui ragam atau jenis border, padahal ada banyak jenis border yang bisa di gunakan untuk mempercantik tulisan atau blog. Dibawah ini ada beberapa daftar jenis border yang bisa sobat gunakan untuk mengganti border sidebar atau main post blog.

 

border-style: dotted border-style: solid border-style: groove border-style: inset

border-style: dashed border-style: double border-style: ridge border-style: outset

 

Berikut ini contoh dari border yang bisa sobat gunakan :

 

Border-style: dotted

<div style="border:5px dotted #08088A; background:#FFF; width:500px; padding:20px">

 

dotted dotted dotted dotted dotted

 

</div>

 

dotted dotted dotted dotted dotted

 

 

Border-style: solid

<div style="border:5px solid #08088A; background:#FFF; width:500px; padding:20px">

 

solid solid solid solid solid

 

</div>

 

solid solid solid solid solid

 

 

Border-style: dashed

<div style="border:5px dashed #08088A; background:#FFF; width:500px; padding:20px">

 

dashed dashed dashed dashed dashed

 

</div>

 

dashed dashed dashed dashed dashed

 

 

 

Border-style: groove

<div style="border:5px groove #08088A; background:#FFF; width:500px; padding:20px">

 

groove groove groove groove groove

 

</div>

 

groove groove groove groove groove

 

 

 

Border-style: double

<div style="border:5px double #08088A; background:#FFF; width:500px; padding:20px">

 

double double double double double

 

</div>

 

double double double double double

 

 

 

Border-style: inset

<div style="border:5px inset #08088A; background:#FFF; width:500px; padding:20px">

 

inset inset inset inset inset

 

</div>

 

inset inset inset inset inset

 

 

 

Border-style: outset

<div style="border:5px outset #08088A; background:#FFF; width:500px; padding:20px">

 

outset outset outset outset outset

 

</div>

 

outset outset outset outset outset

 

 

 

Border-style: ridge

<div style="border:5px ridge #08088A; background:#FFF; width:500px; padding:20px">

 

ridge ridge ridge ridge ridge

 

</div>

 

ridge ridge ridge ridge ridge

 

 

Border Campur Aduk 

<div style="border-style:dotted  dashed double outset; border-color:red orange blue purple; border-width:5px; background:#FFF; width:500px; padding:20px">

 

dotted dashed double outset

 

</div>

dotted dashed double outset

 

 

Keterangan :

• border:5px adalah tebal dari border.
• #08088A adalah kode untuk warna biru, selengkpnya bisa dilihat disini.
• width:500px adalah lebar dari kotak.
• padding:20px adalah jarak antara tulisan dengan border.
• background:#FFF adalah warna latar.

 

Semoga bermanfaat.

 

More about → CSS Border Style

CSS Style Generator

Salah satu bagian penting dalam template adalah kode css (cascading style sheet), seperti kita ketahui css adalah bahasa stylesheet yang mengatur tampilan sebuah dokumen. Umumnya css digunakan untuk memformat halaman sebuah blog/web dengan bahasa HTML. Dengan css, kita bisa mengatur warna dan tampilan blog, bahkan memformat ulang template dengan merubahnya secara tepat.

 

Untuk mengedit beberapa bagian atau keseluruhan kode css pada template, kita bisa membuatnya secara manual. Itu buat yang mengerti bahasa css, buat yang belum begitu mengerti, css style generator dari metatitan cssbuilder bisa sobat coba. Disini sobat bisa dengan mudah membuat kode css untuk template sobat, mulai dari body, header, post, sidebar, dll.

 

Tentukan dahulu bagian yang ingin di buat, setelah itu atur bagian font, box properties, background, posisi dan list properties. 

 

 

 

Hanya dalam sekejab, kode css berhasil sobat ciptakan dan tinggal memasukkannya kedalam template. Hasilnya bisa sobat lihat dibawah ini :

 

 

Itu hanya satu contoh saja, silahkan sobat kreasikan template sehingga menjadi lebih indah. Jangan takut template jadi rusak, silahkan backup template sobat sebelum melakukan edit css.

 

Selamat mencoba !

More about → CSS Style Generator

Analisa Kecepatan Loading Blog

Seperti kita ketahui, performa sebuah blog sangat di tentukan oleh beberapa hal, seperti template yang menarik, isi postingan, dan kecepatan loading blog. Template yang cantik dan isi artikel yang menarik akan menjadi sia-sia jika loading blog sangat lambat. Karena saya sendiri pernah mendapat kritik dari sobat blogger di kotak chat box, yang mengatakan bahwa loading blog saya terlalu berat, �coba anda kurangi java script di blog anda�. Sebuah kritik berharga dan sampai sekarang masih saya ingat.

 

Ada beberapa cara untuk mengurangi loading blog kita, seperti yang pernah saya jelaskan sebelumnya, yaitu dengan kompres css dan menyimpan css di hosting. Dengan meminimalisasi css dan javascript, blog yang tadinya lambat akan berubah menjadi lebih cepat. Dan usahakan untuk menghindari pemakaian javascript di bagian header, karena jika situs dari javascript yang sobat gunakan sedang down, maka loading blog sobat akan menjadi sangat lambat. Karena saya sendiri mengalaminya beberapa hari yang lalu, ketika situs dari script kode iklan yang saya gunakan sedang lambat, sehingga loading blog saya ikut-ikutan jadi lambat.

 

Dibawah ini ada beberapa tools yang bisa sobat gunakan untuk mengukur kecepatan blog sobat. Pembacaannya berupa angka dari bagian-bagian blog sobat, mulai dari html, html image, css image, javascript, css, multimedia, dll. Semuanya terbaca dalam satuan kb. Bandingkan semua tools dibawah ini, karena setiap tools mempunyai tingkat akurasi yang berbeda-beda.

 

1. Website Optimization

    

   

    

2. Free Speed Test

    

   

    

3. Aptimize

    

   

    

4. Tools Pingdom

    

   

 

Empat situs diatas akan memberikan hasil yang berbeda-beda. Jangan jadikan satu patokan saja, karena itu coba satu-persatu sebagai pembanding. Semoga tips ini berguna dan menjadi bahan pertimbangan buat sobat dalam penggunaan css dan javascript di template sobat.

More about → Analisa Kecepatan Loading Blog

Membuat Efek Tulisan Dengan CSS Text Shadow

Kali ini saya akan coba membahas bagaimana cara membuat text shadow menggunakan CSS3. Dari namanya saja sudah bisa ditebak bahwa text yang dimaksud memiliki bayangan.

 

Sobat bisa membuat tulisan tampak timbul, tenggelam, 3D atau bersinar dengan mengatur besar kecilnya ukuran bayangannya. Semua browser support dengan text shadow ini, kecuali IE. Jadi sebaiknya cek dulu list browser yang support dibawah ini.

 

Safari 3.1 (Mac/Win)	yes, but no multiple shadows
Safari 4 (Mac/Win)	yes, full support
Opera 9.5 (Mac/Win/Lin)	yes, full support
Firefox 2/3 (Mac/Win/Lin)	no
Firefox 3.1/3.5 (Mac/Win/Lin)	yes, full support
Google Chrome 1 (Win)	no
Google Chrome 2 (Win)	yes, full support
IE 7/8 (Win)	no
Shiira (Mac)	yes, but no multiple shadows
Safari on iPhone	yes, but no multiple shadows
Opera Mini 4.1	yes, no blur radius

 

Jika sudah, mari kita lanjut ke tutorialnya. Perhatikan kode css dibawah ini :

color: #000;
background: #fff;
text-shadow: 1px 1px 1px #424242;

• color : #000 adalah warna dasar tulisan
• background: #fff adalah warna latar
• 1px 1px 1px #424242 untuk warna bayangannya (shadow)

 

Dibawah ini ada beberapa contoh model text shadow beserta kode css-nya, silahkan sobat kreasikan.

 

	color: #000; background: #fff; text-shadow: 2px 2px 3px #000;
	color: #000; background: #fff; text-shadow: 2px 2px #000;
	color: #000; background: #fff; text-shadow: 2px -2px 3px #000;
	color: #000; background: #666; text-shadow: 0px 1px 1px #fff;
	color: #666; background: #000; text-shadow: 0px 1px 0px #ccc;
	color: #fff; background: #666; text-shadow: 0px 1px 1px #000;
	color: #fff; background: #000; text-shadow: 1px 1px 6px #fff;
	color:#FFE9C7; background:#FF6C17;  text-shadow: 2px 2px 2px #A6250C;
	color:#823210; background:#FF6C17; text-shadow:1px 1px 1px #FF9924;
	color: #fff; background: #fff; text-shadow: 1px 1px 4px #000;
	color: #000; background: #000; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

 

Selamat berkreasi, semoga dengan adanya text shadow blog sobat jadi lebih hidup.

More about → Membuat Efek Tulisan Dengan CSS Text Shadow

Mempercantik Menu Dengan MyCSSMenu

Buat sobat yang ingin membuat menu dropdown horizontal atau menu vertikal, mycssmenu.com bisa menjadi alternatif utama. Selain mudah dalam penerapannya, mycssmenu juga mempunyai ragam pilihan yang cantik. Dari pilihan warna, model menu dari kotak persegi sampai model melengkung, serta animasi menarik yang menyertai menu ketika di klik.

 

Hanya dalam waktu kurang lebih 10 menit menu pun sudah siap di tempatkan  di blog. Jika sobat tidak menguasai bahasa pemrograman seperti kode HTML atau CSS yang ribet, jangan kecil hati karena menu yang tersedia di sini sangat mudah, hanya dengan klik �Customize Menu� sobat bisa mengaturnya sesuka hati.  

 

Jika sudah jadi, maka sobat tinggal meletakkan kode script-nya ke dalam template sobat, untuk meletakkan kode-kodenya, sobat bisa baca di postingan saya tentang menu dropdown.

 

Berikut ini contoh gambar dari menu dropdown yang saya buat di mycssmenu.com :

 

 

 

 

Mungkin sobat sudah sering menemukan situs online tools yang seperti ini, namun saya yakin tidak ada yang lebih bagus dari mycssmenu, pastikan sobat mencobanya.

 

Oke deh, selamat mencoba !

More about → Mempercantik Menu Dengan MyCSSMenu

Tips Mempercepat Loading Blog (Part II)

Pada tutorial sebelumnya, saya juga membahas tentang tips mempercepat loading blog dengan mengkompress kode css, namun hasilnya tidak terlalu jauh berbeda dengan sebelum di kompress.

 

Berbeda dengan yang akan saya jelaskan kali ini, saya akan coba memberikan tips mempercepat loading blog dengan cara menyimpan kode css di tempat hosting gratis.

 

Kecepatan loading yang dihasilkan lumayan cukup signifikan dengan sebelum kode css di simpan di hosting gratis. Caranya sangat mudah, namun sebelumnya sobat harus punya dulu hosting yang akan dijadikan tempat menyimpan kode css-nya. Tidak perlu bayar, yang gratisan banyak kok, sobat bisa coba di Google Code. Silahkan daftar dulu, sudah daftar? baiklah sekarang ikuti langkah-langkahnya berikut ini :

 

1. Login ke blogger.

    

2. Silahkan tuju Elemen Halaman.

    

3. Klik Edit Template.

    

4. Biasakan backup template dulu sebelum melakukan perubahan.

    

5. Lalu klik Expand Template Widget.

    

6. Perhatikan kode css milik sobat, saya akan berikan sedikit contoh :

    

   #header {
       width: 960px;
       height: 150px;
       color: #888888;
       background:#000;
       font-size: 14px;
       font-weight: normal;
       margin: 0px auto;
       padding: 0px;
       overflow: hidden;
       position: relative }
   

   #header p {
       padding: 0px 0px 5px 0px;
       margin: 0px;
       line-height: 20px }

   
   #header h1 {
       color: #FFFFFF;
       font-size: 35px;
       font-family: Times New Roman, Georgia, Trebuchet MS;
       font-weight: normal;
       margin: 0px;
       padding: 20px 0px 0px 0px;
       text-decoration: none }

   
   #header h1 a, #header h1 a:visited {
       color: #EEEEEE;
       font-size: 40px;
       font-family: Times New Roman, Georgia, Trebuchet MS;
       font-weight: normal;
       margin: 0px;
       padding: 20px 0px 0px 0px;
       text-decoration: none }

   
   #header h1 a:hover {
       color: #CCCCCC;
       text-decoration: none }

    

7. Sudah ketemu kan? nah sekarang buka notepad, lalu copy paste semua kode css milik sobat kedalam notepad.

    

8. Setelah itu simpan file tersebut dalam bentuk css, sebagai contoh sobat bisa simpan dengan nama style.css

    

9. Sekarang login ke hosting gratis yang sudah sobat daftarkan tadi, kemudian upload file style.css ke hosting tersebut.

    

10. Setelah upload berhasil, sobat akan mendapatkan kode url, contoh seperti punya saya :

     

    http://newalltutorial.googlecode.com/files/header.css

     

11. Kemudian ubah kode url tersebut menjadi seperti ini :

     

    <link href='http://newalltutorial.googlecode.com/files/header.css' rel='stylesheet' type='text/css'/>

     

12. Dan letakkan kode tersebut tepat setelah kode ]]></b:skin>

     

13. Sehingga hasilnya menjadi seperti berikut ini :

     

    ]]></b:skin>
    

    <link href='http://newalltutorial.googlecode.com/files/header.css' rel='stylesheet' type='text/css'/>

    </head> 
    

     

14. Jangan lupa Simpan Template.

 

Mudah kan, iya siapa bilang susah. Yang bilang susah berarti orang yang malas berpikir. Oke deh selamat mencoba !

More about → Tips Mempercepat Loading Blog (Part II)

Kompress CSS Percepat Loading Blog

Ada beberapa hal yang mempengaruhi loading suatu blog, selain pemakaian kode HTML dan Javascript yang berlebihan yang tentunya akan membuat loading blog jadi lambat, pengaturan atau pemakaian kode css yang salah juga berpengaruh terhadap loading blog.

 

Jika sobat banyak menggunakan kode HTML atau javascript dan diletakkan di sidebar sebelah kiri, itu akan membuat loading blog terasa sangat berat, kenapa ?

karena browser selalu membaca blog berurutan dari kiri atas sampai kiri bawah, kemudian akan berlanjut ke bagian kanan atas sampai kanan bawah, dan bagian footer atau bawah blog tentunya yang akan kebagian terbaca paling akhir.

 

Jadi saya sarankan gunakanlah template dengan kolom postingan yang terletak di sebelah kiri, atau jika sobat menggunakan sidebar di sebelah kiri, usahakan jangan terlalu banyak memakai kode HTML atau Javascript di sebelah kiri karena akan membuat loading blog jadi sangat berat.

 

Berlanjut pada topik utama kita, kompress kode css ini bisa kita lakukan secara manual maupun dengan menggunakan tools kompress css yang sekarang sudah banyak tersedia di internet. Saya akan berikan contoh kasusnya, perhatikan kode css berikut ini :

 

a:link {
color:#006699;  text-decoration:none;
}

a:visited {
color:#006699;  text-decoration:none;
}

a:hover {
color:#006699;  text-decoration:underline;
}

#main .post-body a:link {
color:#006699;  text-decoration:underline;
}

#main .post-body a:visited {
color:#006699;  text-decoration:underline;
}

#main .post-body a:hover {
color:#006699;  text-decoration:none;
}

kode css diatas adalah kode standard yang biasa sobat jumpai di HTML template, jika saya kompress secara manual maka hasilnya akan seperti dibawah ini :

 

a:link,a:visited,#main .post-body a:hover {
color:#006699;
text-decoration:none
}

a:hover,#main .post-body a:link,#main .post-body a:visited {
color:#006699;
text-decoration:underline
}

apa yang membedakan kedua bagian diatas ? jika sobat cermat melihat seluruh kode css yang paling atas (sebelum saya kompress) bahwa semua bagian dalam kurung {....} yang membedakan hanya dua bagian yaitu pada penulisan text-decoration:none dan text-decoration:underline. Pemakaian spasi juga sangat berpengaruh dalam penulisan css, jika saya rapatkan maka hasilnya menjadi seperti berikut ini :

 

a:link,a:visited,#main .post-body a:hover{color:#006699;text-decoration:none}
a:hover,#main .post-body a:link,#main .post-body a:visited{color:#006699;text-decoration:underline}

 

Untuk mengkompress kode css pada template, sobat tidak perlu susah payah mengkompress-nya secara manual, karena sekarang sudah banyak tools gratisan yang menyediakan fasilitas kompress css, salah satu yang biasa saya gunakan adalah  situs http://www.csscompressor.com

 

1. Untuk mengkompress css-nya silahkan kunjungi situs tersebut.

    

2. Kemudian pada halaman depan, ada pilihan jenis kompress dari yang low, standard, high sampai highest, kemudian masukkan kode css milik sobat kedalam kotak kosong yang tersedia lalu klik compress.

    

   

    

3. Maka akan terlihat hasil kompress dibawahnya, seperti pada gambar berikut

    

   

    

4. Kemudian klik Select All dan copy semua kode yang sudah di kompress tadi.

Ada banyak tools lainnya yang bisa sobat coba, sobat bisa cari di search engine..oke sob, selamat mengkompress ria, semoga dengan di kompress-nya kode css blog sobat akan menjadi lebih enteng..

More about → Kompress CSS Percepat Loading Blog