Cara Membuat Postingan Blog 2 Kolom - Berikut ini ada tips trik seputar blog yakni Cara Membuat Postingan Blog 2 Kolom. Nah buat kawan-kawan blogger yang ingin mengubah postingan blognya di home yang sebelumnya 1 kolom menjadi 2 kolom silahkan simak informasi berikut ini.
Buat kawan-kawan yang ingin Membuat Postingan Blog 2 Kolom silahkan simak postingan komputologi yang satu ini.
Cara Membuat Postingan Blog 2 Kolom
1.
Log in ke blogger
2.
Buka blog sobat
3.
Masuk ke template, edit HTML
4.
Jangan lupa centang expand widget
5.
Selanjutnya cari kode ]]></b:skin> (agar mudah melakukan pencarian gunakan Ctrl+F)
6.
Copykan kode berikut ini tepat di bawah kode ]]></b:skin>
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#main-wrapper {width:620px;padding-left:5px;padding-right:5px;border-right:1px solid #ddd;}
h2.date-header, .jump-link, .feed-links, .post-footer {display:none;}
#blog-pager {width:98%; clear:both;}
.post {margin:.01em 10px 10px 0;background:none;width:300px;height:265px;float:left; border-bottom:3px double #ddd; positon:relative;overflow:hidden;}
.post-body {margin:0.2em 0 .75em;line-height:1.4em;font-size:13px;color:#111;overflow:hidden;}
.post h3 {height:32px;font-size:15px;font-weight:bold;line-height:1.3em;color:#102D57;text-transform:none;font-family:Arial;}
.post h3 a, .post h3 a:visited, .post h3 strong {font-weight:bold;color:#102D57;}
.post h3 strong, .post h3 a:hover {color:#000;text-decoration:underline;}
</b:if>
</style>
<b:if cond='data:blog.pageType != "item"'>
#main-wrapper {width:620px;padding-left:5px;padding-right:5px;border-right:1px solid #ddd;}
h2.date-header, .jump-link, .feed-links, .post-footer {display:none;}
#blog-pager {width:98%; clear:both;}
.post {margin:.01em 10px 10px 0;background:none;width:300px;height:265px;float:left; border-bottom:3px double #ddd; positon:relative;overflow:hidden;}
.post-body {margin:0.2em 0 .75em;line-height:1.4em;font-size:13px;color:#111;overflow:hidden;}
.post h3 {height:32px;font-size:15px;font-weight:bold;line-height:1.3em;color:#102D57;text-transform:none;font-family:Arial;}
.post h3 a, .post h3 a:visited, .post h3 strong {font-weight:bold;color:#102D57;}
.post h3 strong, .post h3 a:hover {color:#000;text-decoration:underline;}
</b:if>
</style>
Catatan: Ubah kode yang berwarna
merah sesuai dengan blog/ keinginan sobat.
Jangan lupa preview dulu, apabila berhasil langsung simpan template.
Nah itulah tadi sedikit info mengenai Cara Membuat Postingan Blog 2 Kolom. Semoga bermanfaat.
Jangan lupa preview dulu, apabila berhasil langsung simpan template.
Nah itulah tadi sedikit info mengenai Cara Membuat Postingan Blog 2 Kolom. Semoga bermanfaat.
Postingan 2 kolom yang ada di Homepage Blogger sangat bermanfaat sekali. Karena saya menampilan 8 buah postingan di Homepage, maka saya menggunakan Postingan 2 Kolom di Homepage ini.
Agar terlihat lebih Minimalis dan Elegan.
Tidak usah berlama-lama lagi, silahkan ikuti Tutorial Membuat Postingan 2 Kolom di Homepage dibawah ini:
·
Buka
Akun Blogger Anda.
·
Masuk
ke Dashboard.
·
Pilih Menu Template ~> Edit HTML
·
Cari
Kode ]]></b:skin>
·
Copy Paste
kode berikut ini dibawah kode ]]></b:skin> tadi
<style
type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#main-wrapper {width:620px;padding-left:5px;padding-right:5px;border-right:1px solid #ddd;}
h2.date-header, .jump-link, .feed-links, .post-footer {display:none;}
#blog-pager {width:98%; clear:both;}
.post {margin:.01em 10px 10px 0;background:none;width:250px;height:200px;float:left; border-bottom:3px double #ddd; positon:relative;overflow:hidden;}
.post-body {margin:0.2em 0 .75em;line-height:1.4em;font-size:13px;color:#111;overflow:hidden;}
.post h3 {height:32px;font-size:15px;font-weight:bold;line-height:1.3em;color:#102D57;text-transform:none;font-family:Arial;}
.post h3 a, .post h3 a:visited, .post h3 strong {font-weight:bold;color:#102D57;}
.post h3 strong, .post h3 a:hover {color:#000;text-decoration:underline;}
</b:if>
</style>
<b:if cond='data:blog.pageType != "item"'>
#main-wrapper {width:620px;padding-left:5px;padding-right:5px;border-right:1px solid #ddd;}
h2.date-header, .jump-link, .feed-links, .post-footer {display:none;}
#blog-pager {width:98%; clear:both;}
.post {margin:.01em 10px 10px 0;background:none;width:250px;height:200px;float:left; border-bottom:3px double #ddd; positon:relative;overflow:hidden;}
.post-body {margin:0.2em 0 .75em;line-height:1.4em;font-size:13px;color:#111;overflow:hidden;}
.post h3 {height:32px;font-size:15px;font-weight:bold;line-height:1.3em;color:#102D57;text-transform:none;font-family:Arial;}
.post h3 a, .post h3 a:visited, .post h3 strong {font-weight:bold;color:#102D57;}
.post h3 strong, .post h3 a:hover {color:#000;text-decoration:underline;}
</b:if>
</style>
·
Silahkan Klik Preview untuk melihat
tampilan sementara
·
Simpan Template apabila sudah Pas
kelihatan di Mata.
Tambahan:
1.
Kode yang Berwarna Merah adalah untuk mengatur Lebar dari
postingan.
2.
Kode yang Berwarna Biru adalah
untuk mengatur Tinggi dari
postingan.
Sekian. Semoga bermanfaat!