Menambah kolom untuk style blog portal berita

Setelah sukses di blog wordpress, kini style desain layout magazine atau desain ala portal berita seperti virus  dan mulai  trend  juga di kalangan pemakai blogger lover.

Ciri-ciri web atau blog portal berita bisa kita ketahui  pada tampilan halaman depannya. di mana antar mukanya  lebih banyak kolom untuk di sematkan headline berita, non healine, photo, banner dll. ( - jika ingin di adaptasikan ke dalam blog personal.  headline sama dengan postingan terbaru , non headline sama dengan  menampilkan daftar postingan terakhir ( recent post ), kemudian pernak-perniknya menampilkan slide photo, banner dll).

Sebagai gambaran tentang konsep desain blog portal, anda bisa  lihat pada theme magazine wp ini revolutiontheme atau untuk yang gratisannya bisa di lihat Mimbo Magazine .

Secara default jika dibandingkan dengan wordpress yang mengunakan Conten Managemen Sistem ( CMS ) – blog berbasis  php dan SQL , blogger yang kita gunakan ini jelas donk kalah kelas baik dari sisi pengelolaan konten secara dinamis dan juga  database yang terstruktur, namun dengan sedikit akal-akalan terutama untuk pengelolaan halaman depan-nya  kita bisa saja membuat layout blogger  menjadi dinamis ( maksudnya litle dinamais ..hiihi).

Contohnya  pada blog ini, untuk recent post-nya saya membuat dari  gadget bloglist, kemudian gadget ini saya jadikan hanya tampil pada halaman depan blog saja, sedangkan untuk halaman berikut-nya gadget tersebut saya sengaja sembunyikan. penjelasannya pernah saya tulis   pada “ membuat layout blog lebih dinamis”.

Menambah Kolom Di Bawah Postingan ( main-wrapper ).

Otre deh. Karena tulisan ini merupakan permintaan via email yang menanyakan bagaimana cara membuat recent post pada blog jaloee.blogspot.

Maka langkah pertama menambahkan dulu kolom di bawah postingan.

Pertamaxxxx

Backup dulu template kita.  untuk memudahkan jika ingin mengembalikan pada tampilan semula.

Keduaxxxxxx

Buka Edit Html kemudian cari html ini.

  <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

Note :

Untuk lebih jelasnya cari saja “Blog1” , karena Id “ blog1” ini cuman ada satu pada template kita.

Ketigaxxxxxx

Setelah ketemu, masukan atau sisipkan  setelah syntax </b:section> . kode berikut ini.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='portal-left' showaddelement='yes' >
<b:widget id='Text51' locked='false' title='Test Title 1' type='Text'/>
</b:section>
<b:section class='sidebar' id='portal-right' showaddelement='yes' >
<b:widget id='Text52' locked='false' title='Test Title 2' type='Text'/>
</b:section>
<div style="clear: both;"></div>
<b:section class='sidebar' id='portal-bottom' showaddelement='yes' >
<b:widget id='Text55' locked='false' title='Test Title 1' type='Text'/>
</b:section>
<div style="clear: both;"></div>
</b:if>

Note :

kode <b:if cond= dst> dan penutup-nya </b:if> di atas.  merupakan kode agar kolom-nya hanya tampil pada halaman depan blog. Jika pengunjung menekan salah satu link atau masuk pada halaman selanjutnya  (arsip) maka kolom ini di sembunyikan.

Keempaxxxx.

cari kode ini  </b:skin> kemudian simpan di atasnya kode berikut.

#portal-left {
  width: 48%;
  float: left;
}
#portal-right {
  width: 48%;
  float: right;
}

#portal-bottom {
  width: 100%;
  float: left;
}

Note :

1. Jika ingin membedakan lebarnya ganti saja nilai width sesuai dengan yg kita inginkan.

2. secara default  tag <h2>, <ul> dll mengikuti aturan pada sidebar blog. jika ingin mempunyai individual set , kita  harus membuatnya secara tersendiri.

3. Kemudian tambahkan Gadget Bloglist, agar yang tampil recent post blog kita masukan feed alamat kita seperti di bawah ini.

http://namamu.blogspot.com/feeds/posts/default/?start-index=2

ganti anka 2 diatas jika kita ingin menampilkan recent post berikutnya.

4. Untuk menampilkan gadget bloglist ini jadi menarik bisa di baca blog-list-widget-dan-penampakanya

Technorati Tags: Gadget,Tutorial Blogger

Page views this post: reader