Minggu, 26 Juli 2009

MEMBUAT KOTAK POSTING TERPISAH

Membuat kotak posting terpisah sebagian banyak yang menyukai, karena kelihatan lebih rapi disamping dapat mengatur border warna yang lebih menarik kemudian dikombinasikan dengan warna background membuat kolom post lebih cerah.
Kali ini saya mencoba untuk berbagi informasi, bagaimana membuat kotak posting terpisah-pisah disetiap judul dengan cara 2 pilihan :

  1. Kotak Posting terpisah dengan bentuk garis kotak
    1. Login ke"Blogger" dengan user ID Anda
    2. Pilih "Tata Letak"
    3. Pilih "Edit HTML"
    4. Cari Kode berikut .post {
    5. Copy "kode dibawah" ini dan letakan dibawah kode tersebut



      Padding:10px; /* Jarak text post dengan garis pinggir */
      Border-top: 2px solid #D8D8D8; /* warna garis pinggir atas */
      Border-bottom: 2px solid #D8D8D8; /* warna garis pinggir bawah */
      Border-left: 2px solid #D8D8D8; /* warna garis pinggir kiri */
      Border-right: 2px solid #D8D8D8; /* warna garis pinggir kanan */
      Margin-bottom: 30px; /* jarak antara post yang satu dengan yang lainnya */


    6. Simpan Template


    Contoh kotak posting terpisah garis lurus

    KOTAK POSTING I bentuk garis kotak

    KOTAK POSTING II bentuk garis kotak



  2. Kotak Posting terpisah dengan garis melengkung disetiap sudut

  1. Login ke Blogger dengan user ID Anda
  2. Pilih Tata Letak
  3. Pilih Edit HTML
  4. Cari kode h2.date-header {
  5. Letakan kode dibawah ini tepat dibawah kode tersebut

    border-left:3px solid #A9D0F5;
    border-right:3px solid #A9D0F5;
    border-top:3px solid #A9D0F5;
    border-bottom:0px solid #A9D0F5;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;



  6. Kemudian Anda cari kode .post-body {
  7. Letakan kode dibawah ini tepat dibawah kode tersebut


    border-right:3px solid #A9D0F5;
    border-left:3px solid #A9D0F5;


  8. Berikutnya cari kode .post-footer {
  9. Letakan kode dibawah ini tepat dibawah kode tersebut


    border-left:3px solid #A9D0F5;
    border-right:3px solid #A9D0F5;
    border-top:0px solid #A9D0F5;
    border-bottom:3px solid #A9D0F5;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;


  10. Simpan Template
Contoh Kotak posting dengan garis melengkung di setiap sudut




15 komentar:

Franky mengatakan...

wah ..menarik nih, bisa dicoba dulu

salvation mengatakan...

salam kenal teman,
tutorial'a menarik banget, dah lama cari ini tapi g ketemu2.
thanks alot yach..

drhyudi mengatakan...

perlu dicoba mas n thanks tipsnya

roza mengatakan...

@drhyudi,trims kembali, semoga bermanfaat dan atas kunjungannya

Anonim mengatakan...

There is a huge variety to choose from if you think links of london outside the box with Non Diamond Wedding Rings. First option to consider is whether you want to links of london bracelet purchase white gold or yellow gold, most women have a preference and you do not want to links of london charms pick the wrong one.The decision about white or yellow gold behind you now you can links of london charms move forward to the determinations about the setting and the jewels to be placed on the hand of your future bride. Does she want to have her birthstone? Find out whichlinks of london watches month she was born in to figure out what stone is hers as each month is a different color.

Ary_Putra mengatakan...

Thanks Infonya bro...

naskah mengatakan...

Terimakasih Atas Tutorialnya....

pru proteksi mengatakan...

Wow mantab gan Informasinya

Bung Dwijaya mengatakan...

Ruang posting jadi kelihatan lebih rapi dengan menggunakan trik ini. Nice trick.

Mine mengatakan...

@Dwijaya, semoga bermanfaat, trims sudah mampir

erwin syah mengatakan...

Numpang mampir Sob, trimakasih informasinya..tetap semangat
http://nasi-pulen.blogspot.com/

topspot-official mengatakan...

Thanks buat tutorialnya sobat! :)

Cerita Dewasa Terbaru mengatakan...

mantab tutorial nya , ijin coba dulu sob , salam kenal yah

Akun Bloger mengatakan...

makasih ya gan berhasil di blog ane.
follow balik blog ane ya gan
komunalis.blogspot

Rizal Liano mengatakan...

ok

Poskan Komentar

KLIK AJA DEH

EIMIMO

CASH111

PAYZA

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Bluehost Coupons