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

36 komentar
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....

Related Posts

36 komentar

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

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

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

    BalasHapus
  4. langkah yg sangat kreatif dan menarik, kang Ical. thanks

    BalasHapus
  5. aku juga mau coba ach.....

    salam kenal sob, sukses selalu.

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

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

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

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

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

    BalasHapus
  11. @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...

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

    BalasHapus
  13. 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,

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

    BalasHapus
  15. 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

    BalasHapus
  16. cakep banget blognya...aduh HTML jadi acak2an

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

    http://www.novelravindra.com/

    BalasHapus
  18. 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>

    BalasHapus
  19. 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/

    BalasHapus
  20. 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"

    BalasHapus
  21. 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

    BalasHapus
  22. 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/

    BalasHapus
  23. 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

    BalasHapus
  24. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  25. 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/

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

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

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

    BalasHapus
  29. hufthhh,,,
    saya nyerah bang ical,,,
    masih gagal,,,

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

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

    BalasHapus

Posting Komentar

Subscribe Our Newsletter