Kamis, 24 Oktober 2013

Cara Mengetahui Kode Lebar Kolom Postingan Artikel Blog

Cara Mengetahui Kode Lebar Kolom Postingan Artikel Blog - Dalam menulis setiap panduan blog tentang blogger atau blogspot, awalnya saya ingin sekali mengurut artikel mulai dari tingkat dasar, menengah dan atas namun karena setiap ide dalam menulis tidak datang secara bersamaan, mau tidak mau, artikel ditulis pun pecah tidak berurutan seperti pada artikel kali ini, Cara Mengetahui Kode Lebar Kolom Postingan Artikel Blog. Mengetahui sebuah lebar dari setiap elemen ID yang ada didalam kode template blog, sebenarnya sangat mudah dilakukan dan saya juga telah membuatkan artikel bagaimana cara mengetahui setiap kode yang ada didalam template blog

Baca juga Mencari Kode Template di Menu Edit HTML Baru

Pada artikel sebelumnya, memang tidak dijelaskan secara khusus hanya pada bagian-bagian tertentu saja dan pada artikel cara mengetahui kode lebar kolom postingan artikel blog ini, akan dijelaskan hanya pada bagian Kolom postingan artikel blog saya. Namun jika menggunakan cara sebelumnya yang telah saya jelasakan, seharusnya artikel tersebut sudah cukup memberikan gambaran dari setiap kode template blog yang dicari atau yang akan di edit

Cara Mengetahui Kode Lebar Kolom Postingan Artikel Blog

Berhubung panduan ini khusus untuk pemula seperti saya maka sebelum mengetahui kode lebar kolom postingan artikel blog, saya tegaskan kalau kode template blog atau template yang digunakan masih menggunakan kode-kode yang secara umum digunakan bukan sebuah template yang mana setiap kodenya sudah diganti dengan menggunakan bahasa Indonesia; seperti contoh berikut ini:
#content-wrapper {
margin:0 auto 10px;
overflow:hidden;
padding:0;
width:900px;
}
menjadi >> #kotak-posting {
margin:0 auto 10px;
overflow:hidden;
padding:0;
width:900px;
}

Jika didalam template blog Anda menggunakan kode dengan bahasa yang tidak secara umum, saya sarankan lebih baik Anda bertanya kepada pembuat kode template blog tersebut :) hehee bercanda cin..!

Okey, untuk mengetahui kode lebar kolom postingan artikel blog, perhatikan struktur sederhana dari kode CSS berikut ini
body {...}
#outer-wrapper {...}
#header {...}
#menu {...}
#content-wrapper {...}
#main-wrapper {...}
.post {...}
.post-body {...}
.post-footer {...}
#comments {...}
#sidebar {...}
#footer {...}
Baca Cara Mengetahui Kode Template Blog

Sekarang buka menu pengeditan template blog dan carilah kode #main-wrapper
#main-wrapper merupakan elemen pembungkus untuk kolom artikel, komentar, dan ID lainnya yang berada didalam main-wrapper.
Jika kode CSS #main-wrapper sudah ditemukan, kurang lebih akan terlihat seperti berikut ini
#main-wrapper {
float:left; --> posisi sebelah kiri
margin-right:10px; --> jarak kolom sisi kanan dengan kolom sebelahnya yaitu kolom sidebar
overflow:hidden;
width:507px; --> lebar kolom Kolom postingan artikel
word-wrap:break-word;
}

Untuk mengganti lebar kolom postingan artikel blog, ganti lebar yang ada di #main-wrapper, yaitu:
width:507px; --> ganti sesuai dengan keinginan, misalnya width:550px; , width:650px; , width:710px;

Kenapa lebar kolom dari kode CSS #main-wrapper terkait dengan kode lebar Kolom postingan artikel blog? Karena #main-wrapper elemen merupakan pembungkus dari molom artikel seperti terlihat pada pembuktian kode html berikut ini
      <div id="main-wrapper">
<b:section class="main" id="main" showaddelement="no">
          <b:widget id="Blog1" locked="true" title="Posting Blog" type="Blog">
            <b:includable id="main" var="top">...</b:includable>
            <b:includable id="backlinkDeleteIcon" var="backlink">...</b:includable>
            <b:includable id="backlinks" var="post">...</b:includable>
            <b:includable id="breadcrumb" var="posts">...</b:includable>
            <b:includable id="comment-form" var="post">...</b:includable>
            <b:includable id="post" var="post">...</b:includable>
            <b:includable id="threaded-comment-form" var="post">...</b:includable>
          </b:widget>
        </b:section>
</div>
Dari kode html diatas, tidak hanya kolom kolom postingan artikel yang ada di elemen #main-wrapper..

Itulah cara mengetahui kode lebar kolom postingan artikel blog, yaitu berada di kode CSS #main-wrapper. Pada penjelasan diatas memang terlihat ruwet tapi sebenarnya mudah dilakukan, ubtuk penjelasan lebih lenajut, silahkan tinggalkan komentar saja untuk artikel blog ini, Cara Mengetahui Kode Lebar Kolom Postingan Artikel Blog

Cara Mengetahui Kode Lebar Kolom Postingan Artikel Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

10 komentar:

  1. Thanks atas infonya,jadi semakin bertambah lagi pengetahuan tentang edit-edit template blog.

    BalasHapus
    Balasan
    1. sama-sama mas Felix, terimakasih juga +1nya :)

      Hapus
  2. Makasih infonya. Saya baru perlu nih..

    BalasHapus
  3. Terima kasih.Postingan Anda menambah pengetahuan saya.

    BalasHapus
  4. yang ini bukan ya???
    /* POST WRAPPER */
    #post-wrapper {
    float:left;
    width:404px;
    margin:10px 0;

    BalasHapus
  5. makasih infonya mbak ana, kebetulan saya sedang mencari info utk mengetahui lebar area postingan agar bisa menyesuaikan lebar iklan di area postingan :)
    sekali lagi makasih infonya ^^

    BalasHapus
    Balasan
    1. sama-sama mbak Indri, terimakasih kembali

      Hapus
  6. assalamualaikum ka...terima kasih sangat membantu banget...

    BalasHapus
  7. sangat membantu sekali, terima kasih gan informasinya.

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia