BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

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

gamb 01

Technorati Tags: ,
Page views this post: reader

67 komentar:

Kristina Dian Safitry said...

pertama!!!baca dulu ya,komen nyusul,takut kedual mochal dan kang gus,he..he..

indungg said...

Yahuuuuuiiiii..........
Pertamaxxxxx......
tutor kayak gine yg ku suka dr bro jaloe....!

indungg said...

weeeekkkkk..........
keduaaxxxxx...
ketigaaaxxxxxxx...

tukang sapu radio said...

Kok pada rebutan ya... Aku ya nggak pernah dapet premium lah.. wong koneksiku lambat. Eh... tak kantongin dulu ya.. soale mo nganter orang rumah yasianan dulu.

subagya said...

Bookmark dulu.. kayanya mantab neeegh...

subagya said...

hohohohoho konsepnya seperti itu yaks... hemmmm... mantab boz....

bc said...

tambah seru aja nih....., wik sampe lupe... minal aidin walfaidzin....

JoVie said...

Oh gitu yah...*manggut-manggut tanda tak mengerti*
==========================

horeee...ke delapanxxx
*lumayan masih masuk 10 besar*

Anasku said...

ini dia yang ana cari.... patut di coba nih kang jaloee... sweep deh...

tips belajar dan blog tutorial said...

top markotop dech, aku bookmark ya kang

Syamsul Alam said...

Huancrit..... ki blog lengkap banget seh.....

Btw, (div style="clear: both;") (/div) tu gunanya buat apa mas?

Makasih atas dedikasinya... -halah-

Lumayan untuk bahan pembelajaran dan eksperimen, nih.....

—¤(rida)¤— said...

sip markosip deh pokoknya.. aku save as ya kang..

abang said...

wah top banget nih ... dibungkus ahhh ..
kebetulan mo bikin portal baru ...

good posting suhu ...thx

yudhi_blog said...

MAs tpi qo di blog saya gak bisa yah????coz section dan divnya ga da mas

gmn donk???

JALOE said...

@ Syamsul alam

secara garis besar intinya, kalau kita mnegunakan property float ( posisi elemen ) .. maka di bag akhir kita harus membuat pembatas yakni style clear:both...

JALOE said...

@ yudhi blog

masa seh kalau ngga ada section dan div bakalan aneh blog kita mas..

yudhi_blog said...

Bner deh mas gak ada pas di div main wrapper...knapa mas yah???

Oeoes said...

weh ustadz yang satu ini gak pernah mati trik, kang jaloee ijinkan aku kursus privat dunk

Brigadista said...

bajaajjj,....lambat moloo kalo mo komeentt,....sediiih akuu,.. awas ya tak bilangin ama Rhoma Iramah,..he he heee

Qittun Nyepam said...

Kalo pingin ngerubah cigazine template jadi 2 kolom seperti tutorial ini, caranya gmn kang???

kalo 3 coloumn kayaknya jadi terlalu kecil kang..

Qittun Nyepam said...

nggak jadi kang, udah ketemu kodenya.. he.he..

Anthony Harman said...

Saya pernah liat blog yg pake style tempalte kayak itu, kang. Menarik loh. Beneran kang Jaloe ngajarin sekarang

zlam said...

Yuu....ini yg gue tunggu. Gue mau coba pelan2....

gus said...

hiks...hiks...ketinggalan lage..ketinggalan lage.....

Qittun Nyepam said...

Suhu, sorry balik lagi...

kalo ingin menampilkan feed judul sama potongan postingan tanpa title blog gmn caranya suhu...

masih neubi..bie..bie.. banget nih suhu..

JALOE said...

@ Qittum Nyepam :
ini kode css nya

.blog-title{
display:none;
}

BloGendeng said...

Tengkiu somat buat infonya,bro. Mantafff

Blogger Addicter said...

layak mau saya pakai eksperimen di test blog saya akhhh..mo tak simpen dulu dah tutorial suhu nyang atu nie..hehehe..

kok lupa yah..padahal ada yg mo ditanyain..akh kali aja di BC inget lagi..wakakak..

MyAvatarInside said...

boleh juga nih tipsnya, tp yg diatas susah sesuai urutannya khan?

gratisan said...

kang tutorialnya makin mantap aja nih ... jadi pengen bikin blog di blogger deh ... mumpung ada yang seneng bantuin ... huhahahahahaaaaaa

Bani "BBoy Kodok" said...

Wah bagus nih tutorial yang ini.... asik... ngTes Ah...

makasih Kang...

iEn said...

awesome! maybe for coming soon ien mahu try untuk blog versi portal design lol! :D

awan_clickerz said...

ini berita teramat baik...kudu dicopy dulu, disebar truz ditempel di angkot angkot..
hehe....
langsung ke TKP ah,
matur nuhun kagem,


Yup !

indo-trans said...

mantabs kang?? setelah beberapa kale mengunjungi blog ini saya baru jatuh hatee kang,, ijin sedott...

Panda said...

wow keren suhu, tp Panda masih belom pny keberanian nih buat ngerombak layout lg

Lyla said...

horeee..... aku bisa kanggg... tp lagi menata ulang nih widget nya :)

harry said...

wah ....bang haji tyambah kerenzzzzz nih.....bang haji, kalo di blog aku bisa juga gag ditambahkan seperti itu?......mohon pencernaan bang....

Syahrizki Rafi' Asy'ari said...

waduh...bang haji salah ketik maksudnya pencerahan....bukan yang atas yah...hehehehehehe, ah ngikut pak subagya mau di bookmark dulu akh...kali aja mau di rubah....

firdaus.a said...

Beuh... saya mah boro-boro bisa pertamaxx ari keiu magh...

hihi... tinggaleun kareta..

Apapun itu.. Ini satu tambahan bagus bagi para 'pembedah' blog.

Nuhun nya kang.

Salam hangat.

Kristina Dian Safitry said...

penyakit males ngeblogku kambuh kang. gimana nih?

Anang said...

woh menarik sekali.... ada ilmu baru.. yang saya bisa hanya membagi sidebar menjadi dua.. kini bisa naruh sesuatu di bawah main wapper asik...

Robbie Philosophy said...

Btw Blog Portal Itu apa ya..?

Robbie Philosophy said...

O iya ADa stu lagi pertanyaan nih mas. ada tutorial bwat bingkai di sekeliling blog gk ya? klo ada mohon pemberitahuannya.....Mas jalooe.

JALOE said...

@ KDS
ya udah nyantai saja dulu.. mudahan2 nanti ada ispirasi lagi

@ Mas Anang

heheh.. mas anang pasti udah tahu.

@ Robbbie

secara singkat web portal = website yang menyediakan beraneka ragam informasi untuk para pengunjungnya..
contoh detik net.. republika.co.id dl merupkan web portal berita

kalau ttg yang kedua coba cari Outer-wrapper.. kemudian tambahkan saja misalnya border:1px solid #fff ; ....

Tips BLog said...

di coba segera...

iEn said...

It's working! thanks for a nice column!

RIeF said...

bang...
Saya coba kok ga jadi ya???
jadinya susun tiga ke bawah...
mohon bantuannya...
Thanks...

iEn said...

ah tidak.. terlalu simple.. but i luv ur hack :D

anasku said...

maaaf kang aku juga posting yang kaya gini di blog aku... tapi agak beda tapi prinsipnya sama... jiakakakaka... sukes kang

awan_clickerz said...

baca2 dulu, klo cocok !
brangkaaaat
hehe.....
Yup !

erwin said...

izin dicoba kang jaloe

Revarius said...

bro kok gagal ya lagi aq coba nih???

Revarius said...

OOk sip guru berhasil nih hehehehe.....

rohman said...

wah mantap yeuh kang jaloee. bisa di implementasikan jang magazine template berikutnya sigana ..heheheh... hatur nuhun kang jaloee tos sharing elmuna

aurora said...

salam kenal namaku aurora
mau tanya aja mas.....he..he...
copy rightnya bisa diganti ganti itu caranya gimana ya mas............
terus ituu blog panjag ama lebarnya bisa luas kaya gini caranya gimana ya mas......
thanks....
awari_shirishama@yahoo.com

JALOE said...

@ Aurora

salam kenal kembali.. untuk lebar page, jika mengunakan minima, bisa di atur nilai lebarnya pada Outer-Wrappernya..

tentang copy right yg mana yach

idotkontji said...

tak semudah membacanya mas,,, gagal terus..

Lutfi said...

@Idotkontji: coba terus sampai bisa...

sebenarnya saya sudah punya konsep tuk bikin magazine template, kalo digabungkan dengan postingan ini, so pasti lebih ngejreng :D

JALOE said...

@ Lutfi

sip saya tunggu boss kreasinya

www.solidarity forever TM-96UH said...

thx bro atas bagi-bagi ilmunya....
thx banget

dewa rental plasma said...

Sangking penting nya blognya langsung ku bookmark
Matur nuwuun

SDN SUMBERBENDO II said...

thx bos infox........

kumpulan artikel said...

mantap tems blogini

Stroke said...

boleh juga niihh dicoba tutornya..makasih udah share..

Pengobatan Herbal Thalasemia said...

makasih bnyak tutornya gan..saya coba praktekin dlu..

Darah Rendah said...

langsung dicoba k tkp..makasih ilmunya gan..

Dafiin Defandaky said...

ikut nyimak n nyerap ilmunya gan salam kenal

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial