4 Sexy Efek untuk Border Post Blogger

Membahas hal yang paling saya suka lagi nih "desain"! Kali ini saya hendak mencuap-cuap tentang border posting di blogger, secara default desain border post di blogger terasa begitu membosankan dan tidak hidup, right? Nah kalau sudah tau begitu ya jangan diam saja toh, mari coba kita edit-edit biar lebih atraktif dan lebih WOW. Tidak sulit, cuma sedikit memainkan CSS saja, nah di artikel ini saya akan bahas tentang 4 efek yang apik, ada shadow effect, leaf effect, neon effect dan rounded corners effect. Dan untuk kombinasinya ya Anda coba kreasi sendiri, gunakan ide-ide liar Anda, makin liar makin kreatif maka makin baik.

Step by Step

1. Dari blogger Dashboard masuk ke opsi Template.
2. Pilh Edit HTML.
3. Carilah kode ]]></b:skin> .
4. Paste kan kode efek yang Anda pilih tepat sebelum kode ]]></b:skin> !
5. Simpan Perubahan dan nikmati efek baru di blog Anda :D

Efek Pertama: Shadow Effect

Efeknya memberikan secercah bayangan remang-remang di sekitar border post.

Kode:

.post {
box-shadow:1px 1px 4px #dcdcdc;
-moz-box-shadow:1px 1px 4px #dcdcdc;
-webkit-box-shadow:1px 1px 4px #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px #dcdcdc;
}

Efek Kedua: Leaf Effect

Efek ini akan memberikan efek border berbentuk daun.

Kode:

.post {
border:1px solid #dcdcdc;
border-top-right-radius:50px;
-moz-border-radius-topright:50px;
-webkit-border-top-right-radius:50px;
border-bottom-left-radius:50px;
-moz-border-radius-bottomleft:50px;
-webkit-border-bottom-left-radius:50px;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:15px;
}

Efek Ketiga: Rounded Corners Effect

Dengan efek ini akan mengkorversi sudut normal blogger yang kaku menjadi sudut rounded yang indah.

Kode:

.post {
border:1px solid #dcdcdc;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
}

Efek Keempat: Neon Effect

Efek neon memberikan border berwarna dengan pilihan warna yang bisa Anda sesuaikan sendiri.

Kode:

.post {
box-shadow:1px 1px 4px #7fbf4d;
-moz-box-shadow:1px 1px 4px #7fbf4d;
-webkit-box-shadow:1px 1px 4px #7fbf4d;
-goog-ms-box-shadow:1px 1px 4px #7fbf4d;
}

Anda bisa mengganti kode berwarna biru untuk mendapatkan warna yang lebih sesuai jika semisal ANda tidak puas dengan warna yang saya sediakan :D