Artikel Tampil Full Tanpa Sidebar
Belajar struktur Template HTML Code tidaklah begitu sulit, yang dibutuhkan hanya pemahaman kode tag pembungkus pada kode tersebut, sehingga kita akan tahu baris, kolom dan letak kode tersebut dan akan menampilkan apa kode itu pada blog. Seperti yang akan saya share di artikel kali ini, tentang bagaimana menghilangkan sidebar pada halaman item, sehingga saat artikel terbuka maka sidebar akan menghilang karena sudah kita usir dari rumah, hehe..!!
Pada artikel sebelumnya, saya sudah kemas kodenya sehingga untuk menampilkan artikel full tanpa sidebar hanya menggunakan tombol pemicu untuk membuka perintah layar penuh, detailnya anda boleh lihat di artikel tentang Menampilkan Postingan Blog Secara Layar Penuh.
Mungkin hal ini yang dirasakan mas +sarofudin uzumaki, begitupun saya bahkan anda merasa sedikit pusing ketika mengunjungi sebuah situs yang super komplit disegala penjuru sisi, baik disisi kiri maupun kanan artikel, tujuannya baik yaitu dengan menyediakan semua fasilitas yang ada pada blog kepada pengunjung, tetapi anda juga harus ingat, Artikel anda yang yang dibutuhkan oleh mereka bukan fasiltas blog anda.
Jangan sampai mata pengunjung/pembaca gentayangan melirik sisi kiri dan kanan artikel yang (kebetulan dipenuhi oleh gambar gadis-gadis cantik, apalagi gambar gadis setengah telanjang berupa iklan video), sementara artikel anda diabaikan.
Jika anda merasa sidebar di blog itu sedikit sangat mengganggu, ayo kita hilangkan saja! Tetapi, jangan takut saya hanya menggunakan kode Tag Kondisional untuk menghilangkannya, sehingga sidebar tidak akan tampil pada halaman tertentu saja.
Kurang lebih akan seperti gambar berikut tampilannya
Ok! Mari kita hilangkan sidebar tersebut pada sisi kiri/kanan artikel blog anda, tetapi sidebar akan tetap tampil pada halaman beranda.
Pembahasan-
Kenapa saya menyebutkan 2 kode atribut yaitu id dan class, karena setiap template memilki ID-nya masing-masing. Sebagai contoh template saya menggunakan kode atribut ini
Sebagai catatan, atribut id='sidebar-wrapper' diatas belum tentu sama dengan template yang anda gunakan. Intinya, kamu cari saja elemen <b:section> yang memiliki class='sidebar', kemudian temukan elemen divisi yang menjadi pembungkus dari tulang sidebar tersebut. Terakhir tinggal letakkan saja tag kondisional di luar objek tersebut.
Kode tag kondisional yang saya beri warna merah.
Widget-widget yang berada di dalam seksi sidebar juga bisa menjadi panduan yang baik.
Jika masih menemukan kebingungan silahkan tanyakan pada kolom komentar. Sebelum saya akhiri, saya mohon maaf secara pribadi karena menyertakan nama mas SAROFUDIN dalam artikel ini, Semoga artikel ini dapat membantu. Terimakasih
Pada artikel sebelumnya, saya sudah kemas kodenya sehingga untuk menampilkan artikel full tanpa sidebar hanya menggunakan tombol pemicu untuk membuka perintah layar penuh, detailnya anda boleh lihat di artikel tentang Menampilkan Postingan Blog Secara Layar Penuh.
Mungkin hal ini yang dirasakan mas +sarofudin uzumaki, begitupun saya bahkan anda merasa sedikit pusing ketika mengunjungi sebuah situs yang super komplit disegala penjuru sisi, baik disisi kiri maupun kanan artikel, tujuannya baik yaitu dengan menyediakan semua fasilitas yang ada pada blog kepada pengunjung, tetapi anda juga harus ingat, Artikel anda yang yang dibutuhkan oleh mereka bukan fasiltas blog anda.
Jangan sampai mata pengunjung/pembaca gentayangan melirik sisi kiri dan kanan artikel yang (kebetulan dipenuhi oleh gambar gadis-gadis cantik, apalagi gambar gadis setengah telanjang berupa iklan video), sementara artikel anda diabaikan.
Jika anda merasa sidebar di blog itu sedikit sangat mengganggu, ayo kita hilangkan saja! Tetapi, jangan takut saya hanya menggunakan kode Tag Kondisional untuk menghilangkannya, sehingga sidebar tidak akan tampil pada halaman tertentu saja.
Kurang lebih akan seperti gambar berikut tampilannya
Gambar Halaman Depan (Home Page)
Gambar Halaman Item
Ok! Mari kita hilangkan sidebar tersebut pada sisi kiri/kanan artikel blog anda, tetapi sidebar akan tetap tampil pada halaman beranda.
- Ke- Rancangan >> Template >> EDIT TEMPLATE
- Cari Kode untuk menampilkan sidebar pada HTML template anda, biasanya kode tersebut diawali dengan atribut ID, atau Class
- Jika sudah ketemu, jangan dihapus ya, nanti menghilang beneran lagi, hehe!
- Cukup tambahkan kode tag kondisional pada sisi luar element kode sidebar. Sehingga tag kondisional ini akan berperan sebagai pembungkus element kode sidebarnya
<b:if cond='data:blog.pageType != "item"'>
element html kode sidebar
</b:if>
element html kode sidebar
</b:if>
Pembahasan-
Kenapa saya menyebutkan 2 kode atribut yaitu id dan class, karena setiap template memilki ID-nya masing-masing. Sebagai contoh template saya menggunakan kode atribut ini
<b:if cond='data:blog.pageType != "item"'>
<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='Sahabat Blogger 77' type='Text'/>
</b:section>
</div>
</b:if>
<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='Sahabat Blogger 77' type='Text'/>
</b:section>
</div>
</b:if>
Sebagai catatan, atribut id='sidebar-wrapper' diatas belum tentu sama dengan template yang anda gunakan. Intinya, kamu cari saja elemen <b:section> yang memiliki class='sidebar', kemudian temukan elemen divisi yang menjadi pembungkus dari tulang sidebar tersebut. Terakhir tinggal letakkan saja tag kondisional di luar objek tersebut.
Kode tag kondisional yang saya beri warna merah.
Widget-widget yang berada di dalam seksi sidebar juga bisa menjadi panduan yang baik.
Jika masih menemukan kebingungan silahkan tanyakan pada kolom komentar. Sebelum saya akhiri, saya mohon maaf secara pribadi karena menyertakan nama mas SAROFUDIN dalam artikel ini, Semoga artikel ini dapat membantu. Terimakasih
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul= Artikel Tampil Full Tanpa Sidebar
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
kompor gas mba tutorialnya,,, izin untuk dipraktekkan....
BalasHapusmonggo mas,terimaksih sudah singgah di blog ini
HapusBlognya mantap...lancar untuk dibuka meskipun koneksi lelet, jujur nich..saya 5 bln belajar HTML sampai sekarang ngak ngerti2 hihihi
BalasHapusntar pasti lambat laun bisa kok,saya juga otodidak, selalu mengikuti perkembangan dari blog webmaster CSS.HTML dan lainnya
HapusKalau dibuka lewat hp bagaimana itu ya mbak..sebab saya masih mutlak pakai hp
BalasHapuspeng-editan kode HTML template hanya bisa kita lakukan dengan PC mbak, karena aplikasi HP belum mendukung untuk menampilkan bentangan kode-kode tersebut, nah untuk ol lewat HP pengaturan ini sudah secara otomatis disesuaikan, karena pada template sudah menyediakan kode khusus tampilan untuk mobile
Hapusjadi lebih ringan ya kak kalau sidebarnya nggak tampil. Biasanya widget2 blog bisa mempengaruhi loading blog :)
BalasHapussetuju mbak,seperti blog mbak ririn yang tanpa sidebar,hehe
Hapustanpa mengubah desain awal templatenya, widget sidebar bisa kita atur tampil hanya pada halaman beranda,tetapi tidak akan tampil pada halaman item,lebih praktis sedikitlah mbak :)
ijin yimak sob untuk nambah pengetahuan
BalasHapusdipersilahkan disimak mas,hehe
Hapussama-sama mas, semoga artikel ini dapat membantu
BalasHapusHal itu sudah bisa mbak Alhamdulillah. Namun untuk membuat postingan dan komentarnya berada di tengah itu bagaimana ya mbak ? Tolong bantuannya. :)
BalasHapussebelumnya saya minta maaf mas, karena saya kurang paham tentang pertanyaan mas ini, membuat artikel dan komentar ditengah gimana maksudnya mas..?
HapusSB77 Mantap
BalasHapus