Cara Membuat Box Pada Postingan Blog

Adakalanya dalam sebuah blog membutuhkan pemanis post konten seperti box yang bertujuan untuk penekanan pada suatu kalimat atau paragraf, saya pun menggunakan walau memang tidak begitu sering juga

Saya akan berbagi sedikit mengenai code snipet yang bisa digunakan dalam blogger, kalo menggunakan wordpress mungkin akan lebih mudah, karena wordress sudah menyediakan base script bawaan templatesnya. Sedangkan untuk blogger memang mengandalkan html knowledge si pemiliki blognya. Gampangnya sih memang tinggal copy paste aja

Daripada penasaran, berikut kode snipet yang bisa sobat gunakan di dalam blogger :

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Pastekan Code Script Di Sini </div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">
Pastekan Code Script Di Sini </div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;"> 
Pastekan Code Script Di Sini </div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">
Pastekan Code Script Di Sini </div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">
Pastekan Code Script Di Sini </div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;"> 
Pastekan Code Script Di Sini </div>

<div style="background-color: #36e4fd; border: 2px #610b38 dashed; padding: 10px;">
Pastekan Code Script Di Sini </div>

<div style="background-color: #c2c2c2; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;"> Pastekan Code Script Di Sini </div>

<div style="background-color: #82cafa; border: 3px #5f200e double; padding: 10px; text-align: left;"> Pastekan Code Script Di Sini </div>

<div style="background-color: #d5839f; border: 2px #006400 inset; padding: 10px; text-align: left;"> Pastekan Code Script Di Sini </div>

<div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: #00b8ff; border-radius: 10px; border: 7px outset #fff; padding: 10px; t-align: left;">
Pastekan Code Script Di Sini </div>

Jika hasil scrip diatas ingin dikreasikan juga bisa, misalkan sebagai berikut

• Mengganti ukuran sudut lengkungan contohnya: border-radius: 10px ada 3 ganti semua
• Mengganti warna background contohnya : background-color: #00B8FF ( Kode Warna )
• Merubah ketebalan border / garis tepi kolom contohnya : border: 4px