Kali ini saya akan memberitau CSS BOX
Ini bisa juga untuk membuat keterangan Code
Kesimpulan,FAQ dan lain2 nah ingin tau demonya?
Lihat Style di bawah ini
Keterangan Code
- Contoh link : ini adalah sebuah link
- Contoh coding :
<div class="coding"> saya adalah code html</div>
- Contoh warna pada coding :
<div class="coding"> saya adalah code html</div>
- Contoh text tulisan devault.
- contoh
contoh <br/> 1
contoh <br/> 2
nah gimana?
Oke langsung saja Code CSSnya
/*****************************************
Name : CSS Box Code
site : http://www.belajar-code.net/
******************************************/
.widget-box-content-style {
border: 2px double #00d2ff;border-radius:20px;box-shadow: inset 0 0 15px #ff0000;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9lLMwtorC3TTf4QY6TQR8ja3PscvLE3c-Gjd7X0zUpe4sK4tS8UVgFUW3_dsc5eKfJ_N1iiy367EsW_iAvziLLB5qTYKQB57T7Q6cIWf9UglWtdnjSZixE3f4_4HxGj1ldyaO7Hqp6iU/s1600/green.png") repeat scroll 0% 0% transparent;
width: 100%;
font-family: "Courier New",Courier,monospace;
font-size: 14px;
word-wrap: break-word;
text-align: left;}
.widget-box-rivai-style .merah {font-weight: bold;color: #FF0000;}
.widget-box-rivai-style .biru {font-weight: bold;color: #0000FF;}
.widget-box-rivai-style .hijau {font-weight: bold;color: #00CC00;}
.widget-box-rivai-style a {color: #AA00AA;text-decoration: underline;}
.widget-box-rivai-style a:hover {color: #FF0000;text-decoration: none;}
.widget-box-rivai-style ul li {list-style-type: decimal;}
.widget-box-rivai-style-title {
position: relative;
padding: 5px;
margin: 20px 0px;
color: #000;
width: 150px;
text-align: center;
text-shadow: 1px 1px 1px #fff;
color:#000;
font-weight:bold;
background-color: #00d2ff;
font-family: Verdana;
font-size: 12px;
}.widget-box-rivai-style-title:before {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:40px;
width:0;
height:0;
border:0;
border-right-width:30px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #00d2ff;}
/*** www.belajar-code.net CSS widget box CSS style and ***/
bisa juga ubah backgroundnya
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPqSbD4XSU_nU238pJW1FrCRQNIYaYRxKOUMj_7S3xiwhYEQ6BNhrWUjPzswK4eVo4jTaJhecZzp6bARhpK-SvMfte45kTkeaH8l3Qh0ykDqg3udsE4UdLTERanocNn7QmafMO9URLA6s/s1600/bg.png |  |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN6_sIqMmSDDWvKRO4aJZ6rKDaEiUFxZckZGgrjyyr2lauJqjEEPZjgeVGvpN-sr28mQUycpymgXtUgQSQ-ryv08zcm5LquFxJGzYxno1HMBH1SyGoW1Z7qXjMZ7tyXGhLQ3BIcBBgLnY/s1600/black.png |  |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX0n_vnnpKRfYezUJsHIeHRr9qVVIiVQIkcZ8ul-pL79WDEnM4CjECzj2_79dC8nYUKMbxfpLsw2oQjSuAZj2E7MIZ1bqBHKies8SYxLE8a1-BFugof2KzgFXy78dOOVYI8CW4VMsDT2c/s1600/blue.png |  |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibBm0wKxxJASKFgRCfqEl6WPIPiMYIP_vXdStbakDFnYXo8h5qYizXCbaU_TixR9oV_-URZsNYx0AvTXVAuhynSiCT_oz-jeGSgl27TQNpHna_6e70K2mYeudwwhLHzoWayMME1cNLCjE/s1600/brown.png |  |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9lLMwtorC3TTf4QY6TQR8ja3PscvLE3c-Gjd7X0zUpe4sK4tS8UVgFUW3_dsc5eKfJ_N1iiy367EsW_iAvziLLB5qTYKQB57T7Q6cIWf9UglWtdnjSZixE3f4_4HxGj1ldyaO7Hqp6iU/s1600/green.png |  |
Code HTML
<!-- code widget box rivai style start-->
<div class="widget-box-rivai-style-title">BOX CSS </div>
<div class='widget-box-content-style' style="line-height: 21px;" >
<!-- silahkan masukkan code anda dibawah ini-->
<ul>
<li>Contoh link : <a href="www.belajar-code.net" target="_blank" title="www.rivai.org">ini adalah sebuah link</a> <br />
</li>
<li>Contoh coding :<br/> <b><div class="coding"> saya adalah code html</div> </b> </li>
<li>Contoh warna pada coding : <br/> <<span class="merah">div</span> <span class="hijau">class="coding"</span>> <span class="biru">saya adalah code html</span><<span class="merah">/div</span>></li>
<li>Contoh text tulisan devault. </li>
<li>contoh<br />
contoh <br/> 1<br />
contoh <br/> 2</li>
</ul>
<!-- silahkan masukkan code anda diatas ini-->
</div>
<!--code widget box rivai style end-->
Oke sekian semoga bermanfaat jika ingin di tanyakan silakan QUEST Info di
Comentar atau di ->>
Question Book
Title : CSS Box Keterangan
Description : Kali ini saya akan memberitau CSS BOX Ini bisa juga untuk membuat keterangan Code Kesimpulan,FAQ dan lain2 nah ingin tau demonya? L...
