Friday, March 11, 2011

Membagi Kotak Komentar Blogspot Menjadi Dua Bagian

Mungkin terlihat unik jika kotak komentar default blogspot dibagi menjadi dua. Hmm, selain menjadi unik tentunya juga memanfaatkan ruang yang kosong. Kita tau kebanyakan kotak komentar blogspot berukuran besar. Nah, jika dibagi dua kan jadinya unik.

Lalu untuk apa dibagi dua. Kita bisa menambahkan tulisan atau apalah, adsense, gambar, animasi, widget, dan lain-lain. Tunjukkan kreatifitasmu kawan !!!

Contoh Membagi Kotak Komentar Blogspot Menjadi Dua Bagian


Seperti itu contohnya.
Sekarang bagaimana cara membuatnya?

Sebenarnya mudah, dalam hal bagi membagi yang kita gunakan hanyalah kode untuk membuat sebuah tabel

Step-by-step

  1. Masuk ke akun blogger
  2. Buka rancangan (Design)
  3. Buka Edit HTML
  4. Centang "Expand Widget Template"
  5. Cari kode blogger-iframe-colorize (Gunakan CTRL+F)
  6. Nanti akan bervariasi kodenya. Setiap template berbeda-beda. Contohnya,misal kita temukan susunan kodenya seperti ini:
    <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='600' id='comment-editor' scrolling='auto' src='' width='400'></iframe>
  7. Setelah menemukan susunan kode yang ada tulisan "blogger-iframe-colorize" nya, sekarang tinggal menambahkan kode saya. Ubahlah kode di atas menjadi susunan kode seperti berikut. Catatan: kode warna hitam tebal adalah kode asli, yang lain yang harus ditambahkan
    <table border='0' cellpadding='0' cellspacing='0' width='480px'>
    <tbody>
    <tr>
    <td valign='top' width='425'>
    <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='600' id='comment-editor' scrolling='auto' src='' width='400'></iframe>  </td>
    <td style='padding-left: 5px; text-align: left; padding-top: 5px;' valign='top'> <table cellpadding='0' cellspacing='0'>
    <tbody>
    <tr>
    <td align='left' valign='top' width='300'>

    <div style='-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background: white none repeat scroll 0% 0%; border: 1px solid #3B5998; padding: 2px 5px;'>

    Bisa diisi dengan tulisan, adsense, widget, dan lain-lain. kreatif ! </div>

    </td></tr> </tbody></table> </td> </tr> </tbody></table>
  8. Selanjutnya simpan. Dan lihat hasilnya
  9. Catatan: Kode tebal hitam adalah kode asli. Kode warna hijau ,merah, dan orang adalah kode yang harus ditambahkan. Kode warna orange = ganti dengan tulisan atau adsense, atau widget, dan sebagainya. Koe warna merah adalah border radius, yaitu bingkai di sebelah kotak komentar, silahkan sesuaikan ukuran (pokoknya otak-atik sendiri).
  10. Selamat mencoba !
Jika gagal, silahkan share saja lewat kotak komentar :)

    No comments:

    Post a Comment