(Klik gambar untuk memperbesar)
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.
- 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...
Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 01.25
.. keren banget. ijin save ya?!? ..
BalasHapusSilahkan saudari Vpie, dengan senang hati.. :)
Hapusmas gimana cara menampilkan kode html kayak diatas dengan kotak yang warna warni macam diatas?
BalasHapusmaaf mas masih newbie ...:) ;-(
oo..itu, saya menggunakan blockquote dengan CSS gradient. Tutorialnya belum saya postingkan insya Allah nanti kalau ada waktu saya posting mas ramadhan syahputra.. :)
Hapus