Sidebar Hanya Tampil Selain pada Halaman Artikel

Beberapa orang mungkin merasa sedikit pusing ketika menemui sebuah situs dengan elemen halaman yang super komplit di segala penjuru, baik di sisi kanan maupun sisi kiri artikel. Mungkin tujuanmu memang baik, yaitu menyediakan semua fasilitas yang ada kepada para pembaca. Monitoring komentar, posting terbaru, daftar isi, ikon-ikon jejaring sosial dan masih banyak lagi. Tapi kalian harus ingat satu hal terpenting mengenai apa itu blog: ARTIKEL!

Jangan sampai mata para pembaca gentayangan melirik sisi kiri dan kanan artikel (yang kebetulan dipenuhi oleh gambar gadis-gadis cantik), sementara artikel itu sendiri dilupakan. Sangat tidak menyenangkan apabila pada akhirnya kamu menemukan komentar-komentar yang tidak bermutu di dalam artikelmu.

Kadangkala, seseorang memutuskan untuk menuliskan komentar dahsyat tidak semata-mata karena mereka tidak menyukai artikelmu, tetapi tidak jarang juga karena mereka merasa kebingungan.

Sidebar. Sebuah blok kecil dalam blog yang seharusnya menjadi prioritas pandangan ke dua justru menjadi berkuasa penuh karena munculnya godaan-godaan setan pernak-pernik blog yang merajalela merangsang nafsu birahi umat manusia di muka bumi ini. Jika kalian merasa bahwa sidebar di blogmu itu sangat mengganggu, ayo kita hilangkan saja!

Jangan khawatir, di sini kita akan menghilangkannya dengan , jadi sidebar hanya akan menghilang pada halaman tertentu saja.

Pertama-tama, masuklah ke tab Rancangan kemudian pilih Edit HTML.

Cari baris kode yang kurang lebih tampak seperti ini:

<div id='sidebar-wrapper'> 
    <b:section class='sidebar' id='sidebar' preferred='yes'> 
        <b:widget id='Label1' locked='false' title='Kategori Posting' type='Label'/> 
        <b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/> 
        <b:widget id='Text1' locked='false' title='Obrolan Monyet' type='Text'/> 
    </b:section> 
</div>

Sisipkan tag kondisional halaman item di luar elemen tersebut, sehingga tag kondisional tersebut sekarang berperan sebagai pembungkus sidebar. Seperti ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'> 
    <div id='sidebar-wrapper'> 
        <b:section class='sidebar' id='sidebar' preferred='yes'> 
            <b:widget id='Label1' locked='false' title='Kategori Posting' type='Label'/> 
            <b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/> 
            <b:widget id='Text1' locked='false' title='Obrolan Monyet' type='Text'/> 
        </b:section> 
    </div>
</b:if>

Klik Simpan Template.

Sebagai catatan, atribut id='sidebar-wrapper' itu tidak mutlak, setiap template mempunyai ID-nya masing-masing. Intinya adalah, kamu cari saja elemen <b:section> yang memiliki class='sidebar', kemudian temukan elemen divisi yang menjadi pembungkus dari tulang-belulang sidebar tersebut. Terakhir tinggal letakkan saja tag kondisional di luar objek tersebut.

Widget-widget yang berada di dalam seksi sidebar juga bisa menjadi panduan yang baik.

Berikut ini adalah contoh tampilan saat awal pertama kamu mengunjungi blogmu:

tutorial cara menampilkan sidebar hanya di halaman muka
Halaman depan.


Setelah kamu memasuki halaman artikel (menekan tombol Baca Selengkapnya atau link Komentar), maka hasil tampilannya akan berubah menjadi seperti ini:

sidebar hanya tampil di halaman muka
Setelah masuk ke halaman item.

7 Komentar

  • Admin

    satu ilmu lagi aku dapat :)

  • Nana

    makasi mas buat tutorialnya, ijin menggunakan ilmunya di blog saya ^_^

  • budkalon

    Mungkin untuk membuat lebar postingan artikelnya memenuhi bagian kanan juga menggunakan peraturan seperti ini:

    <style type='text/css'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    #main-wrapper { width:100%;}
    </b:if>
    </style>

    Cuman nambahin aja :D Soalnya awalnya saya juga bingung membuat si postingannya 100%

  • Adi

    please bang tolongin saya kenapa border sedibarbnya tidak ikut hilang? tricknya uda berhasil di terapin cuman bordernya aja tdk ikut hilang jadi kelihat jelek...please tolong solusinya

Komentar telah ditutup.