Garis Melengkung Pada Kolom

Seperti janji saya pada pembahasan sebelumnya tentang membuat kotak postingan terpisah dan kebetulan ada pertanyaan dari salah seorang sobat yang bernama sadulur yang berkomentar pada tgl 19 mei lalu, isinya kira-kira seperti ini "makasih berbagi ilmu, ...kawan, tapi bagaimana cara membuat postingan garis melengkung pada sudut kolom agar tidak terlihat kaku". Thanks buat mas sadulur yang telah menanyakan hal ini.

Perhatikan kolom postingan blog milik saya, tampak kolom postingan terpisah-pisah dan membentuk garis lengkung pada sudut-sudutnya, bagus kan..
Tertarik dengan pembahasan ini ?? sipp..mari kita lanjutkan

  1. Login ke Blogger dengan ID blogger sobat tentunya.

  2. Klik Tata Letak

  3. Klik Edit HTML

  4. Cari kode h2.date-header {

  5. Copy kode berikut tepat setelah kode diatas


    border-left:3px solid #0080FF;
    border-right:3px solid #0080FF;
    border-top:3px solid #0080FF;
    border-bottom:0px solid #0080FF;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;


  6. Cari kode .post-body {

  7. Kemudian copy dan letakkan kode berikut ini setelah kode tersebut.


    border-right:3px solid #0080FF;
    border-left:3px solid #0080FF;


  8. lalu cari kode .post-footer { dan letakkan kode berikut dibawah kode tersebut.


    border-left:3px solid #0080FF;
    border-right:3px solid #0080FF;
    border-top:0px solid #0080FF;
    border-bottom:3px solid #0080FF;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;


  9. Oke, sudah selesai..Simpan Template sobat.

Untuk kode yang saya tandai dengan warna merah adalah kode untuk warna border, sobat bisa menggantinya sesuai dengan keinginan sobat. Untuk kode warna-warna, sobat bisa melihatnya disini. Selamat mencoba !

Berlangganan artikel terbaru via Email
Artikel Lainnya :

8 comments

28 Juni 2009 12.30

Thank om sob. nuhun pisan. garis lengkung pada posting ane sukses, tapi semua kode ditempatkan setelah .home-post { bukan setelah .post-body {template ane g ada .post-body{). terus kode2 yang diletakan setelah h2.date-header n .post-footer tidak bisa om. kenapa ya....?

terus ane heran om. walaupun sukses tapi ketika di read more kotak melngkungnya ilang... kenape ye... tolong ommmm. nuhun.

28 Juni 2009 19.29

emang setiap template beda2 mas, sy jg g bs neranging klo g praktek lgsung..cb masnya lihat postingan sy yng kolom sidebar terpisah..mgkn solusinya distu..thanks dah mampir

30 Juni 2009 00.13

JT...lengkungin ajah pake tang :p, klo nggak gegef ;))...hehehehe :D
pisss ahhhh...:)
Kodenya kale beda bahasa doang, klo nggak dikonci pake sebuah ID tuhhh..kalee itu juga :) :|

30 Juni 2009 18.01

berhasiL trik yg ini OM Dod ;))

18 Agustus 2009 23.47

kebetulan saya lagi cari tips ini. Makasih buanyak infonya.

31 Maret 2010 20.36

Keren mas tips2 sangat berguna... trims...

mangstab nih, keren banget dipake ke blog ane :D

7 Januari 2012 21.49

waaahhhh makasih infonya gan... mau nanya nihhh cara bikin kayak gini : Browse » Home » Kolom » Post Tips » Tutorial Blogspot » Garis Melengkung Pada Kolom ... do atas postingan kayak mana gan?

Poskan Komentar

Reader Community

Recent Comments