13.2.14
15

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

Gambar Tampilan Home Page
Gambar Halaman Depan (Home Page)


Gambar Tampilan Halaman Item
Gambar Halaman Item

Ok! Mari kita hilangkan sidebar tersebut pada sisi kiri/kanan artikel blog anda, tetapi sidebar akan tetap tampil pada halaman beranda.
  1. Ke- Rancangan >> Template >> EDIT TEMPLATE
  2. Cari Kode untuk menampilkan sidebar pada HTML template anda, biasanya kode tersebut diawali dengan atribut ID, atau Class
  3. Jika sudah ketemu, jangan dihapus ya, nanti menghilang beneran lagi, hehe!
  4. Cukup tambahkan kode tag kondisional pada sisi luar element kode sidebar. Sehingga tag kondisional ini akan berperan sebagai pembungkus element kode sidebarnya
Contoh-
<b:if cond='data:blog.pageType != &quot;item&quot;'>
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 != &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='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 >>
= TERIMA KASIH =

15 komentar

  1. makasis ya sis pertamax diamankan

    akhirnya tahu caranya sekarang

    BalasHapus
    Balasan
    1. sama-sama mas, semoga artikel ini dapat membantu

      Hapus
  2. kompor gas mba tutorialnya,,, izin untuk dipraktekkan....

    BalasHapus
    Balasan
    1. monggo mas,terimaksih sudah singgah di blog ini

      Hapus
  3. Blognya mantap...lancar untuk dibuka meskipun koneksi lelet, jujur nich..saya 5 bln belajar HTML sampai sekarang ngak ngerti2 hihihi

    BalasHapus
    Balasan
    1. ntar pasti lambat laun bisa kok,saya juga otodidak, selalu mengikuti perkembangan dari blog webmaster CSS.HTML dan lainnya

      Hapus
  4. Kalau dibuka lewat hp bagaimana itu ya mbak..sebab saya masih mutlak pakai hp

    BalasHapus
    Balasan
    1. peng-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

      Hapus
  5. jadi lebih ringan ya kak kalau sidebarnya nggak tampil. Biasanya widget2 blog bisa mempengaruhi loading blog :)

    BalasHapus
    Balasan
    1. setuju mbak,seperti blog mbak ririn yang tanpa sidebar,hehe
      tanpa 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 :)

      Hapus
  6. ijin yimak sob untuk nambah pengetahuan

    BalasHapus
  7. Hal itu sudah bisa mbak Alhamdulillah. Namun untuk membuat postingan dan komentarnya berada di tengah itu bagaimana ya mbak ? Tolong bantuannya. :)

    BalasHapus
    Balasan
    1. sebelumnya saya minta maaf mas, karena saya kurang paham tentang pertanyaan mas ini, membuat artikel dan komentar ditengah gimana maksudnya mas..?

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK