Back to TopBack to Bottom

Membuat Kolom Postingan Terpisah

Postingan di blog adalah sebuah keharusan, apa jadinya apabila blog tidak ada postinganberfikir? mungkin terlihat aneh sekali dan mempercantik daerah postingan atau yang biasa di sebut kolom post adalah sebuah keindahan tersendiri bagi saya agar pengunjung yang datang menjadi lebih nyaman dan betah untuk membacanya :).Disini saya akan membahas Bagaimana membuat kolom post menjadi terpisah-pisah. Maksud dari tema di atas yaitu seperti gambar di bawah ini.

contoh kolom postingan terpisah

Bagaimana sudah jelas bukan tentang kolom postingan terpisah? kalau sudah jelas mari kita lihat langkah-langkah pembuatannya

  1. Login ke blogger
  2. masuk ke Tata Letak => Edit HTML

    Dashboard
    edit html
  3. lalu cari kode di bawah ini

    .post {
    ..............
    }

    css post

  4. titik-titik di atas menunjukan ada kode yang terdapat di dalamnya kenapa saya tidak menunjukan-nya? karena setiap template kode yang dimaksud berbeda-beda
  5. setelah ketemu ganti dengan kode di bawah ini

    .post {
    background:#fff url(http://oketrik.googlecode.com/files/r.jpg) repeat-x bottom;
    border:5px solid #000;
    margin:0 0 0.5em;
    padding:0.5em;
    color:#000;
    font-family:"Trebuchet MS";
    -moz-border-radius-topleft: 20px;
    }

    css post terpisah
    Penjelasan :
    • fff : menunjukan warna latar belakang dari kolom postingan, sobat bisa menggantinya dengan kode warna yang lain
    • http://oketrik.googlecode.com/files/r.jpg : menunjukan gambar yang berada di bawah kolom postingan, sobat juga dapat menggantinya tapi dengan ukuran yang kecil
    • 000 : menunjukan dari warna garis pada kolom postingan terpisah, sobat bisa ganti akan tetapi harus di sesuaikan dengan warna main-wrapper agar terlihat terpisah
    • 000 : warna dari tulisan pada klolom postingan, sobat dapat mengganti dengan warna yang berlawanan dengan warna latar belakang agar terlihat jelas

  6. Setelah itu sobat dapat menyimpannya dan melihat hasilnya

Dengan modifikasi tampilan Kolom Postingan memungkinkan pengunjung blog sobat dapat menikmati dan mendalami postingan yang sobat tulis. Mungkin trik ini sebagian kecil dari Blogger hack yang ada di blog oketrik ini. Hanya sekian saja yang bisa saya sampaikan kurang lebih-nya saya minta maaf apabila ada kesalahan maklum saya seorang manusia yang tidak luput dari kesalahan :angel:. Terima kasih dan Happy Blogging.

Attention

ATTENTION PLEASE!

Untuk memperbaiki dan mengembangkan blog ini menjadi lebih baik, mari bersama - sama kita bangun, caranya? Apabila kamu menemukan link yang mati/sudah tidak berfungsi atau gambar yang sudah tidak muncul/expire, silahkan hubungi kami disini. Laporan anda sangat berpengaruh pada perkembangan blog ini. Terima kasih atas perhatiannya thanks

Trik menarik lainnya yang mungkin ingin anda baca :

30 comments

Wah,, ntar sayacoba deh sob ..
tapi saya bisa nanya gak ya sob .. ??
Saya mw menambah plugin like di postingan, Related post dan tombol read More ..
Setelah saya coba cara2 yg diberikan beberapa sahabat,, tetep gak bisa sob ..
Wah,, itu kenapa ya ?? Udah dicoba beberapa kali lho ..**|
Mohon bimbingannya .. ^^
Jangan lupa konfirmasi ke saya ya .. ;)

Balas | May 17, 2010

Keren Sob....!!!

Balas | May 17, 2010

g bisa gmn y sob? klo untuk readmore di blog saya ada di coba dulu deh, tapi klo related post saya g punya coba sobat googling, dan apabila sobat g mau repot silahkan kirimkan template sobat ke saya melalui email.

Terima kasih ^_^

Balas | May 17, 2010

Tapi kalo buat biar nyambung2 gimana gan??? request ye..

Balas | May 17, 2010

Maksudnya gmn y? udah saya kasih tutor yang pisah-pisah malah pengen yang nyambung dsr (cuma becanda :D).

itu sangat mudah sob tinggal kita mainkan margin, padding dan sama kan warna border dengan warna main-wrapper, kemungkinan saya tidak akan membuat tutornya sob coz terlalu pendek sih tapi insyallah deh saya bikinin tergantung mood hehehehehe :D. Terima kasih sahabat akhatam ^_^

Balas | May 17, 2010

bisa langsung di coba sobat :D
keren tutornya :D

Balas | May 18, 2010

wih keren juga ya...
nanti mau coba...

bookmark dulu...

Balas | May 18, 2010

kayanya blog q kolomnya juga dah terpisah pisah deh sob, sip dah keren triknya

Balas | May 18, 2010

woah mantap nih tampilannya :)

Balas | May 19, 2010

Makasih secangkir teh dan sekerat roti, tampilan blog anda juga bagus bgt :)

Balas | May 19, 2010

assalamualaikum,wah bagus infonya nih sob oketrick,memisahkan posting dengan kolom agar tidak berantakan,pamit ahh assalamualaikum

Balas | May 19, 2010

klo ini dah ada kan kawan di blogQ, tapi dah kamu koreksi. he3x..... sbnrnya bbrp template dari bawaannya sudah ada..... jd di bbrp template trik ini gak perlu dilakukan karena sudah ada. nice post kawan. lanjutkan.............

Balas | May 19, 2010

makash bro..sdh gw cb di blog gw

Balas | July 15, 2010

Admin OK trik Gimana caranya edit di template terbaru blog supaya Kolom nya kayak diatas.. Kan gk ada to .post nya

Balas | September 19, 2010

@Uchiha Depri >> triknya emang gak ada tapi dasarnya ada tinggal kreasiin aja, nih http://oketrik.blogspot.com/2010/01/menambahkan-element-baru.html

lakukan dari langkah 1 sampai langkah 6

Balas | September 19, 2010

Saya Kan pakai template blog yang baru trus gimana caraya bia setiap pos ada kolom nya seperti diatas.. saya udah utak atik tapi gk mw dia

Balas | September 19, 2010
Anonymous

Nice Info gan....

Balas | December 30, 2010

Aduh...Trimaksih bgt tutornya...ane nyari yg ginian sampe seharian baru ketemu...Ijin copas buat pengingat...sumber tetap ane cantumin....haturnuhun pisan....kl berkenan silahkan mampir,dan mohon masukannya buat newbie yg masih dangkal di dunia blogger...

Balas | July 02, 2011

@Pangerang > sama sama, langsung meluncur ke tempat sob :)

Balas | July 02, 2011

mangstapssss bro..

langsung tak coba hee tengkyu

Balas | July 05, 2011

ok dah.,.,. thnks 4 infonya

Balas | July 10, 2011

PERmisi sob..saya sudah pasang dan sudah berhasil untuk memisahkan posting dengan kolom. tapi mau tanya,gmana caranya mengatur jarak antara kolom posting satu dengan lain nya,soalnya di blog saya jarak nya masih berdekatan/rapat.maksih sob

Balas | July 11, 2011

@Flayredho >> tambahkan margin atau padding dalam tag css yang mau di beri jarak misal : margin-left:10px; (untuk mengatur jarak ke kiri)

NB : ganti left dengan top,bottom atau right

Balas | July 11, 2011

ok saya coba dlu sob..sekali lg..makasih :-)

Balas | July 11, 2011

salam kenal, artikelnya bagus2,.. saya newbie nih, mau tanya??
tema blogger saya itu terpisah pisah, saya mau menggantinya tapi masih sayang sama tema saya, saya cuma mau membuat tema saya supaya gak tepisah2, dan yang saya gak suka adalah backgrounnya yang transparant, mohon bantuannya, coba tolong di tengok, blog saya mas untuk lebih jelasnya, www.zikotechnofun.blogspot.com saya udah coba otak2 sendiri bukannya berubah malah tambah hancur, kalo ada saran tentang tema mohon bantuannya, sebelum dan sesudahnya saya ucapin makasih.

Balas | July 12, 2011

k TKP, sip2
ini baru sukses :D
visitback

Balas | July 29, 2011

Saya Mau coba dulu ah...Thanks atas ilmu nya....

Balas | November 24, 2011
Anonymous

mas gmn caranya megubah font judul posting dan warnanya

Balas | December 04, 2011

makasih infonya gan.sukses slalu.

Balas | February 13, 2012

oya hampir lp,sy mau tanya cara bikin menu blog terpisah-pisah,dan bentuknya jadi(kotak lonjong) mksh

Balas | February 13, 2012

Post a Comment

Segera Laporkan apabila kamu menemukan Broken link (link rusak) atau ingin request dan bertanya, dengan meninggalkan pesan di bawah ini

 
Di Like sama Follow ya biar tambah Semangat >>