Cara Membuat Kotak Output Mirip Terminal Linux di Blogger - Detail Program

Kalau kamu melakukan running code di linux, tentu saja hasil output akan terbuka di linux. Nah, kali ini saya akan membagikan cara membuat kotak mirip seperti terminal linux.

Gunanya tentu saja untuk meletakan code maupun contoh hasil output agar lebih menarik. 

Cara membuat kotak terminal linux

1. Copy dan Paste css ini sebelum </style> atau </b:skin>.

 .run {
   position:relative;
   width:88%;
   font-size: 11px; font-family: monospace;
   line-height:1.45em;
   border-radius: 4px;
   padding:1.75em 1.0em 0.8em 1.0em;
   margin:1em auto;
   color:#fff;
   background:#000;
   overflow:hidden;
}
.run hr{
   border:0;
   border-top: 1px dashed #8c8c8c;
   }
.run:before,.run:after, .run3{
   content:"";
   position:absolute;
   top:5px;
   left:12px;
   border-radius:50%;
   border-width:0 14px 14px 0;
   border-style:solid;
   border-color:#f50f0f;
   background:#658E15;
   display:block; width:0;
}
.run:after {
   left:35px;
   border-color:#6beb02;  
   }
.run3 {
   left:58px;
   border-color:#ffd2

2. Pasang pada postingan/halaman dengan menggunakan kode ini.

<div class="run">
<div class="run3">
</div>
<hr />
Teks Kamu disini

[Program Finished]
</div>

Tampilan Kotak Terminal Linux

---

Teks Kamu disini

[Program Finished]

Kotak ini cocok untuk blog pemrogram, karena sebaiknya menampilkan contoh hasil running dari program yang dibuat.