Membuat kolom posting homepage menjadi 2 kolom

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.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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.


GET UPDATE VIA EMAIL
Berlangganan artikel via email!
reader



DMCA Protected
Protected by Copyscape Duplicate Content Finder

BAGIKAN KE:

Facebook
Digg
Ditulis oleh: Aditya Putra 20 November 2012

11 Komentar

makasih infonya

kayaknya, tidak semua template ada kode .post{ dan selanjutnya.

Semua 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.

punya ane kagak ada kode .post{, trus ane harus gmn gan ? ama kode ]]> ditemplteku ada 3, aku harus pilih yang mana? thanku

Untuk template bawaan blogger saya kurang tahu dan saya belum mempelajari struktur template bawaan blogger.

Mau ngubah template masih ngeri2.. maklum siswa baru... hehehe...
Kalau gagal gmn???

Di backup dulu templatenya sob, jika ada kesalahan bisa ngembalikan seperti semula

Saya lagi nyari ini, semoga berhasil tak coba dulu

SIlahkan sob semoga berhasil

PERHATIAN !...
*. Baca dulu artikel dan komentar yang ada sebelum Anda menulis komentar
*. Harap berkomentar dengan bijak dan sopan
*. Jika mengajukan pertanyaan, beri centang pada kotak disamping tulisan "Beri tahu saya" untuk mendapatkan jawaban melalui email
*. Dilarang menyertakan "LINK HIDUP", "IKLAN" "SPAM" dalam komentar karena akan dihapus atau dimasukkan ke dalam Comment Spam

Pengikut

Komentar Terbaru

Site Info



Blogger Blitar Community