Cara Membuat Box Note untuk Copy Code/Script - Mempermudah dan Mempercantik Copy Paste Code!!!

Box Note untuk Script dan Codingan by eichiar.blogspot.com

Saya sering kali berkunjung ke sebuah blog untuk mencari kode/skrip program, konfigurasi untuk kebutuhan networking dll. Tapi, dikebanyakan blog, mereka hanya sekedar mencantumkan kode/skrip tadi sebagai tulisan biasa (tanpa box).

Mungkin bagi kebanyakan pembaca tidak masalah dengan itu, asalkan mendapatkan apa yang diinginkan. Tapi, menurut saya pribadi alangkah baiknya jika kode/skrip yang dibagikan itu diletakkan di tempat yang bagus dan rapi, sehingga pembaca lebih cepat mengetahui bahwa tulisan ini merupakan kode yang dimaksud.

Sebenarnya ada banyak cara untuk membuatnya yang saya temukan di blog kebanyakan, hanya saja saya lebih tertarik dengan box yang satu ini.

Baiklah langsung saja, cara membuatnya sebagai berikut :

1. Masuk ke dashboard blogger kita masing - masing
2. Klik Theme/Tema dan klik Edit HTML
3. Kita cari skrip kode dengan tag </b:skin> atau </style>
4. Lalu Copykan skrip dibawah ini di atas tag </b:skin> atau </style>

/* CSS Note */

.note{position:relative;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}

.note.Dimgray{background:#696969}

.note.red{background:#e74c3c}

.note.Darkslateblue{background:#483D8B}

.note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}

.note.Dimgray:before{border-color:#fff #fff #696969 #696969;background:#696969}

.note.red:before{border-color:#fff #fff #e74c3c #e74c3c;background:#e74c3c}

.note.Darkslateblue:before{border-color:#fff #fff #483D8B #483D8B;background:#483D8B}

Kemudian jika sudah selesai semuanya, klik Save Theme.

Untuk menggunakannya kita bisa gunakan tag berikut di dalam mode HTMLnya :

Warna Hijau

<div class='note'>Note Kode diletakkan disini</div>

Warna Dimgray

<div class='note Dimgray'>Note Kode diletakkan disini</div>

Warna Darkslateblue

<div class='note Darkslateblue'>Note Kode diletakkan disini</div>

Warna Merah

<div class='note red'>Note Kode dletakkan disini</div>

Untuk mengganti warna, kalian dapat melihat Kode Warna HTML dan ganti disana.

Mungkin itu saja untuk kali ini, silahkan jika ada pertanyaan atau bingung tinggalkan pesan dikolom komentar atau email saya. Juga tolong bantuannya untuk share Tutorial ini jika bermanfaat ke teman - teman kalian.

Selamat Mencoba ^^

Eich-I-Ar