Di dalam menulis sebuah artikel ihwal tutorial blogger, biasanya penulis membagikan sebuah script aba-aba HTML atau Javascript. Namun untuk menuliskan kode-kode script itu tidak sanggup asal tulis saja tapi perlu perhatian khusus dalam penulisannya biar aba-aba yang telah dibagikan tidak terjadi error nantinya pada dikala digunakan.
Untuk mengatasi persoalan di atas dan untuk memudahkan penulisan kode-kode script HTML atau Javascript di dalam postingan blog, biasanya seorang blogger perlu menciptakan sebuah kotak aba-aba khusus untuk script HTML atau Javasript.
Dengan memakai kotak aba-aba khusus script HTML atau Javascript tersebut penulisan aba-aba akan terlihat lebih rapih, lezat di lihat dan gampang dibaca. Lantas bagaimana cara membuatnya ? Cukup gampang koq, silahkan anda lanjutkan membaca artikel dibawah ini.
Cara Membuat Kotak Kode HTML dalam Postingan Blog
1. Login ke Blogger2. Buat Entri Baru
3. Pilih mode HTML
4. Masukkan aba-aba di bawah ini
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kode Script Anda Di Sini
</div>
Kode Script Anda Di Sini
</div>
5. Klik mode Compose, untuk melihat hasilnya.
Maka balasannya ibarat di bawah ini :
Kode Script Anda Di Sini
.Untuk style-style lainnya dari kotak aba-aba Script HTML/Javascript anda sanggup gunakan kode-kode di bawah ini.
Style 1
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
Masukkan Kode Script HTML/Javascript anda disini
</div>
text-align: left;">
Masukkan Kode Script HTML/Javascript anda disini
</div>
Style 2
<div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;">
Masukan aba-aba script HTML/Javascript atau goresan pena anda disini
</div>
Masukan aba-aba script HTML/Javascript atau goresan pena anda disini
</div>
Style 3
<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; overflow: auto; height: 50px; width: auto; text-align: left;">
Silahkan masukan aba-aba script/tulisan anda disini
</div>
Silahkan masukan aba-aba script/tulisan anda disini
</div>
Style 4
<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;">
Kode Script Anda Disini
</div>
Kode Script Anda Disini
</div>
Style 5
<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;">
Kode Script Anda Disini
</div>
Kode Script Anda Disini
</div>
Style 6
<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;">
Kode Script Anda Disini
</div>
Kode Script Anda Disini
</div>
Style 7
<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;">
Kode Script Anda Disini
</div>
Kode Script Anda Disini
</div>
Style 8
<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;">
Kode Script Anda Disini
</div>
Kode Script Anda Disini
</div>
Style 9
<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;">
Kode Script Anda Disini
</div>
Kode Script Anda Disini
</div>
Style 10
<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini</div>
Bonus 1
<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini</div>
Bonus 2
<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Kode Script Anda Disini</div>
Bonus 3
<div style="background-color: #eaeaea; border: 3px double #1780dd; padding: 10px; text-align: left;">
Kode Script Anda Di Sini
</div>
Kode Script Anda Di Sini
</div>
Demikianlah tutorial "Cara Membuat Kotak Kode Script HTML/Javascript di Dalam Postingan Blog". Terima kasih berkunjung dan telah meluangkan waktunya untuk membaca artikel yang singkat ini. Semoga sesudah membaca tulisaan ini sanggup menambah ilmu dan wawasan anda.
Salam sukses untuk kita semua
Silahkan berkomentar jikalau ada yang ingin ditanyakan.




No comments:
Post a Comment