Membuat Kotak Script HTML, CSS, dll di Blog
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi utKodenya :
<div style="background-color: #eaeaea; border: 1px solid #444; padding: 10px; text-align: left;">Masukan Kode di kotak ini </div>
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboru
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Kode 1
Letakan kode di atas kode ]]></b:skin>
.post-body h3,.post-body h4,.post-body h5,.post-body h6{position:relative;margin:0 0 10px;padding:10px 0;border-bottom:2px solid #e0e0e0;font-weight:500;letter-spacing:1px}
.post-body h3{font-size:140%;}.post-body h4{font-size:120%;}.post-body h5{font-size:100%;}.post-body h6{font-size:80%;}
.post-body h3:before,.post-body h4:before,.post-body h5:before,.post-body h6:before{content:'';position:absolute;bottom:-2px;left:0;right:0;background:#fc4f69;width:7%;height:2px;}
Sumber : Bangbil.post-body h3{font-size:140%;}.post-body h4{font-size:120%;}.post-body h5{font-size:100%;}.post-body h6{font-size:80%;}
.post-body h3:before,.post-body h4:before,.post-body h5:before,.post-body h6:before{content:'';position:absolute;bottom:-2px;left:0;right:0;background:#fc4f69;width:7%;height:2px;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.post-body h3,.post-body h4,.post-body h5,.post-body h6{position:relative;margin:0 0 10px;text-transform:uppercase;padding:10px 0;border-bottom:2px solid #e0e0e0;font-weight:500;letter-spacing:1px}
.post-body h2 {position: relative;margin: 0px 0px 10px;border-bottom: 2px solid #E0E0E0;font-weight: 500;padding: 0px 0px 10px;font-size: 130%;}
.post-body h2:before{content:'';position:absolute;bottom:-2px;left:0;right:0;background:#639CFF;width:12%;height:2px;transition:width .5s}
.post-body h3{font-size:120%;}.post-body h4{font-size:100%;}.post-body h5{font-size:80%;}.post-body h6{font-size:60%;}
.post-body h3:before,.post-body h4:before,.post-body h5:before,.post-body h6:before{content:'';position:absolute;bottom:-2px;left:0;right:0;background:#fc4f69;width:12%;height:2px;transition:width .5s}
.post-body h2:hover:before,.post-body h3:hover:before,.post-body h4:hover:before,.post-body h5:hover:before,.post-body h6:hover:before{width:100%}
.post-body h2 {position: relative;margin: 0px 0px 10px;border-bottom: 2px solid #E0E0E0;font-weight: 500;padding: 0px 0px 10px;font-size: 130%;}
.post-body h2:before{content:'';position:absolute;bottom:-2px;left:0;right:0;background:#639CFF;width:12%;height:2px;transition:width .5s}
.post-body h3{font-size:120%;}.post-body h4{font-size:100%;}.post-body h5{font-size:80%;}.post-body h6{font-size:60%;}
.post-body h3:before,.post-body h4:before,.post-body h5:before,.post-body h6:before{content:'';position:absolute;bottom:-2px;left:0;right:0;background:#fc4f69;width:12%;height:2px;transition:width .5s}
.post-body h2:hover:before,.post-body h3:hover:before,.post-body h4:hover:before,.post-body h5:hover:before,.post-body h6:hover:before{width:100%}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </h2>
Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Mempercantik Tampilan subheading Versi 3
.post-body h1{font-size:200%}.post-body h2{font-size:180%}.post-body h3{font-size:160%;text-align:center;color:rgba(101, 100, 100, 0.91);border-bottom:1px solid rgba(234, 169, 20, 0.97);border-top:1px solid rgba(234, 169, 20, 0.97);padding:8px 0px 8px;border-bottom-style:dotted;border-top-style:dotted;}.post-body h4{font-size:140%}.post-body h5{font-size:120%}.post-body h6{font-size:100%}
Ket : tulisan warna opsional boleh di letakan di template atau tidak terserah anda
Hasilnya akan nampak seperti di bawah ini
Terima kasih