Cara Menambah Kolom Diatas dan Dibawah Postingan Blog

Cara Menambah Kolom Diatas dan Dibawah Postingan Blog - Membuat / menambah ruang kolom atau elemen baru dan posisinya berada dibawah dan d...

Cara Menambah Kolom Diatas dan Dibawah Postingan Blog - Membuat / menambah ruang kolom atau elemen baru dan posisinya berada dibawah dan diatas post blog tidaklah terlalu sulit. yang penting anda tahu berapa lebar tempat postingan blog (main-wrapper) dan mengatur / membagi ukuran lebar dua kolom baru yang akan ditambahkan. Bagaimana cara membuat 2 (dua) kolom baru terletak diatas dan dibawah postingan blog? Sebelum tutorial blog ini dimulai mungkin anda berkenan melihat cara menambah 2 kolom dibawah sidebar blog. Nah anda dapat melihat screenshot untuk menambah 2 kolom dibawah posts blog, seperti terlihat dibawah ini.

Menambah Kolom Diatas dan Dibawah Postingan Blog

Dengan membuat / menambah kolom dibawah postingan blog, tampilan blog anda akan semakin ramai karena anda dapat menambah ruangan misalnya untuk meletakkan widget random post, iklan banner dan widget lainnya sesuai keinginan anda. Kita mulai saja ke pembahasan bagaimana cara membuat 2 kolom dibawah dan diatas postingan blog.

Menambah Kolom Diatas dan Dibawah Postingan Blog
1. Log In ke bloggger.com
2. Pada dashboard, pilih Template => Edit HTML
3. Centang Expand Widget Template
4. Tekan F3, cari kode yang mirip seperti berikut ini (pusatkan pencarian pada kode main-wrapper)

#main-wrapper{padding-left:10px;width:590px;float:$startSide;word-wrap:break-word;overflow:hidden}

5. Lalu tambahkan kode berikut diatasnya

#post-kiri{padding-left:5px;width:290px;float:$startSide;word-wrap:break-word;overflow:hidden}
#post-kanan{padding-left:10px;width:285px;float:$startSide;word-wrap:break-word;overflow:hidden}

Sehingga menjadi seperti ini

#main-wrapper{padding-left:10px;width:590px;float:$startSide;word-wrap:break-word;overflow:hidden}
#post-kiri{padding-left:5px;width:290px;float:$startSide;word-wrap:break-word;overflow:hidden}
#post-kanan{padding-left:10px;width:285px;float:$startSide;word-wrap:break-word;overflow:hidden}

Keterangan :
-  Angka warna merah adalah lebar dari tempat blog posts (main-wrapper)
- Angka warna biru adalah lebar dari kolom yang baru ditambakan

6. Simpan Template

7. Lalu hilangkan tanda centang pada Expand Widget Template dan cari kode seperti dibawah ini

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

A. Untuk menambah dua kolom dibawah blog posts maka tambah berwarna hijau dibawah ini dan letakkan diatas kode </div>

<b:section class='post-kiri' id='post-kiri' preferred='yes'>
<b:section class='post-kanan' id='post-kanan' preferred='yes'>

Sehingga penerapannya seperti dibawah ini

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<b:section class='post-kiri' id='post-kiri' preferred='yes'>
<b:section class='post-kanan' id='post-kanan' preferred='yes'>
</div>

B. Untuk menambah dua kolom diatas blog posts maka tambah berwarna hijau dibawah ini dan letakkan dibawah kode <div id='main-wrapper'>

<b:section class='post-kiri' id='post-kiri' preferred='yes'>
<b:section class='post-kanan' id='post-kanan' preferred='yes'>

Sehingga penerapannya seperti dibawah ini

<div id='main-wrapper'>
<b:section class='post-kiri' id='post-kiri' preferred='yes'>
<b:section class='post-kanan' id='post-kanan' preferred='yes'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

8. Selesai, simpan template

Catatan :
Mungkin kode didalam template anda berbeda, jadi sesuiakan saja dan caranya sama dengan diatas dan juga lihat lebar post blog anda. Atur juga mengenai lebar dari 2 kolom yang baru ditambahkan, misalnya width, padding dan margin.
 
Demikian tutorial blog mengenai Cara Menambah Kolom Diatas dan Dibawah Postingan Blog, semoga bermanfaat.

COMMENTS

BLOGGER: 2
Loading...
Name

Activator,3,Adobe,1,aneka resep,35,AntiVairus,1,coreldraw,22,Data Recovery,1,Driver,3,education,6,IDM,1,kesehatan,21,komputer,22,Multimedia,1,news,7,photoshop,42,relegius,19,seo,27,Serial Key,4,tips wanita,10,tutorial blog,117,
ltr
item
Full Version Download: Cara Menambah Kolom Diatas dan Dibawah Postingan Blog
Cara Menambah Kolom Diatas dan Dibawah Postingan Blog
http://1.bp.blogspot.com/-nk0HJEwTiUs/UUCNsI3llgI/AAAAAAAAAsM/_3TSLnQsork/s1600/kolom+bawah+atas+post.jpg
http://1.bp.blogspot.com/-nk0HJEwTiUs/UUCNsI3llgI/AAAAAAAAAsM/_3TSLnQsork/s72-c/kolom+bawah+atas+post.jpg
Full Version Download
https://bloggerbondowoso24.blogspot.com/2013/03/cara-menambah-kolom-diatas-dan-dibawah.html
https://bloggerbondowoso24.blogspot.com/
https://bloggerbondowoso24.blogspot.com/
https://bloggerbondowoso24.blogspot.com/2013/03/cara-menambah-kolom-diatas-dan-dibawah.html
true
7143853511036504925
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy