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
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:
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
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
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
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
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
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 BlogSekarang 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
Thanks atas infonya,jadi semakin bertambah lagi pengetahuan tentang edit-edit template blog.
BalasHapussama-sama mas Felix, terimakasih juga +1nya :)
HapusMakasih infonya. Saya baru perlu nih..
BalasHapusTerima kasih.Postingan Anda menambah pengetahuan saya.
BalasHapusyang ini bukan ya???
BalasHapus/* POST WRAPPER */
#post-wrapper {
float:left;
width:404px;
margin:10px 0;
iya mbak Widya,,
Hapusmakasih infonya mbak ana, kebetulan saya sedang mencari info utk mengetahui lebar area postingan agar bisa menyesuaikan lebar iklan di area postingan :)
BalasHapussekali lagi makasih infonya ^^
sama-sama mbak Indri, terimakasih kembali
Hapusassalamualaikum ka...terima kasih sangat membantu banget...
BalasHapussangat membantu sekali, terima kasih gan informasinya.
BalasHapus