30 Cara Membuat Rounded Corners Pada Template Blogger

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Tutorial kali ini kita akan belajar membuat rounded corners pada template blogger, apa rounded corners? Rounded corners merupakan desain web atau blog baru yang sedang digemari saat ini karena kesannya yang menarik. Yang saya maksud rounded corners adalah membuat border atau garis lengkung pada web atau blog seperti contoh berikut:

image

Hanya saja tidak semua browser bisa membaca perintah ini, sebagai solusinya kita bisa menggantinya dengan image.

Nah cara membuat rounded courners: mudah saja kita cukup menambahkan kode berikut :

-moz-border-radius-topleft:10px;
-moz-border-radius-
topright:10px;

-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;

Yang berwarna biru dapat diedit sesuai dengan bagian border yang ingin kita buat melengkung dan besar pixel yang kita inginkan.

Contohnya kita ingin membuat border pada main (tempat menulis postingan) dan sidebar (tempat mengisi ragam widget) menjadi melengkung caranya:

  • Pada dasbor>>> Klik tata Letak>>> Edit HTML>>> cari kode seperti ini:

.sidebar .widget, .main .widget {
  background:#fff;
  margin:0 0 1.5em;
  padding:0.5em;
  border:1px solid #C94093;  }

  • Kemudian tambahkan kode berikut dibawah kode tadi:

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;

  • Sehingga kodenya jadi seperti ini:

.sidebar .widget, .main .widget {
  background:#fff;
  border:1px solid #C94093;
  margin:0 0 1.5em;
  padding:0.5em;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}

  • Simpan template

Lihat hasilnya pada blog sobat.

Kalau mau yang lebih menarik dan instant langsung aja ke spiffy corners dan spiffy box

image image

Semoga bermanfaat


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

30 komentar :

  1. dah lama tak singgah di blog Indahnya Berbagi ini, rupanya semakin indah saja blognya....
    tambah keren saja.. bahkan banyak tutorial lagi...
    makasih triknya sobt...

    BalasHapus
  2. Salam..trims banyak ukh atas tipsnya..maaf baru berkunjung. hiatus melanda!!hehe
    NB: makin ca'em aja nih templatenya :-)

    BalasHapus
  3. waduh waduh....makin keren aja. ternyata banyak sekali yang bisa diutak-atik ya?

    BalasHapus
  4. yang pasti biar gak bosan ngeblog...hehe...
    terus berbagi ilmunya ya mba...
    salam.

    BalasHapus
  5. thx's ya dah d post, ok deh aq akan coba utak atik

    BalasHapus
  6. Assalamu'alaikum.
    Padahal baru kemarin saya singgah di Blog ini, eh .... rasanya saya tertarik untuk kembali berkunjung. Emang Indah deh..apalagi artikel-artikelnya yang memang saya butuhkan.
    Berbagi ilmu itu memang sangat penting. Orang lain bertambah pengetahuannya apalagi penulisnya. Amin.
    Sykuron.

    BalasHapus
  7. @ All: Terimakasih apresiasinya...

    BalasHapus
  8. wah mantap ini, oh iya maaf kemarin gak bisa comment coz lagi lambreta...oh iya katanya rounded corner ini gak semua browser bisa baca klo boleh tau browser apa aja ya...?
    tengkyu...

    BalasHapus
  9. Yg g' bisa baca IE dan Opera

    BalasHapus
  10. hehehe, sorry lho mba' saya kirain blognya mba' yang "template-design-4u.blogspot.com" cuman contoh aja, jadinya di hapus, tapi udah saya pasang lagi kok, thank's ya udah mau berbagi templatenya, oya tukeran link yu' mba' saya dah folow google nya mba' thank's

    BalasHapus
  11. @ Suraduja: Terimakasih konfirmasinya, linknya dah dipasang

    BalasHapus
  12. thank's mba' , oya kapan2 bikin tutorial buat nampilin smiley emotion di komentar dong mba' tapi yang otomatis, misalnya kalo kita klik icon-nya langsung muncul di kotak komentar, kalo yang biasa kan bikin emotionnya manual, misal mau nampilin icon "Senyum" harus ketik ":)", kan capek hehhehee, oke deh sukses selalu buat mba'

    BalasHapus
  13. sama-sama, sukses terus jg tuk anda

    BalasHapus
  14. terimakasih apresiasinya

    BalasHapus
  15. sama-sama, thanks jg apresiasinya

    BalasHapus
  16. wah keren tutorialnya, cobain ah... btw thanks, membantu banget postnya buat nubie kaya saya

    BalasHapus
  17. mksh ni tips-y langsung d cb....!!! mampir donk ke blog chugygogog.blogspot.com

    BalasHapus
  18. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  19. Assalamu'alaikum. Wah nyesel saya, kenapa baru sekarang ketemu blog yang cantik ini, Trims atas segala ilmu yang telah di share. Kalau boleh saya mau menconteknya di blog saya.Wassalamu'alaikum adibaskom

    BalasHapus
  20. Alhamdulillah dapet pengetahuan baru lagi, makasih mbak infonya

    BalasHapus
  21. salam kenal...
    thanx buat tips-nya

    BalasHapus
  22. mau nanya, apa ada kode rounded corner untuk chrome ???

    BalasHapus
  23. @ Akhyar: Kode diatas justru terbaca atau tlh dapat diterjemahkan olh browser Google Chrome.

    Makasih kunjungan dan apresiasinya.

    BalasHapus
  24. masih bingung ngutak-ngatik nya...terus belajar d sini ah biar blog nya makin keren....hehe

    BalasHapus
  25. masih bingung di coba kok tak berhasil

    BalasHapus
  26. Alhamdulillah berhasil....jika boleh numpang kopas untuk koleksi.

    BalasHapus
  27. tipnya sangat bermanfaat, memang tiap blog mempunyai selera yang berbeda untuk tampilan blog supaya terlihat menarik, kalau sempat kunjungi blog saya di http://bloggerbondowoso24.blogspot.com/ and salam kenal

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!