Cara membuat sudut melengkung pada blog

Bagi para blogger newbie mania yang terus berusaha ingin belajar sesuatu dan selalu penasaran untuk mempercantik tampilan blog atau websitenya pasti akan melakukan 'blogwalking' alias jalan-jalan menelusuri situsnya mbah google. 

Sering dimana kalanya ingin menerapkan sesuatu kita menemui kendala berupa tutorial yang tidak memberikan pelajaran yang benar seperti yang kita harapkan (atau tutorialnya terlalu rumit/njelimet/susah dicerna bagi para blogger newbie seperti saya).

Tak jarang saya harus menghabiskan berjam-jam untuk mendapat tutorial yang tepat. berpuluh-puluh blog atau site telah kita buka atau kita datangi tetapi hasilnya ndak ada....huff.

Tips bagi blogger newbie mania, jangan cepat menyerah...teruskan 'blogwalking', hanya saja jangan terlalu percaya dengan blog yang berada di halaman satu hasil pencarian google (karena tutorialnya belum tentu cocok buat kita). Jika ingin mencari  situs gunakan kata kunci yang bervariasi, jangan hanya dengan satu kunci saja :

misalkan blogger mania ingin mencari : 'Cara membuat sudut melengkung pada blog'.

Jika belum didapat tutorial yang tepat gantilah kata kuncinya menjadi : 'Cara membuat sudut melengkung pada header', atau 'Cara membuat sudut melengkung' atau 'Tutorial sudut melengkung pada header'...atau apa saja agar hasil pencarian pada google berubah dan kita bisa mengharapkan tutorial yang benar. (semua mungkin benar...hanya saja ilmu kita belum sampe ke materi yang diuraikan oleh para suhu tutorial tersebut.)

Baiklah blogger mania, dibawah ini adalah hasil pencarian saya yang melelahkan melalui google.co.id, tetapi hasilnya sangat memuaskan, benar-benar maknyus....

kata kunci:
'Cara membuat sudut melengkung pada header blog' 

#header{  
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
border-radius: 15px; /*Kode pembuat lengkungan sudut*/
}

Keterangan :
#header = lokasi yang ingin kita buat melengkung
width 600px = lebar kotak lengkungan, bisa disesuaikan nanti lebarnya menurut kebutuhan.
background #DDD = warna background kotak, bisa diganti kode warnanya misal #fff, #aaa.
color: #222 = warna tulisan judul blog, bisa dirubah juga menurut selera.
border:2px solid blue = warna border/garis lengkungan dengan ketebalan 2pixels(tipis), bisa dipertebal.
padding: 10px = lapisan/garis border, boleh dihilangkan.
border-radius: 15px = besar lengkungan. semakin besar pixel maka semakin besar lengkungannya.

'Kode pembuat lengkungan sudut'
- border-top-left-radius: 15px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

Sekarang ikutilah langkah-langkahnya sebagai berikut :
1. Copy kode dibawah ini :

#header {
    width:1140;
    background: #faa;
    color: #222;
    border: 20px solid red;
    padding: 0px;
    border-radius: 20px; /- border-top-left-radius: 20px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 0px;
- border-bottom-left-radius: 0px;/
    }

2. pergi ke dashboard
3. Klik Template
4. Klik Customize
5. Klik Advanced
6. Klik Add CSS
7. Paste Kode CSS pada langkah no.1 tadi, didalam kotak Add custom CSS
8. lihat hasil perubahan di preview bagian bawah layar
9. Ubah sesuaikan menurut kebutuhan blog
10. apabila sudah sesuai Klik Apply to blog.
11. Klik Back to blogger.
12. Selesai.

sebelum diberi garis lengkungan

 

sesudah diberi lengkungan

Selamat mencoba. Keep Blogging n have a nice day....

Tutorial diberikan oleh : http://realfa84.blogspot.com/2012/01/cara-membuat-sudut-melengkung-dengan.html