Membuat Posting dalam Kotak yang Terpisah-pisah

Kalau sebelumnya kamu telah membuat sidebar dalam kotak yang terpisah-pisah, sekarang bagaimana dengan posting "apakah bisa juga diterapkan?" Ternyata dengan sedikit menambah atau memodifiksi kode CSS, posting pun dapat ditampilkan dalam kotak yang terpisah-pisah. Penasaran dimana letak kode yang perlu ditambah atau dimodifikasi, mari bersama-sama kita ikuti trik bloggernya sebagai berikut.

  • Login ke account blogger kamu.
  • Pilih Tata Letak --> Edit HTML.
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Cari kode CSS .post antara <head> ... </head>. Kodenya lebih kurang seperti berikut.
.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Catatan :
Kode template mungkin berbeda tapi cari yang memiliki kemiripan (.post). Atau jika belum ada maka tambahkan kode tersebut.
  • Modifikasi kode .post, seperti dibawah ini.
.post {
background:#fff;
border:1px solid #6E6E6E;
margin:0 0 1.5em;
padding:0.5em;
}

Tambahan :
Rasanya kurang afdol apabila posting ditampilkan dalam kotak terpisah tanpa diikuti pula dengan komentar, karena akan kelihatan janggal dan kurang seimbang. Nah, untuk membuat komentar dalam kotak yang terpisah cukup dengan menambahkan kode berikut (tergantung karakteristik kode template masing-masing blog).
.comments {
background:#fff;
border:1px solid #6E6E6E;
margin:0 0 1.5em;
padding:0.5em;
}


Catatan :
Sesuaikan kode dengan tampilan template blog kamu, jangan asal copy-paste.
  • Kamu bisa membuat kotak posting dan komentar versi kamu sendiri dengan merubah kode-kode yang berwarna merah di atas.
  • Jangan lupa di simpan.

Selamat membuat posting dalam kotak yang terpisah-pisah...

34 komentar untuk “Membuat Posting dalam Kotak yang Terpisah-pisah”

  1. satu lagi pengetahuan saya makasih ya

    BalasHapus
  2. to Taopik Kurrohman: kalau ngga ada, tambahkan saja kodenya di bagian kode CSS "post". Agar lebih terorganisir.

    BalasHapus
  3. saya juga ada menampilkan artikel seperti sobat, namun dengan cara yang lain...

    Membuat kotak didalam Posting

    BalasHapus
  4. THx kk...

    Tips,sangat berguna!

    Baru maw bikin blog mulai dari awal lagi nih..

    BalasHapus
  5. ini dia nih yang saya cari ...
    makasih ya mas .... !!!

    :)

    BalasHapus
  6. sip dah keren juga ni tutorial salam kenal aja

    BalasHapus
  7. salam sahabat. Info yang sangat berguna kepada blogger baru macam teman. Terima kasih.

    BalasHapus
  8. waha,, mantep om,,
    tak coba ya,,
    maklum blog baru ni,,

    BalasHapus
  9. wah makasih mas..
    tp saya gak bisa code mas di atas..
    setelah di utak-utik coding bawaan template sukses jg..

    BalasHapus
  10. Kalo mau buat blog dengan template seperti blog ini bagaimana, mas?

    BalasHapus
  11. I like this forum :) [url=http://shoesrruo.co.cc/timberland+womens+pathlite+harsens+island.html]timberland womens pathlite[/url]

    BalasHapus
  12. [url=http://shoesdyrg.co.cc/zolfo-springs-cole-haan-shoes-nike-air-men.html]cole haan shoes nike air men[/url] this forum has got good design keep it up.

    BalasHapus
  13. hi every person,

    I identified optimasi-blog.blogspot.com after previous months and I'm very excited much to commence participating. I are basically lurking for the last month but figured I would be joining and sign up.

    I am from Spain so please forgave my speaking english[url=http://smartthoughtsvi.info/forum].[/url][url=http://sucoolnewideas.info/forum].[/url][url=http://motivationalquotesli.info/forum].[/url]

    BalasHapus
  14. Both of these can be enhanced and corrected through the use of virtual reality and at the same time that these things are happening an ultra-accurate three dimensional representation of the body can also be created to help you understand exactly how the pain is caused and what you can do in terms of orientating your body against it. Such technology is new and has all the potential in the world which means that it is only going to get better with time.
    [url=http://www.zimbio.com/urologe24/
    ]Frauenarzt[/url]
    People therefore prefer to shop from the convenient of their homes rather than drive to an actual pharmacy. Another reason why online pharmacies have become very popular is because it is possible to browse though a great number of medical prescriptions and drugs in a very short time. In addition to this over sweating in many cases is also a result when a person starts panicking and in under so much stress, so getting meditation can be a lot effective way of over sweating treatment. Many people face problems with mental stress and pressure that is caused when they go out with others. So now no more getting embarrassed going to parties, get together with families and friends. Birth injuries occur more often than most people believe and sometimes the injuries occur because of the negligence of doctors, nurses or the hospital. Mothers have a deep respect for the doctor and nurses who helped bring their baby into the world. Because of this a very sad and tragic result is that often the mother blames herself for the birth injury. She just cannot perceive the doctor might be negligent. Most doctors, nurses and hospitals are excellent but when malpractice is involved in a birth injury the baby and parents must be adequately compensated. And beyond compensation, it is important that responsibility be appropriately assigned so the mother [url=http://urologe24.wordpress.com/
    ]Arzt[/url] does not suffer needless emotional stress.
    http://urologe24.onsugar.com/Dr-Wedding-Die-allgemeine-Urologie-10030944

    BalasHapus
  15. [url=http://camertractor.co.cc/old+bethpage+tractor+ballast.html]tractor ballast[/url] i will keep updating and this is excellent forum

    BalasHapus
  16. [url=http://shoesmfyv.co.cc/terra_plana_womens_sylvia_boot_colmar_manor.html]terra plana womens sylvia boot[/url] good forum buddy keep it up.

    BalasHapus
  17. I found lots of valuable information in this forum

    Greetings to all


    [url=http://najgraj.pl]Gry[/url]

    BalasHapus
  18. This is really good forum i love it a lot [url=http://strollerauuh.co.cc/harman+jeep+tandem+stroller.html]jeep tandem stroller[/url]

    BalasHapus
  19. [url=http://mukwjewellery.co.cc/red-hill-disney-princess-cd-jewelry-box.html]disney princess cd jewelry box[/url] you people are really good nice to be here

    BalasHapus
  20. [url=http://dkgqpapershredder.co.cc/fellowes-paper-shredders-lake-leelanau.html]fellowes paper shredders[/url] This is really good forum i love it a lot

    BalasHapus
  21. this forum has got good design keep it up. [url=http://cookingdiql.co.cc/battle+lake+kitchenaid+double+oven.html]kitchenaid double oven[/url]

    BalasHapus
  22. In 2006, SOS Children's Villages - USA began offering free ecards for many occasions such as birthdays, thank yous, and Mother's Day.
    Blue Mountain grew quickly by allowing visitors to create greetings for others to use. Blue Mountain further expanded when
    Arts was noteworthy in this period for its sale in October 1999 to Excite@Home for $780M (which represent a price of $71 per unique monthly user).

    [URL=http://vip-ecards.cz.cc/index.html]ecards[/URL],[URL=http://vip-ecards.cz.cc/map.html]sitemap[/URL],[URL=http://vip-ecards.cz.cc/free-hall-ecard.html]free hall ecard[/URL],[URL=http://vip-ecards.cz.cc/humor-valentine-ecards.html]humor valentine ecards[/URL],[URL=http://vip-ecards.cz.cc/free-ecards-scenery.html]free ecards scenery[/URL],[URL=http://vip-ecards.cz.cc/free-baby-congratulations-ecard.html]free baby congratulations ecard[/URL],[URL=http://vip-ecards.cz.cc/ecards-from-dogs.html]ecards from dogs[/URL],
    [URL=http://vip-ecards.cz.cc/free-ecards-for-pregnancy.html]free ecards for pregnancy[/URL],[URL=http://vip-ecards.cz.cc/free-funny-ecards-for-police-college.html]free funny ecards for police college[/URL],[URL=http://vip-ecards.cz.cc/nawty-breast-ecards.html]nawty breast ecards[/URL],[URL=http://vip-ecards.cz.cc/free-african-american-ecards.html]free african american ecards[/URL],[URL=http://vip-ecards.cz.cc/russian-greeting-ecards.html]russian greeting ecards[/URL],[URL=http://vip-ecards.cz.cc/riny-day-ecards-for-free.html]rainy day ecards for free[/URL],
    [URL=http://vip-ecards.cz.cc/free-friendship-ecards.html]free friendship ecards[/URL],[URL=http://vip-ecards.cz.cc/free-birthdat-ecards.html]free birthdat ecards[/URL],[URL=http://vip-ecards.cz.cc/free-ecards-email.html]free ecards email[/URL]
    [URL=http://vip-ecards.cz.cc/funny-ecards-from.html]funny ecards from[/URL],[URL=http://vip-ecards.cz.cc/noughty-ecards.html]noughty ecards[/URL],[URL=http://vip-ecards.cz.cc/free-ecard-add-own-music.html]free ecard add own music[/URL],[URL=http://vip-ecards.cz.cc/bellydancer-info-free-bellydancer-ecards.html]bellydancer info free bellydancer ecards[/URL],
    [URL=http://vip-ecards.cz.cc/crater-lake-ecards.html]crater lake ecards[/URL],[URL=http://vip-ecards.cz.cc/ecards-rthday-free.html]ecards rthday free[/URL],[URL=http://vip-ecards.cz.cc/video-game-ecards.html]video game ecards[/URL],[URL=http://vip-ecards.cz.cc/christian-easter-ecard.html]christian easter ecard[/URL],
    [URL=http://vip-ecards.cz.cc/free-bubblegum-ecards.html]free bubblegum ecards[/URL],[URL=http://vip-ecards.cz.cc/hug-ecards-free.html]hug ecards free[/URL],[URL=http://vip-ecards.cz.cc/free-teacher-appreciation-ecards.html]free teacher appreciation ecards[/URL],[URL=http://vip-ecards.cz.cc/lent-ecards.html]lent ecards[/URL],[URL=http://vip-ecards.cz.cc/i-hate-u-ecards.html]i hate u ecards[/URL],[URL=http://vip-ecards.cz.cc/free-holiday-photo-ecards.html]free holiday photo ecards[/URL]

    BalasHapus
  23. mantab bro.....

    eh, mau klik yg di bayar gk?
    mampir sini bentar ya.....
    http://grohlvoselic.blogspot.com

    BalasHapus