Css 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/webdengan 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 !

Sumber : http://adf.ly/dPC1N

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.

Sumber : http://adf.ly/dPBuV

modifikasi 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/AVvXsEjqLXESklZmtRaTUBvdiahfjnG3otxc1-_7DMbM_5xpBdlIX402zLN3fMqciCA5mMZPYpruYHKsPSXDWMEjQbw6F8-ECWaC_fdnxpD3izGAEGaEZ8TqMg6y6pL-jYDo8ThXk4t23ge1JkY/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.

Sumber : http://adf.ly/dPBom

Membuat Garis lengkung Blog

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 csssidebar blog sobat.

Sumber : http://adf.ly/dPBgn