Cara Membuat Halaman Blog Tanpa Sidebar dan Footer

Advertisements

Advertisements

Terinspirasi dari halaman-halaman demo yang hanya menampilkan isi dari hasil tutorial yang dibahas di sebuah situs web design, timbul ide untuk membuat dan menerapkannya ke template atau tampilan halaman Blogger dan hasilnya pun lumayan berhasil.

Kali ini saya akan memperlihatkan kepada anda bagaimana cara membuat satu halaman di blog tanpa ada Sidebar/Widget dan Footer, halaman tanpa menampilkan sidebar dan Footer ini bisa anda gunakan sebagai halaman khusus untuk demo ataupun untuk keperluan lainnya.

Cara kerjanya sendiri cukup sederhana, saya menyembunyikan atau menghapus Sidebar dan Footer akan tetapi saya tetap menampilkan isi posting atau Main Wrapper dari halaman tersebut, tetapi ruang kosong yang ditinggalkan oleh Sidebar akan di isi oleh main wrapper dengan melebarkan ukurannya menjadi 100% dari lebar keseluruhan outer wrapper template.

Lihat Demo

Ada 2 kode untuk membuat halaman ini, yaitu kode untuk Template bawaan dari Blogger dan kode untuk Template yang anda terapkan dari Pihak ketiga atau Kostum Template. Pilihlah kode sesuai dengan template yang anda gunakan saat ini lalu salinlah kode tersebut.

1). Kode untuk template bawaan dari blogger

Klik ganda untuk menyalin

<style type="text/css">
/*satu halaman penuh dikostumisasi oleh teach-how.blogspot.com*/
.column-left-outer{
display: none !important;
}
.column-right-outer{
display: none !important;
}
.fauxcolumn-inner{
display:none !important;
}
.column-right-inner{
display: none !important;
}
.footer-outer {
display: none !important;
}
.blog-pager{
display:none !important;
}
.post-footer{
display:none !important;
}
.author{
display:none !important;
}
.post-labels {
display:none !important;
}
.feed-links{
display:none !important;
}
.comments{
display:none !important;
}
.column-center-outer {
width:910px!important;
}
.column-center-inner {
width:100%!important;
}
.blog-posts {
width:100%!important;
}
</style>

2). Kode untuk kostum template

Klik ganda untuk menyalin

<style type="text/css">
/*satu halaman penuh dikostumisasi oleh teach-how.blogspot.com*/
#sidebar-wrapper {
display: none !important;
}
#footer-wrapper {
display: none !important;
}
.blog-pager{
display:none !important;
}
.post-footer{
display:none !important;
}
.author{
display:none !important;
}
.post-labels {
display:none !important;
}
.feed-links{
display:none !important;
}
.comments{
display:none !important;
}
.footer-outer {
display:none !important;
}
#main-wrapper {
width: 100%!important;
float: left;
margin: 0;
.post {
width:100%
}
</style>

---

Langkah-langkah :

---

1). Masuk ke Blogger lalu klik Halaman.

2). Klik Halaman Baru lalu pilih Halaman kosong.

3). Pada tampilan ini pilih tab HTML.

4). Agar kode tersebut tidak menjadi permanent link, Pastekan semua kode yang sudah di salin tadi kedalam halaman post tersebut tepat di bawah </div>.

5). Klik Pratinjau.

6). Jika sudah selesai, klik Publish.

Jika anda ingin menambah atau membuat isi kiriman ke halaman tersebut, tempatkan isinya tepat di atas kode <style>.
Contoh :

<div dir="ltr" style="text-align: justify;" trbidi="on">

Disini adalah isi dari Teks atau Gambar yang ingin di tampilkan di halaman tanpa Sidebar dan Footer tersebut.

</div>
<style>

Sekarang setiap kali anda ingin membuat halaman tanpa menampilkan Sidebar dan Footer maka anda hanya perlu menambahkan kode tersebut untuk membuatnya terhapus. Enjoy & Happy Coding!