News Update :

27 Februari 2011

code box

7 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 :
  1. Masuk ke akun blogger anda
  2. Klik Rancangan  ==> Edit HTML 
  3. Centang Expand widget template (download dulu template anda untuk mengurangi resiko kesalahan penulisan scipt).
  4. Cari Code ]]></b:skin> (tekan F3 atau Ctrl + F untuk mempermudah pencarian).
  5. 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;
    }
  6. simpan template anda
  7. Sekarang Klik Pengaturan ==> Format ==>Post Template
  8. Copy code berikut dan paste   <div class="codeview">
    Insert code here</div>
  9. 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>

    Related Post code box

    + komentar + 7 komentar

    28 Februari 2011 08.05

    mantap nu tutornya... kunjungan balik ni gan...

    Terimakasih Anak Rantau atas Komentarnya di code box
    28 Februari 2011 18.58

    nice share...

    Terimakasih syahida atas Komentarnya di code box
    1 Maret 2011 16.20

    Menarik tutorial blognya...Semoga selalu bermanfaat...Budayakan saling berbagi tanpa harus membebani orang lain

    Terimakasih Regen's Weblog atas Komentarnya di code box
    2 Maret 2011 06.43

    @ all thanks 4 comment

    Terimakasih smile atas Komentarnya di code box
    3 Maret 2011 11.56

    CBOX=Iframe ....bener nggak boz..

    Terimakasih Rasau Hijau atas Komentarnya di code box
    3 Maret 2011 12.12

    makasih koreksinya

    Terimakasih smile atas Komentarnya di code box
    4 Maret 2011 01.43

    lapor.. saya sudah mengunjungi balik neh.. hehehe.. wah nice info.. bisa di coba tuh.. wah.. web master ya kang.. ? hehehe.. oia,, kok belom di follow..?

    Terimakasih Apriyeni Lestari atas Komentarnya di code box

    Posting Komentar

    silakan tinggalkan komentar anda, karena komentar anda sangat membantu membangun blog ini.No Spam No Porn.