Melebarkan Kotak Komentar Blogspot

YULVINDO TEKNIK | 11/05/2011 11:00:00 PM |
A. Pendahuluan
    Di setiap akhir posting blog, selalu diikuti dengan permintaan Poskan Komentar. Biasanya komentar pengunjung ditulis pada kotak komentar kecil.
    
Apabila belum dirubah settingnya, kotak komentar blog terlihat sempit atau kurang lebar. Berikut akan dijelaskan cara untuk melebarkan kotak komentar tersebut.
  
B. Cara melebarkan kotak komentar blogspot
    1. Masuk/Login ke www.blogger.com
    2. Isikan alamat email anda dan pasword
    3. Klik menu Rancangan
    4. Klik menu Edit HTML
    5. Centanglah pada kotak kecil di sebelah Expand template widget
    6. Carilah kode html di bawah ini, untuk lebih mudah pencarian tekan tombol Ctrl+F dan 
        masukkan kode <b:includable id='comment-form' var='post'> lalu tekan tombol ENTER.
        (ini untuk template minima, sedang untuk jenis template yang lain menyesuaikan 
         kodenya).
   <b:includable id='comment-form' var='post'>
   <div class='comment-form'>
   <a name='comment-form'/>
   <h3><data:postCommentMsg/></h3>
   <p><data:blogCommentMessage/></p>
   <iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc'
   frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>
   </div>
   </b:includable>

    7. Hapus kode diatas dan gantilah dengan kode di bawah ini :
   <b:includable id='comment-form' var='post'>
   <div class='comment-form-block'>
   <a name='comment-form'/>
   <h4 id='comment-post-message'><data:postCommentMsg/></h4>
   <p><data:blogCommentMessage/></p>
   <data:blogTeamBlogMessage/>
   <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
   <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0'  
    height='275'  id='comment-editor' scrolling='auto' src=' ' width='100%'/>
    <data:post.iframeColorizer/>
        </div>
   </b:includable>
        
        
Penjelasan :
        - kode html yang diberi warna biru merupakan tambahan dari kode diatasnya.
        - kode height='275' , menyatakan jarak tombol navigasi halaman dengan kotak
          komentar, anda bisa merubah ukurannya sesuai keinginan, misal dirubah menjadi               
          height='350' (semakin besar ukuran berarti semakin tinggi jaraknya)
        - perhatikan kode width:'100%'; , kode ini menyatakan lebar kotak komentar, anda 
          bisa merubah ukurannya sesuai keinginan, semakin besar nilainya  berarti  semakin                      
          lebar kolom kotak komentar, contoh : width: '200%';
    8. Carilah kode ]]</b:skin> dengan menggunakan tombol CTRL+F
    9. Tambahkan kode dibawah ini sebelum kode ]]</b:skin>                                                                                                                                                                                                                  
        div.comment-form-block{
        width: 550px;
        margin: 0 auto;
        }
        div.comment-form-block p{
        color: #000;
        font-family: 'Georgia';
        font-size: 14px;
        text-align: left;
        }

          
   10. Klik menu Pratinjau
   11. Bila hasilnya sudah sesuai dengan keinginan anda, lanjutkan pada langkah berikutnya, 
        tetapi bila belum sesuai, ulangi lagi dari langkah ke-7
   12. Klik menu  Simpan Template
   13. Klik menu Lihat Blog
   14. Bila anda berhasil maka kotak komentar akan berubah lebar dan tingginya sesuai 
        dengan  keinginan.
          
C. Sumber.
  • yasiranak252.blogspot.com

1 komentar: