Membuat Kotak Script Simple di Posting Blog

Banyak cara yang bisa dilakukan seorang blogger untuk optimasi pada blog, ambil salah satu contohnya dengan mempercantik tampilan posting blog. Halaman posting yang terlihat tertata, rapi, teratur, dan simple menjadi bagian yang perlu diperhatikan bloggers.

Meskipun isi sebuah artikel posting yang sangat menarik jika tidak memperhatikan tampilan publikasinya maka kemungkinan akan mengurangi minat baca pengunjung.

Sebaliknya walaupun artikel posting yang biasa - biasa saja jika dibuat dengan memperhatikan optimasi setidaknya pengunjung akan merasa fresh.

Agar postingan terlihatnya rapi dan teratur, salah satu contoh yang bisa dilakukan yaitu membuat kotak script/ box code yang digunakan sebagai text area untuk membedakan antara code script dengan teks artikel yang lain.

Berikut di bawah ini tentang cara mudah untuk menambahkan kotak script simple pada posting blog.

- Buka bagian tab HTML entri post
- Copy script box code yang tersedia di bawah sesuai versi kotak script
- Paste script box code diantara bagian yang diinginkan di tab HTML
- Buka kembali bagian tab Compose

ADA 5 VERSI KOTAK SCRIPT / BOX CODE

1. Box Code Border Left Solid
<div style="background-color: #f3f3f3; border-left: 5px solid #2288dd; padding: 10px; t-align: left;"> Tambahkan Script disini...</div>

2. Box Code Border Solid
<div style="background-color: #f3f3f3; border: 4px solid #999; padding: 10px; t-align: left;"> Tambahkan Script disini...</div>

3. Box Code Border Dashed
<div style="background-color: #ffe599; border: 2px dashed #aaa; padding: 10px; t-align: left;"> Tambahkan Script disini...</div>

4. Box Code Border Double
<div style="background-color: #6fa8dc; border: 4px double #fff; padding: 10px; t-align: left;"> Tambahkan Script disini...</div>

5. Box Code Border Outset
<div style="background-color: #a2c4c9; border: 4px outset #fff; padding: 10px; t-align: left;"> Tambahkan Script disini...</div>

Kreasikan dengan :
- Mengganti warna kotak  > backgroud-color: #kodewarna
- Merubah warna border > border: #kodewarna
- Mengatur ketebalan border > border: 4px

Sekian tips dari contekanbagus.blogspot.com semoga bermanfaat dan tinggalkan komentar untuk posting ini.
First

17 komentar

Write komentar
2/10/2016 delete

siap dipraktekkan

Reply
avatar
4/11/2016 delete

hallo sob apa kabar nih ? kalo ada watu mampir ya sob

Reply
avatar
4/19/2016 delete

boleh nie info nya di coba, makasih gan

Reply
avatar
Unknown
AUTHOR
7/01/2016 delete

Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.

Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

Reply
avatar
8/09/2016 delete

terimakasih gan, heheh

Reply
avatar
8/12/2016 delete

mantap gan,,tks

Reply
avatar
mukena
AUTHOR
8/22/2016 delete

siiip...ok banget...terimakasih..

Reply
avatar
9/17/2016 delete

tampilanya simple nih

Reply
avatar
10/24/2017 delete

siiip...ok banget...terimakasih..

Reply
avatar
11/26/2017 delete

MAkasih BAnget tutorialnys..

Reply
avatar