Seperti yang pernah saya singgung pada artikel sebelumnya, tampilan yang menarik juga menjadi salah satu hal penting yang mesti diperhatikan dalam setiap pengelolaan blog. Pengunjung tentunya juga lebih menyukai tampilan blog yang cantik dan rapi ketimbang tampilan standar, kaku atau monoton. Karena tampilan sedap dipandang, maka pengunjung pun bisa jadi semakin betah untuk berlama-lama singgah di blog kita.
Sebelumnya, kita telah belajar tentang cara membuat efek bayangan (shadow) pada gambar dan postingan blog. Nah, pada kesempatan kali ini, kita akan kembali belajar mengutak-atik lagi template blog menggunakan kode CSS untuk membuat tampilan blog lebih menarik lagi, yaitu dengan menambahkan bingkai sudut melengkung pada gambar dan halaman postingan blog.
Pemakaian bingkai (border) memang sudah biasa dijumpai di beberapa elemen blog, namun biasanya tampilannya standar (bentuk kotak) atau kebanyakan tidak ada bingkainya. Agar lebih menarik dan luwes, ternyata kita bisa membuat atau menambahkan bingkai dengan sudut melengkung di masing-masing pojoknya. Tanpa berlama-lama, langsung saja silahkan ikuti langkah-langkah di bawah ini untuk membuatnya.
Cara Membuat Bingkai Pojok Melengkung di Blog
1. Buka akun blogger anda.
2. Pilih menu thema kemudian klik edit html.
3. Silahkan gunakan kode singkat berikut ini untuk membuat bingkai melengkungnya:
... border-radius:10px
Jika ingin menambahkan bingkai tersebut pada halaman postingan, cari kode CSS postingan di template blog anda.
Kalau sudah ketemu, sisipkan kode di atas ke dalamnya sehingga menjadi seperti berikut ini:
.post {background:#fff; position:relative;font-size:13px;margin:0;padding:0; border-radius: 10px}
Pastikan warna background postingan dan tema luar blog (outer wrapper atau semacamnya) berbeda agar kelihatan hasilnya. Kalau sama silahkan ubah dulu menggunakan warna yang berbeda.
Jika ingin menambahkan juga bingkai melengkung pada gambar di postingan, maka cari kode CSS gambar postingan di blog anda. Kalau sudah ketemu, sisipkan juga kode pembuat bingkainya seperti di atas. Kalau digabungkan, maka hasilnya menjadi seperti berikut ini:
.post {background:#fff; position:relative;font-size:13px;margin:0;padding:0; border-radius: 10px}
.post img {display:block;width:100%;height:auto;border-radius:10px}
10 px adalah ukuran kemelengkungan pojoknya, anda bisa mengubahnya sesuai selera.
4. Simpan kembali template dan lihat hasilnya.
 |
| Contoh hasilnya |
Oh ya, kalau anda ingin membuat tampilan yang berbeda, misal ingin agar masing-masing sudutnya memiliki nilai yang berbeda seperti bentuk ketupat, anda bisa modifikasi lagi CSS pembuat bingkainya menjadi seperti berikut ini:
... border-radius: 0px 20px 0px 20px
Setelah diterapkan seperti langkah di atas, maka hasil tampilannya akan menjadi seperti berikut ini:
Keempat nilai di atas (0 20 0 20) adalah ukuran untuk mengatur kemelengkungan masing-masing sudut yaitu kiri atas, kanan atas, kanan bawah, dan kiri bawah. Anda bisa menggantinya sesuai selera.
Satu lagi, kalau anda ingin agar bingkainya memiliki warna, lagi-lagi anda bisa modifikasi lagi CSS pembuat bingkainya menjadi seperti berikut ini:
... border: 2px solid #964b00; border-radius: 10px
Penggunaan warna pada border ini juga bisa menjadi alternatif jika anda tidak ingin mengubah background warna pada postingan atau tema luar blog. Silahkan anda bisa atur lagi ukuran atau warnanya sesuai selera. Untuk penerapan ini, maka hasilnya akan seperti berikut ini:
Hasilnya jadi keren bukan!. Silahkan anda bisa memilih bentuk seperti apa yang hendak anda terapkan di blog anda. Tentunya anda juga bisa berkreasi sendiri untuk hasil tampilan yang diinginkan. Semoga bermanfaat.