Bagaimana cara menampilkan kode postingan dalam kotak jahitan di blog

 (Klik gambar untuk memperbesar)

Sebuah Blog dimana dedikasikan untuk membantu para Blogger seiring dengan perkembangan blognya, sering kali membutuhkan sebuah kotak (box) khusus yang membantu para blogger untuk menunjukan kode-kode kepada para visitor / pembaca. Mereka para blogger atau lebih tepatnya kita semua banyak menggunakan blockquote untuk menunjukan ke pembaca kode-kode yang ditampilkan. Para blogger meyakini ada sebuah cara atau metode yang terbaik dalam menampilkan kode-kode dalam postingan, tapi sudah cukup baikah? 

Jadi, inilah sebuah kotak khusus yang akan membantu anda dalam menunjukan kode-kode dalam postingan di blog dalam style yang sungguh elegant. Tampilan kotaknya seperti jahitan dan ada pita dikanan atasnya yang membantu mengkategorikan kode-kode yang akan anda postingkan. Kotak ini bisa disesuaikan dengan kebutuhan. Selain yang saya katakan tadi kotak ini bisa digunakan untuk menampilkan kode dalam postingan akan tetapi bisa juga digunakan untuk menampilkan pesan yang lainnya juga. Semua jadi satu, ini adalah kotak yang serba guna dengan banyak fitur.

View Demo

Cara menambahkannya di blog

• Masuk akun blogger 
• Klik Template -> Edit HTML
• Cari kode ]]></b:skin> 
• Pastekan kode berikut dibawah ini tepat di atas kode ]]></b:skin>

.wrapper {
overflow:hidden;
  margin: 50px auto;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
  padding: 5px 10px;
   background: #333;
   color: #fff;
   font-size: 17px;
   font-weight: normal;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-top-left-radius: 3px;
   -moz-border-radius-topleft: 3px;
   -webkit-border-top-left-radius: 3px;
   border-bottom-right-radius: 3px;
   -moz-border-radius-bottomright: 3px;
   -webkit-border-bottom-right-radius: 3px;
   border-top-right-radius: 3px;
   -moz-border-radius-topright: 3px;
   -webkit-border-top-right-radius: 3px;
   -moz-box-shadow: 0 0 0 4px #333, 2px 1px 4px 4px rgba(10,10,0,.5);
   -webkit-box-shadow: 0 0 0 4px #333, 2px 1px 4px 4px rgba(10,10,0,.5);
   box-shadow: 0 0 0 4px #333, 2px 1px 6px 4px rgba(10,10,0,.5);
   text-shadow: -1px -1px #333;
   font-weight: normal;
width:80%;
}
.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}
.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45);
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}
.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

• Untuk menggunakan kotak ini, Gunakan markup berikut :

<div class="wrapper">
<pre>
LETAKAN KODE ANDA DISINI</pre>
<div class="ribbon-wrapper-green">
<div class="ribbon-green">
KODE</div>
</div>
</div>
</div>

Keterangan: 

• Anda dapat mengedit teks yang berwarna biru untuk mengubah ukuran Font kalau memang itu terlalu besar.
• Teks yang berwarna merah harus diganti dengan kode / pesan yang anda inginkan
• Sedangkan teks yang berwarna hijau (KODE) harus diganti dengan kategori kode anda. Misalnya : CCS

Selesai, semoga bermanfa'at...