2010-05-10

Membuat Rounded Corner Pada Footer Dengan Menggunakan Kode CSS

Sekedar arsip. Cara membuat rounded corner pada footer dengan css, apa itu rouded corner? itu loh yang sudutnya melengkung. Rounded corner dengan menggunakan kode css ini ringan, cocok buat semua browser, tanpa image atau gambar yang bikin loading blog lambat, cara memasangnya juga mudah. Tips ini sudah pernah dibahas namun saya tidak bisa cari lagi sumber aslinya dimana klu ga salah saya dapat dari sebuat blog bule keren, maaf ya gan  terpaksa saya arsipkan diblog saya ini, maaf ya tutornya saya kopas, saya bikin tips keren ini untuk mempermudah gonta-ganti template saya sendiri ...contohnya ada pada footer template saya ini, langsung saja kita masuk pada topik dari pada lama-lama apalagi nyinggung masalah gayus jadi-jadian yang kemaren, he.

Silahkan di kopas kode berikut bawah ini dan letakkan di atas kode ]]></b:skin> :

.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#cccccc; margin:0 5px;}
.b2f {height:1px; background:#cccccc; margin:0 3px;}
.b3f {height:1px; background:#cccccc; margin:0 2px;}
.b4f {height:2px; background:#cccccc; margin:0 1px;}
.contentf {background:#cccccc;}
.contentf div {margin: 0px;}

(Catatan : warna background pd tulisan warna biru di atas bisa sobat ganti sesuai warna template masing-masing.)


nah jika sudah selesai silahkan cari kode berikut (ga perlu centang ;

 <div id='footer-wrapper'>
      <b:section class='footer' id='footer'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>
    </div>

Jika sudah ketemu silahkan kopas kode di bawah ini dan paste pada tulisan yang berwarna biru di atas :

<b class='b1f'/><b class='b2f'/><b class='b3f'/><b class='b4f'/>
    <div class='contentf'>
        <div>
      <b:section class='footer' id='footer'>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>
</b:section></div>
    </div>
<b class='b4f'/><b class='b3f'/><b class='b2f'/><b class='b1f'/>

Jadi kodenya kalau sudah jadi seperti di bawah ini :

<div id='footer-wrapper'>
<b class='b1f'/><b class='b2f'/><b class='b3f'/><b class='b4f'/>
    <div class='contentf'>
        <div>
      <b:section class='footer' id='footer'>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>
</b:section></div>
    </div>
<b class='b4f'/><b class='b3f'/><b class='b2f'/><b class='b1f'/>
    </div>

Simpan template sobat dulu.

Jika tulisan pada footer rounded corner terlalu ke bawah, silahkan cari kode ini pada template kira2 begini :

/* Footer
----------------------------------------------- */
#footer {
  width:700px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:capitalize;
  letter-spacing:.0em;
  text-align: center;
}

Pada huruf cetak tebal dan warna merah 15px di ubah jadi 5px saja

Jangan lupa disimpan, selesai.

3 comments:

  1. matap bro...
    kirain blog ini udah nggak update lagi, ternyata makin keren aja...

    ReplyDelete
  2. asiiikkk....ternyata masih tetap menelurkan tips2 praktis ya mas....ntar tak cobain di blog percobaanku deh....tengkyu...

    ReplyDelete
  3. rizal & nDaN Srex@
    Thanks sudah ngomen dan berkunjung di sini...disini tetap update, cuma lg cari bahan buat blog baru, hehehe...keep blogging. :D

    ReplyDelete

 
© 2012 Planet Jingga. Natuna Network Natuna | Abrizal.