Kolom posting pada homepage pada Blogger setting defaultnya rata-rata hanya ada 1 kolom akan tetapi jika kita kreatif kita bisa membuat kolom postingan pada homepage tersebut menjadi 2 kolom atau bahkan lebih dari itu. Artikel ini sengaja saya tulis karena ada seorang pengunjung blog bernama Jamaluddin Djavu yang menanyakan tentang cara membuat kolom postingan menjadi 2 kolom dan dari itulah saya mendapatkan inspirasi untuk menjawab pertanyaan beliau sekaligus saya jadikan postingan agar semua blogger baru tahu dan sekaligus sebagai tambahan catatan saya serta pengalaman bagi anda semua. Untuk contoh bisa anda lihat disini akan tetapi sudah banyak mengalami modifikasi dan kode yang saya berikan dibawah adalah kode dasar pembuatan 2 kolom posting homepage.
Langsung saja ke pokok masalahnya dan cara membuatnya adalah sebagai berikut:
1. Login ke Blogger dengan id anda
2. Klik blog yang kolom postingnya akan dijadikan 2 kolom (sebaiknya bikin blog khusus untuk percobaan)
3. Jangan lupa backup template
4. Klik menu Template => Edit HTML => Lanjutkan => Expand Template Widget
5. Cari kode berikut ]]></b:skin>
(gunakan CTRL+F untuk memudahkan pencarian) dan jika sudah ketemu copy dan paste kode berikut tepat dibawah kode tersebut.
Anda bisa mengubah Width dan Height kolom pada kode yang saya cetak merah di atas agar sesuai dengan template Anda.
6. Cari lagi kode .post {Rangkaian kode}, jika sudah ketemu hapus kode tersebut dan ganti dengan kode dibawah ini.
}
Kode di atas juga bisa anda ubah dan kreasikan sendiri sesuai keinginan Anda
7. Klik Pratinjau dan jika sudah sesuai keinginan silahkan simpan template anda dengan mengklik tombol Simpan Template.
Selesai, selamat mencoba dan berkreasi.
Langsung saja ke pokok masalahnya dan cara membuatnya adalah sebagai berikut:
1. Login ke Blogger dengan id anda
2. Klik blog yang kolom postingnya akan dijadikan 2 kolom (sebaiknya bikin blog khusus untuk percobaan)
3. Jangan lupa backup template
4. Klik menu Template => Edit HTML => Lanjutkan => Expand Template Widget
5. Cari kode berikut ]]></b:skin>
(gunakan CTRL+F untuk memudahkan pencarian) dan jika sudah ketemu copy dan paste kode berikut tepat dibawah kode tersebut.
<b:if cond='data:blog.pageType != "item"'>
<style>
.post {
width:250px;
height:200px;
margin-right:7px;
overflow:hidden;
float:left;
border:2px double #DCDCDC;
border-radius:5px;
}
</style>
Anda bisa mengubah Width dan Height kolom pada kode yang saya cetak merah di atas agar sesuai dengan template Anda.
6. Cari lagi kode .post {Rangkaian kode}, jika sudah ketemu hapus kode tersebut dan ganti dengan kode dibawah ini.
.post {
box-shadow:1px 1px 5px rgba(1,1,1,.1);
margin:2px;
position:relative;
padding:5px;
border:1px solid #fff;
}
Kode di atas juga bisa anda ubah dan kreasikan sendiri sesuai keinginan Anda
7. Klik Pratinjau dan jika sudah sesuai keinginan silahkan simpan template anda dengan mengklik tombol Simpan Template.
Selesai, selamat mencoba dan berkreasi.
makasih infonya
ReplyDeletekayaknya, tidak semua template ada kode .post{ dan selanjutnya.
ReplyDeleteSemua template Blogspot pasti ada kode .post{, kalo memang ada template yang tidak pakai kode tersebut coba di share dong pengen tau jadinya seperti apa tampilan blognya tanpa kode itu.
Deletepunya ane kagak ada kode .post{, trus ane harus gmn gan ? ama kode ]]> ditemplteku ada 3, aku harus pilih yang mana? thanku
ReplyDeleteUntuk template bawaan blogger saya kurang tahu dan saya belum mempelajari struktur template bawaan blogger.
DeleteMau ngubah template masih ngeri2.. maklum siswa baru... hehehe...
ReplyDeleteKalau gagal gmn???
Di backup dulu templatenya sob, jika ada kesalahan bisa ngembalikan seperti semula
DeleteSaya lagi nyari ini, semoga berhasil tak coba dulu
ReplyDeleteSIlahkan sob semoga berhasil
Delete