Cara Menciptakan Kotak Scroll Pada Postingan Blog Dengan 11 Macam Bentuk Dan Banyak Pilihan Warna
Assalamu’alaikum..
Meletakkan script pada posting artikel memanglah tak dapat di pungkiri oleh seorang blogger, apalagi blog yang bercerita wacana tutorial yang penuh dengan script. Tidak ada salahnya kalau meletakkan script dalam postingan diletakkan didalam kotak script scroll supaya lebih menarik.
Kotak script dengan scroll ini juga mempunyai kegunaan untuk menghemat daerah dikala teman ingin meletakkan script yang panjang dalam postingan supaya posting teman tidak terlalu panjang hanya cuma untuk script saja.
Beberapa waktu kemudian pun aku pernah Berbagi Pengetahuan wacana menciptakan Kotak Script pada postingan dengan Scroll ini, namun dikala itu kotak script scroll tersebut hanya simple, ialah hanya ber-background putih.
Nah kini aku ingin menyebarkan pengetahuan Membuat Kotak Scroll Pada Postingan dengan 11 Macam Bentuk Dan Banyak Pilihan Warna, ingin tau ? yuks simak :
1. Login ke blogger sobat. Disini
2. Pada Dashboard blog sobat, klik “New Entry/Posting Baru (yang bergambar pensil)” – pilih mode HTML (sebelah mode compose)
3. Pilih sesuai selera teman script dibawah - lalu Copy Paste script dibawah pada mode HTML.
<div style="background-color: #ffa66f; border: 2px #6e2222 dashed; text-align: left; height: 30px; overflow: auto; padding: 10px; width: auto;">Letakkan Kode Script Sobat Disini</div>
<div style="background-color: #ffc7c7; border: 2px #6E2222 dotted; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>
<div style="background-color: #82cafa; border: 3px #6E2222 double; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>
<div style="background-color: #6eb76a; border: 2px #6E2222 inset; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>
<div style="background-color: #c2c2c2; border: 2px #6E2222 ridge; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>
<div style="background-color: #d9da81; border: 2px #6E2222 solid; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</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; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</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; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</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; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</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; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>
NB : silahkan teman dapat ganti pada :
* background-color:#... (untuk mengganti latar kotaknya)
* text-align: … (untuk mengatur letak tulisannya)
* height: …px (untuk mengatur tinggi kotak, kalau tidak ingin menggunakan scroll, hapus saja isyarat ini)
* span style="color: …;" (untuk warna tulisan)
* solid #... (untuk warna batas kotaknya)
* Ganti “Letakkan Script Sobat Disini” dengan script-nya.
Seperti gambar dibawah :
4. Silahkan teman kreasikan sendiri yaa.. Selamat mencoba ^^
Bagaimana gampang kan sob ? mungkin itu saja menyebarkan pengetahuan wacana Cara Membuat Kotak Scroll Pada Postingan dengan 11 Macam Bentuk Dan Banyak Pilihan Warna. Mohon Maaf apabila ada kata yang salah dan kurang berkenan. Terima kasih.. ^^
Wassalamu’alaikum…
Baca Juga : Cara Membuat Kotak Script Keren dengan Adanya Judul Di Atas Kotaknya Pada Postingan Blog
Baca Juga : Cara Membuat Kotak Script Keren dengan Adanya Judul Di Atas Kotaknya Pada Postingan Blog
