Buat box teks di ruang posting

Box teks di ruang posting bisa dipergunakan untuk tempat meletakkan teks yang bersifat khusus sehingga terpisah dari teks lainnya. Ada berbagai style box yang bisa disesuaikan dengan seberapa besar box yang ingin digunakan. Pada beberapa posting dengan teks yang sangat panjang, box yang dilengkapi dengan scroller juga sangat bermanfaat untuk effisiensi ruang. Agar box kelihatan lebih menarik, box bisa dilengkapi dengan border style, background dan border radius serta beberapa properi css yang lain.

1. Box sederhana :

Tinggi box akan bertambah sejalan dengan bertambahnya isi/content.

Shannen 'Mitra Baraya Online----Mampukah setiap tahun bertambah baik?----Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama

xHTML :

<div style="padding:10px;border:2px solid #eee;width:300px;margin:15px auto;">Shannen 'Mitra Baraya Online----Mampukah setiap tahun bertambah baik?----Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!
</div>

2. Box dengan background dan color :

Shannen 'Mitra Baraya Online----Mampukah setiap tahun bertambah baik?----Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!

xHTML :

<div style="padding:10px;border:2px solid #eee;width:400px;margin:15px 0;background:#999;color:#000;">Shannen 'Mitra Baraya Online----Mampukah setiap tahun bertambah baik?----Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!
</div>

3. Box dengan border lengkung :

Shannen 'Mitra Baraya Online----Mampukah setiap tahun bertambah baik?----Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!

xHTML :

<div style="padding:10px;border:3px double #eee;width:400px;margin:15px 0;background:#999;color:#000;border-radius:10px;">Shannen 'Mitra Baraya Online----Mampukah setiap tahun bertambah baik?----Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!
</div>

4. Box dengan overflow (Scrollbox):

Box akan mempunyai ketinggian tertentu sekalipun konten didalamya hanya sedikit. Jika konten melebihi daya tampung maka overflow akan bekerja.

Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!

xHTML :

<div style="padding:10px;border:3px double #eee;width:350px;margin:15px auto;background:#999;color:#000;height:100px;overflow:auto;">Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!
</div>

Shannen 'Mitra Baraya Online----Mampukah setiap tahun bertambah baik?----Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!

Shannen 'Mitra Baraya Online----Mampukah setiap tahun bertambah baik?----Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!

xHTML :

<div style="padding:10px;border:3px double #eee;width:350px;margin:15px auto;background:#999;color:#000;height:100px;overflow:auto;">Shannen 'Mitra Baraya Online----Mampukah setiap tahun bertambah baik?----Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!

Shannen 'Mitra Baraya Online----Mampukah setiap tahun bertambah baik?----Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!
</div>

4. Box dengan auto max-height :

Tinggi box flexible sehingga ketika isi dalamnya sedikit maka box bertambah pendek. Overflow hanya akan terlihat setelah kontent melebihi daya tampung box.

Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!

xHTML :

<div style="padding:10px;border:3px double #eee;width:350px;margin:15px auto;background:#999;color:#000;max-height:200px;overflow:auto;">Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!
</div>

Shannen 'Mitra Baraya Online----Mampukah setiap tahun bertambah baik?----Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!

Shannen 'Mitra Baraya Online----Mampukah setiap tahun bertambah baik?----Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!

xHTML :

<div style="padding:10px;border:3px double #eee;width:350px;margin:15px auto;background:#999;color:#000;max-height:200px;overflow:auto;">Shannen 'Mitra Baraya Online----Mampukah setiap tahun bertambah baik?----Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!

Shannen 'Mitra Baraya Online----Mampukah setiap tahun bertambah baik?----Sebuah tantangan bagi siapapun. Jadikan Hari ini sebagai moment yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama!!!!
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Jemuah LEGI, Maret, 23, 2012

» Happy Blogging - mitrabaraya «