Jumat, Desember 18, 2009

Cara Mengatur Tampilan Blog [Tampilan Di Homepage dan Di Halaman Posting]

Cara Mengatur Tampilan Blog [Tampilan Di Homepage dan Di Halaman Posting] ,Merubah tampilan blog sudah menjadi kerjaan ical tiap harinya, ini ical lakukan untuk menambah-nambah pengetahuan tentang bahasa HTML, Javascript, CSS dan lain-lain. Dari beberapa experimen yang ical lakukan ternyata membuahkan hasil juga. Ical akan share disni, tentang tips bagaimana mengatur tampilan di blog, seperti widget apa saja yang akan di tampilkan di Homepage blog, dan widget apa saja yang akan ditampilkan di halaman postingan.


Sebagai Contoh kamu bisa melihatnya di blog ical ini, di Home page terdiri dari tiga kolom, seterusnya pada halaman postingan tinggal 2 kolom yang bertukar tempat, yang kanan ke kiri dan yang di sebelah kiri ke kanan.

Sebagai contoh juga, kamu perhatikan middle-wrapper atau kolom yang ditengah di homepage, sebenarnya itu terdiri dari 6 widget tapi ical tampilkan dihomepage cuma 3, widget lain muncul saat postingan di read more(halaman postingan).

Oke berikut cara-cara yang bisa kamu lakukan

Ini kodenya

1. <b:if cond='data:blog.url == data:blog.homepageUrl'>
2. <b:if cond='data:blog.pageType == "item"'>
3. <b:if cond='data:blog.url == "URL Blog Post anda"'>

Kode pertama digunakan untuk menampilkan diHomepage blog
Kode kedua digunakan untuk menampilkan suatu elemen hanya di halaman postingan
Kode ketiga digunakan untuk menampilkan elemen ketika URL yang dimasukkan diatas dikunjungi.
Semua kode diatas di tutup dengan kode </b:if>

Berikut contoh Penggunaannya.

misalnya saja templete blog kamu terdiri dari 3 kolom maka kamu akan temukan kode yang seperti ini:

<div id='main-wrapper'>
......................
</div>

<div id='middlebar-wrapper'>
......................
</div>

<div id='sidebar-wrapper'>
......................
</div>

Kamu ini mengatur agar tidak semua kolom diatas muncul pada halaman postingan, misalnya kolom sidebar-wrapper ingin dihilangkan, kamu tambahkan aja kode ketiga. Berikut contohnya saya perlihatkan:

<b:if cond='data:blog.pageType == "item"'>

<div id='sidebar-wrapper'>
......................
</div>

</b:if>

Yang lainnya sama misalnya kolom tengah ingin dihilangkan pada halaman postingan , tinggal sisipkan aja kode kedua di middlebar-wrapper

Penggunaan dari semua kode sama , silahkan berkreasi sendiri.

Kalau masih ada yang kurang jelas silahkan saja berkomentar, nanti ical akan jawab kalau misalnya tahu....

Artikel Terkait

Cara Mengatur Tampilan Blog [Tampilan Di Homepage dan Di Halaman Posting]
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

36 komentar

21 Desember, 2009 21:07 delete

Ow . Ini seperti yang digunakan kang rohman itu ya. Keren !!
Thanks tutorialnya Om ,,,
Salam kenal ... :)

Reply
avatar
22 Desember, 2009 13:19 delete

tambah ilmu lagi..
link mu dah ku pasang..
salam jabat

Reply
avatar
22 Desember, 2009 19:41 delete

mampirrr sob....dpt info br nih....
lebih kreatif lg ya sob...sukses...!!!!

Reply
avatar
22 Desember, 2009 21:12 delete

langkah yg sangat kreatif dan menarik, kang Ical. thanks

Reply
avatar
23 Desember, 2009 18:19 delete

aku juga mau coba ach.....

salam kenal sob, sukses selalu.

Reply
avatar
24 Desember, 2009 08:53 delete

wah keren2 nih tips nya untuk blog,sekalian liat2 yg lain jg ya ^_^

Reply
avatar
24 Desember, 2009 11:26 delete

keren dan mantaps bos, thanks ya atas sharingnya, salam sukses selalu

Reply
avatar
25 Desember, 2009 09:43 delete

Wah, ilmunya makin sip aja nih...
Thanks for tips..Btw, awardnya dis ebelah mana ya?hehe

Reply
avatar
25 Desember, 2009 16:45 delete

wah...bagus infonya, ini yang saya cari, thanks yah,,,

Reply
avatar
25 Desember, 2009 22:49 delete

Wah, ini blog bener2 ok...!!!

Reply
avatar
05 Januari, 2010 13:53 delete

sob cara ngatur letak kolom gmna...??? kolom bagian blog sya jd pndah ke sebelah kanan...padahal sya gx rubah2 htmlnya...gmna tuh, mohon bantuannya....

Reply
avatar
05 Januari, 2010 15:52 delete

@Andi: coba kamu rubah atau acak2 di bagian div id='bottom', atau hapus dulu animasinya....
atau cara paling mudah blog archive blogmu, kasih panjang sja ke bawah gak usah di drop down...

Reply
avatar
06 Januari, 2010 12:49 delete

uda sya cobain sob..v tetep za gx bisa...animasinya jg uda sya hapus...

Reply
avatar
18 Januari, 2010 15:13 delete

Hai Sob, salam persabatan..... sebelum ku tuli pertanyaanku ??? ada 1 hal yang ingin aku katakan tentang Blog mu ini.. yaitu "MUANTAAAABBB" melihatnya aku kagum, dan akupun ingin punya tampilan blog spertitampilan blogmu ini,

Reply
avatar
18 Januari, 2010 15:54 delete

@Suhartono: Makasih bro, aq juga masih tahap belajar seperti kamu dan teman2 lain,,,

Reply
avatar
31 Maret, 2010 07:56 delete

thanks bro wat tutornya..sangat membantu..Saya mau tanya mas,cara supaya setiap postingan artikel tidak muncul di homepage gimana mas?Soalnya setiap saya nulis artikel semuanya muncul,conto artikelku sudah 12 tapi munsul semuanya dengan judul masing-masing.caranya gimana mas?supaya postingan artikel cuma 1 terus yang lain dijadikan sebagai link atau sejenisnya.
sebelumnya makasih mas.!ahmilsaja@yahoo.com

Reply
avatar
09 Mei, 2010 13:40 delete

cakep banget blognya...aduh HTML jadi acak2an

Reply
avatar
20 Desember, 2011 19:47 delete

bang ical, klo mau menghilangkan widget posting d home aja gmana y? mohon bantuannya dan terimakasih banyak sebelumnya,,,

http://www.novelravindra.com/

Reply
avatar
20 Desember, 2011 20:09 delete

maksunya widget itu hanya muncul di postingan, n gak muncul di home??? klo iya kodenya seperti ini.
misalnya widget itu idnya HTML6 ,,

cari kode ]]>
paste kode dibawah pas dibawah kode diatas
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#HTML6 {
display:none;
}
</style>

Reply
avatar
20 Desember, 2011 23:07 delete

maksud saya begini bang ical,,,

"halaman posting tidak akan muncul dihalaman depan saja alias homepage saja, namun akan muncul pada halaman single post, kategori, pencarian, arsip dll. Intinya hanya menghilangkan dari halaman depan saja, jd di halaman depan saya tertampilan semua seperti yg sekarang ini kecuali posting/artikel/post, yg berada di sebelah kiri persis di bawah slide, 15:12 Film Indonesia : Hafalan Shalat Delisa, dst "

mohon bantuannya dan terimakasih banyak sebelumnya,,,

http://www.novelravindra.com/

Reply
avatar
20 Desember, 2011 23:30 delete

sprti yg bang ical pernah bahas pada artikel "Cara [Tips] Hanya Judul Posting Yang Muncul Di HomePage Blog". tapi kalau maksud saya seperti ini bang "Cara [Tips] Hanya Judul Posting ( BESERTA ISI POSTING) Yang TIDAK Muncul Di HomePage Blog"

Reply
avatar
21 Desember, 2011 01:03 delete

ohhh ingin homepagenya static gitu,,, biarpun ada posting baru, ga muncul otomatis di homepage???
cara masuk aja di pengaturan blognya - post and comment -> kasih 0 post , lalu simpan

Reply
avatar
21 Desember, 2011 01:33 delete

bs sih bang ical, tp masalahnya msh ad tulisan "Tidak ada entri" dan dibawahnya msh ada tulisan "page 1.2.3 dst". yg ini bang yg saya maksud, misal di homepage bs benar2 hilang, kan bs keliatan rapi bang, dgn widget 4 biji berjajar. kira2 bs g bang di hilangkan?

mohon bantuannya dan terimakasih banyak sebelumnya,,,

http://www.novelravindra.com/

Reply
avatar
21 Desember, 2011 02:36 delete

atau gini aja pake aja kode yang pertama diatas di koment ical,,, nanti di style ganti ke
data:post.body {display:none;} ,,, bisa gak?? coba dites

Reply
avatar
21 Desember, 2011 11:59 delete

This comment has been removed by the author.

Reply
avatar
21 Desember, 2011 12:01 delete

masih gagal bang ical,,,
ada cara lain?

saya nemu kode dr blog tetangga seperti ini :

http://apps.gudangmateri.com/2011/03/menampilkan-widget-di-halaman-depan.html?showComment=1324401545326#c4176099011885101448

tp masalahnya pada waktu di save kok ada mslh dengan keterangan :

"Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "b:if" must be terminated by the matching end-tag"

pdhl kan sdh ditutup dengan

kira2 apanya y yg msh salah?

mohon bantuannya dan terimakasih banyak sebelumnya,,,

http://www.novelravindra.com/

Reply
avatar
21 Desember, 2011 14:23 delete

coba deh lihat homepage blog ical ini,, seperti ini gak yg masbro mau?? tulisan terkini gak muncul di homepage??

Reply
avatar
21 Desember, 2011 14:56 delete

betul bang ical,,,
jd klo d template saya, tulisan "Tidak ada entri" dan tulisan "pages 1,2,3" tidak tampil,,,

Reply
avatar
21 Desember, 2011 16:25 delete

pake kode dipostingan diatas yg hanya memunculkan di homepage ,,,
nanti isi #Blog1, #Blog2 {display:none;}

Reply
avatar
21 Desember, 2011 20:44 delete

hufthhh,,,
saya nyerah bang ical,,,
masih gagal,,,

Reply
avatar
21 Desember, 2011 21:16 delete

yaelah koq gitu mas,, itu tampilah di home bisa sebagus itu,, masa nyembunyiin 1 widget gak bisa,, ayolah mas, pasang kodenya di style,,,,

Reply
avatar
22 Desember, 2011 01:53 delete

pusing saya bang, udah seminggu konsep template g beres2,,,
bang ical, saya di kasih kodenya lengkap donk,,,
terima kasih banyak sebelumnya atas supportnya,,,

Reply
avatar