Membuat garis lengkung pada sudut border

Para bloggers mungkin tidak asing lagi dengan namanya border, mungkin disetiap blog kita bisa menemukan adanya pemberian border. Namun selama pantauan saya dalam mengamati perkembangan blog-blog yang ada, saya jarang sekali menemukan adanya blog menggunakan garis lengkung pada sudut border. Saya tidak tahu apakah mereka sebelumnya sudah tahu bagaimana cara membuat garis lengkung border atau mereka sama sekali tidak tahu membuatnya? Nah,... jika kebetulan Anda belum bisa membuat garis lengkung ini, Anda dapat mengikuti tutorialnya dibawah ini.

Tetapi sebelumnya saya memberikan tutorialnya ada perlunya Anda juga harus membaca macam-macam border yang dimana akan Anda perlukan nantinya.

Tutorialnya sangat gampang sekali, jika Anda memperhatikannya.

1. Login ke www.blogger.com
2. Pilih Dashboard -> Tata letak -> Edit HTML
3. Sebagai contoh, saya akan menggunakan border dari posting. Anda cari kode yang mirip dengan ini :

.post {
margin:0px 0px 15px 0px;
padding:10px;
background: #FFFFFF;
border:1px solid #cccccc;
}

4. Ingat kode yang Anda cari tidak lah harus sama dengan diatas karena templates setiap orang berbeda-beda. Yang terpenting cari bagian .post {
5. Jika sudah ketemu Anda tambahkan kode dibawah ini tepat dibawah border:1px solid #cccccc;

Kode:
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;

sehingga menjadi:
.post {
margin:0px 0px 15px 0px;
padding:10px;
background: #FFFFFF;
border:1px solid #cccccc;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}

Ket:
-moz-border-radius-bottomleft:5px; = membuat lengkung bagian kiri-bawah
-moz-border-radius-bottomright:5px; = membuat lengkung bagian kanan-bawah
-moz-border-radius-topleft:5px; = membuat lengkung bagian kiri-atas
-moz-border-radius-topright:5px; = membuat lengkung bagian kanan-atas

6. Jika sudah klik tombon Simpan -> Lihat blog

Mulai sekarang Anda sudah tahu kan bagaimana membuatnya....

Semoga dari tutorial ini, Anda akan lebih semangat lagi dalam mengedit blog Anda sendiri karena kebanyakan orang membuat blog tinggal CP (copy-paste) template seseorang.

Ok lah begitu,... sekian dari tutorial saya ini. Jangan lupa komentarnya y....

NB : Jika Anda puas dengan tutorial diatas Anda dapat mengekspresikannya dengan memilih salah satu dari text link dibawah ini.


6 komentar:

Ali Ma'ruf mengatakan...

makasih atas tutorialnya,..salam kenal :)

AinSarange mengatakan...

ok sama2... jika ada kekurangan mohon maaf...

Anonim mengatakan...

http://www.feryfadly.com/2009/12/100-dari-facebook-dan-paypal-mau.html

gotriogo mengatakan...

keren gan. akhirnya ketemu juga di sini. langsung ke TKP. thanks :c:

Rudy Hartono mengatakan...

postingan yang menarik pengunjung blog, salam kenal sob

Blogger Addict mengatakan...

Wah.. info menarik nih.
Segera saya coba gan di blog sy yg berplatform blogspot.
Wansmor, TQ gan.

Posting Komentar

no spam ...!!! no porn ...!!! if you want to show the expression of emotion please type the code above is located right next to emotion ....??? thank's ^ ^
-------------------------------------------------------
-------------------------------------------------------
no spam...!!! no porn...!!! kalau Anda ingin menunjukkan ekspresi silakan ketik kode emotion diatas yang barada disamping kanan emotion....??? thank's ^ ^