code box

di Minggu, Februari 27, 2011 6 komentar

Wah weekend yang cerah ..waktu yang indah untuk memulai aktifitas,tapi meluangkan waktu sejenak untuk posting he he he .. menambah artikel.kali ini mengulas cara membuat code box pada posting... code box ini bisa untuk menempatkan image atau code scipt.

code box versi 1

code box versi 1

cara membuatnya :

Masuk ke akun blogger anda
Klik Rancangan ==> Edit HTML
Centang Expand widget template (download dulu template anda untuk mengurangi resiko kesalahan penulisan scipt).
Cari Code ]]></b:skin> (tekan F3 atau Ctrl + F untuk mempermudah pencarian).
Copy Code berikut dan letakkan di atasnya.

.codeview {
font-family: Arial, Helvetica, sans-serif;
color: #CC0000;
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
border-top : 2px solid #cccccc;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 2px solid #cccccc;
background-color: #FFFFFF;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}
simpan template anda
Sekarang Klik Pengaturan ==> Format ==>Post Template
Copy code berikut dan paste <div class="codeview">
Insert code here</div>
Simpan

Jadi intinya apabila mau menggunakannya letakkan code yang akan ditaruh dalam box diantara code <div class="codeview">dan</div>.apabila akan meletakkan code dalam posting silakan convert code disini

code box versi 2

code box versi 2

Cara membuatnya :
cukup mudah tidak perlu edit HTML pada template anda tinggal copy code berikut:

<table style="width:185px;height:80px;border:solid 1px #00ff00;background:#"><tr><td valign=top>insert code here</td></tr></table>

code box mode scroll

code box mode scroll
code box mode scroll
code box mode scroll
code box mode scroll
code box mode scroll

Cara membuatnya copy kode berikut :

<div style="overflow:auto; width:181px ; height:300px ;border: px solid #eee;padding:1px;margin:0px 0 0">insert code here</div>