Membuat Halaman Home, Berbeda dengan Halaman Posting

Hehe judulnya rada aneh.... "Membuat Halaman Home, Berbeda dengan Halaman Posting" aku juga ga tau mau kasih judul apa, jadi gini ceritanya, kalau kita mempir ke blog-nya kang rohman kita pasti heran, kok kalau kita melihat halaman pertama blog-nya kang rohman akan berformat 3 kolom, tapi kalau kita klik salah satu postingan yang ada, maka kita akan lihat blog-nya kang rohman berformat 2 kolom. bingung kan?? tapi enak juga liatnya, jadi tidak terlihat seperti blog.

Berbulan-bulan mencari akhirnya sampai di tempatnya kang jalu. kebetulan di sana ada penjelasan tentang blog dinamis alias.. "Membuat Halaman Home, Berbeda dengan Halaman Posting" so ak langsung ikuti. dengan sedikit tertatih-tatih aku agak berhasil mau lihat hasil dari utak atik asal ku sok lihat di http://nutheme.blogspot.com/


okeh langsung aja :
A . Kolom, ukuran kolom  atau widget, di tampilkan pada  halaman depan namun disembunyikan atau ( berubah ) pada halaman Item Pages – Postingan. scriptnya mengunakan ini.


<b:if cond="data:blog.url == data:blog.homepageUrl"> Letakan Kolom, ukuran kolom  atau widget anda disini, kemudian di tutup dengan </b:if>

B. kolom atau elemen yang tampil pada halaman depan dan indek label, namun tidak tampil atau ( berubah ) pada halaman Item Pages – Postingan.


<b:if cond='data:blog.pageType != &quot;item&quot;'>  Letakan Kolom, ukuran kolom  atau widget anda disini, kemudian di tutup dengan </b:if>

C. Pada halaman depan,  kolom atau elemen widget-nya tidak tampil namun akan tampil atau ( berubah ) pada halaman Item-Pages – Postingan.


<b:if cond='data:blog.pageType == "item"'>  Letakan Kolom, ukuran kolom  atau widget anda disini, kemudian di tutup dengan </b:if>


Kurang lebih maksudnya seperti ini :
jika kita ingin "Membuat Halaman Home, Berbeda dengan Halaman Posting" maka kita akan menggunakan script A.

contoh kasus-nya akan seperti ini :
Pada halaman depan atau home kita memiliki 4 buah kolom, dan pada halaman postingan kita ingin agar sebuah kolom kita menghilang, maka akan muncul hannya 3 kolom pada halaman postingan.
untuk lebih jelasnya silahkan lihat gambar :

nah pada halaman postingan gambarnya akan seperti ini :


Pertanyaanya kemanakah kolom "sidebar 1"?? nah itu yang kita bahas dari tadi...
caranya :
sebelum tulisan  ]]></b:skin>
anda telah membuat beberapa kolom yang anda beri nama sesuai dengan nama kolom-kolom kita, yang scriptnya kurang lebih seperti ini :

#content {
width: 600px;

#Sidebar-1 {
width: 200px;

#Sidebar-2 {
width: 200px;

#Sidebar-3 {
width: 200px;

#Sidebar-4 {
width: 200px;
}

Setelah tulisan  ]]></b:skin> 
Tambahkan di antaranya ( kira-kira ) , script seperti ini :

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#content {
width:400px;
}
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#Sidebar 1 { display:none;}
</b:if>
</style>

Yang artinya kurang lebih seperti ini :

<style type='text/css'>
 Artinya " saya akan menambahkan sebuah gaya pada blog saya dengan menggunakan text/css "


<b:if cond='data:blog.pageType != &quot;item&quot;'> 
Artinya " jika kondisi blog yang dibuka adalah halaman depan dan indek label maka 
#content {
width:400px;
}
Artinya " hi content berubahlah lebarmu menjadi 400px "
</b:if> ini adalah akhir dari kondisi yang saya katakan di depan". 


<b:if cond='data:blog.pageType == &quot;item&quot;'> 
Artinya " jika kondisi blog yang dibuka adalah halaman depan dan indek label maka : 

#Sidebar-1 { display:none;} sidebar-1 tidak usah muncul ya!!!

</b:if> ini adalah akhir dari kondisi yang saya katakan di depan".

</style> ini adalah akhir dari gaya yang saya telah katakan di depan.
Gimana gampang kan??
Oia kita juga bisa membuat lebih banyak kreasi seperti, content yang pada halama awal berada di kanan maka pada halaman post akan berada di bagian kiri, caranya tinggal tambahkan aja perintah float: left atau right.
Selamat mencoba...

Sumber : catalog-tutorial.blogspot.com

Untuk berlangganan
Masukan alamat email anda:

Delivered by FeedBurner

  1. tutorial yang benar2 bermanfaat, inilah yang saya cari2 dari beberapa hari lalu.... supaya tampilan templatenya tidak monoton gitu.. salut lahhh !!!

  2. terimakasih dah mampir..
    iya neh ak juga lagi bikin template yang mirip template magazine-nya kang rohman. bis bosen juga kalau template gitu2 mulu... tar klo dah siap (dan pede) aku bagi2 deh..

  3. Makasih triknya sob, boleh juga buat blogspot saia

  4. Thanks infonya
    Kursus internet secara online yang di jamin bisa belajar internet secara cepat
    dan dijamin pintar menguasai internet untuk pemula dan pendaftaran member memakai pulsa 25rb .
    Buruan Daftar!!! http://dijaminpintar.totalh.com
    thanks to this blog

  5. Gimana kalau kita mau ngembalikan seperti semula sob...
    soalnya template aku juga seperti itu, tapi ingin dirubah seperti biasa nih...
    Mohon penjelasannya sob... thanks

  6. owh..
    caranya kamu tinggal delet aja kode yang mirip-mirp seperti diatas kode yang seperti ini : style type='text/css'(aku mau tulis kodenya tapi g bisa di kolom komentar)

    jd gini...
    jika kamu sudah paham bagaimana membuat kolom jd menghilang maka otomatis kamu bisa tahu mana yang harus di hapus/delet agar kembali seperti semula....

  7. kog di sini ga pake sistim itu?

  8. Komentar ini telah dihapus oleh pengarang.
  9. kalo untuk static page ada kodeny ga bos?

  10. bos peltakannya sebelum apa??

  11. Sulit dimengerti pertamanya tapi setelah coba coba akhirnya aku bisa juga.... thanks yah

  12. Saya masih Bingung Nih ...

  13. sangat bermanfaat sob....
    lansung praktekin dah...
    thx sob,,,
    Oia, mo tukeran link gak sob,
    kalo mau langsung kabar2 gwe yak sob,,,
    salam kenal dari nubi, smoga tambah sukses sob...

  14. mantap, komplit bgt, cuman rada bingung mengaplikasikannya...maklum masih newbie.
    btw.. nice sharing mas bro..

  15. kode ini bag. a. dirubah menjadi
    ya...

  16. naim

    mantap bro, berhasil setelah dibuat kayak informasinya. trims.

  17. saya pengen kamu kasih script html blog yg tadi lah.
    soalnya saya kurang mengerti terima kasih.

  18. Postingannya bagus amat mas..
    sangat ampuh untuk blog q :

    http://blogadexme.blogspot.com

    umpan balik ea mas..
    makasih...

  19. mas aku udah bisa ngilangin sidebarnya tapi tapi tulisan postingnya gk melebar, eh malah cuma layar putih... tlg dbantu mas

  20. jujur,saya tertarik dengan triknya mas. kebetulan saya juga nyari trik ini. coz mau saya pasang iklan dihalaman home saja.dan tidak akan tampil halaman mainpostnya tapi apa kira2 loading blognya gak berat.terima kasih

  21. Mantap gan, aq cobain....sama halnya membuat halaman statis y?

  22. cara yang lebih gampang lagi ada gak gan?

  23. save dulu ahhh
    thank gan

  24. aku masih belum ngerti coz belajar blognya masih baru, mohon diajarin kang bisa email ke saya arieny_kartawijaya@ymail.com
    makasih sebelumnya.

  25. Anonim

    I do accept as true with all of the concepts you have offered on your post.
    They're very convincing and will certainly work. Still, the posts are too quick for newbies. Could you please prolong them a little from next time? Thank you for the post.
    Have a look at my website cool articles

  26. cukup aneh dan ribet tapi patut di coba

  27. bookmark dulu ah :D

  28. infonya sip gan,.,,

  29. Komentar ini telah dihapus oleh pengarang.
  30. belum ngerti gan. mau di pasang di blog kilasbarca gue

  31. thanks gan bisa , mampir balik gan :D www.hans-software.com

  32. Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
    Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.

    Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

  33. Bagua tutorialnya..buat yang mau rombak rombak biar lebih berfariasi
    Kunjungi saya ya
    Https//caraebit.blogspot.co.id

  34. terima kasih gan, dari kemarin cari cari ... akhirnya jumpa juga

Posting Komentar