Kotak Postingan Terpisah

Perhatikan blog ini, terlihat kolom postingan blog saya terpisah antara satu postingan dengan postingan yang lain.

Kolom postingan terpisah seperti ini juga terlihat lebih enak dipandang dan lebih memudahkan pengunjung blog dalam membedakan isi artikel yang kita tulis, daripada kolom postingan yang menyatu atau dalam 1 kotak saja.

Jika sobat ingin blog sobat tampilannya seperti ini, berarti sobat benar telah membaca artikel ini..

Untuk pemasangan kolom yang seperti ini, sobat hanya memerlukan sedikit tambahan kode HTML saja yang nantinya akan disisipkan ke blog sobat.

Berikut langkah - langkahnya :

  1. Silahkan login dahulu ke Blogger dengan ID sobat tentunya.

  2. Klik Tata Letak.

  3. Klik tab Edit HTML.

  4. Setelah itu cari kode yang seperti ini

    .post {


  5. Kemudian tambahkan kode berikut ini tepat setelah kode tersebut


    Padding:15px; /* Jarak text post dengan garis pinggir */

    Border-top: 2px solid #000000; /* warna garis pinggir atas */

    Border-bottom: 2px solid #000000; /* warna garis pinggir bawah */

    Border-left: 2px solid #000000; /* warna garis pinggir kiri */

    Border-right: 2px solid #000000; /* warna garis pinggir kanan */

    Margin-bottom: 30px; /* jarak antara post yang satu dengan yang lainnya */



  6. Save Template.

Sekarang coba sobat lihat hasilnya, jika sobat benar meletakkan kode HTML nya Insya Allah pasti akan berhasil dan sama seperti punya saya. Tapi masih dalam bentuk kotak kaku alias lancip pada ujung - ujungnya. Nanti jika sempat akan saya tulis postingan tentang membuat garis melengkung pada sudut kolom.

Selamat mencoba !!

Berlangganan artikel terbaru via Email
Artikel Lainnya :

17 comments

Anonim
20 Mei 2009 pukul 12.04

pertamaxx yah....
bagus info nya...coba dulu yah
thanks

28 Mei 2009 pukul 02.21

maksih berbagi ilmu, ...
kawan, tapi bagaimana cara membuat postingan "garis melengkung pada sudut kolom" agar todak terlihat kaku

Thank's

28 Mei 2009 pukul 20.33

oke mas sadulur, tar saya pasti tulis postingan tentang garis melengkung pada sudut kolom, sabar yaa..

27 Juni 2009 pukul 12.58

tips nya bagus2 semua oom. serius. beberapa tips sdh di coba tapi bingung nih, di template tidak ada kode html yang sesuai. sekarang nih template yg dipakai simple box dari mas subagya.

apa mungkin semua tips di sini tidak cocok dengan template simple box yang sedang digunakan? http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif
atau perlu di sesuaikan lagi?

Tooloooong...http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif
thanks before

30 Agustus 2009 pukul 14.26

salam kenal bro..aku bru belajar ngeblog n mo nanya, gmana sih misahin artikel yg dah diposting brdasarkan isi horizontal sub navigasi?
tengkiu be4

22 Oktober 2009 pukul 23.21

bro, biar tampilannya kayak punya situ gimana?
jadi gak cuma kotak polos doank..
ada iconnya trus ada kotak pemisah judul dan dibikin lebih berwarna gitu..
tutorialnya ditunggu ya bro..
thanks...

5 Agustus 2010 pukul 00.37

thanks ya mas, infonya, salam kenal dari saya: usi2506

3 Oktober 2010 pukul 20.46

Thankz dah bnyk bntu ne infonya,,,,

bermanfaat bangt tertma bagi saya yang pemula..

udah ane terapin bossss!

13 Februari 2011 pukul 11.36

ass..
tips yg ini sdh saya coba dan berhasil
saya baru belajar
jika ingin membuat tab di bagian bahwah header seperti home,profil dst gmana caranya mas?

23 Juli 2011 pukul 11.05

top markotop...trims infox !!!

2 Agustus 2011 pukul 04.26

Mas Dody, gimana caranya agar membedakan setingan kolom komentar untuk si admin blog dengan pengujung? (seperti jenis setingan komentar milik Mas Dody di atas itu lho!?) hehehe...

20 Agustus 2011 pukul 00.43

Sblumnya sy pernah coba di template blog sy, tp sy coba lagi di template blog yang lain tp kode yg ini gk ada Gan,

.post {

Harus ditaro di bagian mana kode berikutnya itu. Mohon petunjuknya Gan. Trims be4.

24 November 2011 pukul 01.04

mksh ilmunya mas bro..

29 November 2011 pukul 06.17

Artikelnya bangus banget. Bisa buat mempercantik blog lg nich............

4 April 2012 pukul 17.35

tutorial yang sangat membantu..bisa kucoba di blogku nih... mampir ya ke blog ane ya Gan...thanks

9 Januari 2013 pukul 17.15

crip .post { tidak ada gan...!!!

Posting Komentar

Reader Community

Recent Comments