Kamis, 19 April 2012

0 Tutorial blog Cara Membuat 2 kolom dibawah Postingan

Chyberart - Setelah sekian lama gak otak-atik halaman blog akhirnya saya tertarik untuk mencari tau bagai mana caranya membuat 2 Kolom yang ada dibawah Postingan. Mungkin sahabat-sahabat Blogger sudah pernah melihat Blog yang dibagaian bawahnya terdapat dua kolom dibagian bawah postingnya. Biasanya kolom tersebut banyak digunakan untuk menempatkan artikel terkait dan feed berlangganan artikel.

Pada tutorial kemaren shyberart berhasil memposting tutorial cara memasang tukar link otomatis dan artikel artikel sebelumnya tetang cara menambah kolom diatas header maupun dibawah header. jika berminat silahkan baca lagi tutorialnya.

Ok...! kita fokus lagi kecara menambah 2 kolom dibawah postingan. Kalau Diblog saya ini Kolom tersebut saya gunakan untuk meletakan iklan.Nah sekarang saya ingin berbagi bagaina cara membuat 2 kolom tersebut dibawah postingan blog anda. Cara membuat nya gampangbanget masbro tinggal menambahkan sedikit kode ke dalam template anda. Hasilnya silahkan anda lihat dibagian bawah postingan ini,  kurang lebih 2 kolom yang saya maksutkan adalah seperti ini. 


Ok biar gk kelamaan langsung saja kita bahas langkah-langkahnya sebagai berikut :
  1. Masuk keakun blogger anda
  2. Pilih Rancangan => Edit HTML

  3. Centang Expand Widget Template
  4. Ok...! sekarang Cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat diatasnya

  5. #bawahpost{background:#262626 url(http://oketrik.googlecode.com/files/borderbg.gif) 49% 0 repeat-y;text-shadow:none;border:1px solid#4d4d4d;padding:15px;margin:0 0 10px;color:#a6a6a6}
    #bawahpost .related-posts{font-weight:bold;width:48%;float:right}
    #bawahpost .related-posts p{margin:0}
    #bawahpost .related-posts ul{font-weight:normal;margin:2px 0 0 10px}
    #bawahpost .langganan{width:46%;float:left;color:#a6a6a6}
    #bawahpost.langganan form{margin:0;padding:0}
    .clearfixed:after{content : ".";display:block;height:0;clear:both;visibility:hidden}.clearfixed  {display : inline-block;}


  6.  Setelah itu cari lagi kode <data:post.body/> (NB: klo kamu sudah memasang fasilitas Read more otomatis pilih kode yang kedua) dan taruh kode di bawah ini tepat di bawahnya

  7. <div class='clearfixed' id='bawahpost'>
    <div class='langganan'>
    Taruh Widget disini (kiri)
    </div>

    <div class='related-posts'>
    Taruh Widget disini (kanan)
    </div>
    </div>


    NB : kode atau tulisan yang berwarna biru tersebut dapat kamu ganti dengan kode widget yang akan kamu pasang di bawah post misal widget lagganan form dan related post (postingan terkait)
  8.  Langkah terakhir tinggal klik simpan dan lihat hasilnya
benar-benar mudah kan sobat sekarang giliran sobat untuk berkreasi. Selamat mencoba dan semoga berhasil dan jangan lupad tinggalkan pesan anda disini :).

0 komentar:

Posting Komentar