12/15/16

Cara Membuat Halaman Statis Full Width Di Template Default Blogger

Cara Membuat Halaman Statis Full Width  Di Template Default Blogger

Mungkin diantara anda semua ada yang menginginkan salah satu tampilan dari halaman statis atau static page menjadi full width 100 % alias tidak ada sidebar satupun yang terlihat. Untuk membuat halaman statis atau static page menjadi full width baik di template default blogger atau pun di custom template blogger, Anda harus memahami hal - hal penting ini, yaitu tag conditional, .nameclass atau element dan kode.

Namun, pada postingan kali ini saya tidak akan menjelaskan secara rinci mengenai tag conditional, nama class atau element, dan kode, tetapi akan menjelaskan hal-hal yang pentingnya saja, semoga Anda bisa memahaminya walaupun penjelasannya singkat. Untuk melihat demonya silahkan anda lihat di sini.


Untuk tag conditional yang mengatur halaman statis pada blogger adalah tag contitional ini :  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
Untuk nameclass atau element contoh : header, sidebar, main, footer, comment, dan lain-lain. Berhubung untuk membuat halaman statis menjadi full width ini menggunakan kode CSS, maka Anda harus tahu penulisan Kode CSS. Perhatikan kode CSS di bawah ini yang akan membuat halaman statis pada template default blogger menjadi full width.

.column-left-outer{display: none !important;}

.column-right-outer{display: none !important;}

.fauxcolumn-inner{display:none !important;}

.column-right-inner{display: none !important;}

.blog-pager{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;}

Kode CSS di atas adalah kumpulan dari nameclass atau element yang akan kita hilangkan. untuk selanjutnya adalah bagaimana cara penyimpanan kode CSS tersebut. Nah pada bagian ini Anda mempunyai 2 pilihan, yaitu  membuat halaman statis atau static page full width pada halaman tertentu saja dan pilihan kedua membuat semua halaman statis atau static page full width pada semua halaman.

Membuat halaman statis atau static page full width pada halaman tertentu saja.

Untuk penyimpanan pada halaman tertentu Anda perlu menambahkan kode deklarasi CSS sebelum menyimpannya pada halaman statis atau static page yang ingin Anda buat menjadi full width.

<style>

<!-- simpan kode css disini -->

</style>

<style type="text/css">

<!-- simpan kode css disini -->

</style>

<style scoped="" type="text/css">

<!-- simpan kode css disini -->

</style>

Maka hasil penggabungan kodenya akan seperti di bawah ini
<style>
.column-left-outer{display: none !important;}

.column-right-outer{display: none !important;}

.fauxcolumn-inner{display:none !important;}

.column-right-inner{display: none !important;}

.blog-pager{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>

Setelah anda menggabungkan seperti di atas, langkah selanjutnya anda tinggal menyimpan kode tersebut pada halaman statis atau static page yang ingin dibuat menjadi full width.

Membuat semua halaman statis atau static page full width pada semua halaman.

Untuk membuat semua halaman statis atau static page menjadi full width Anda perlu menambahkan tag conditional, deklarasi CSS, dan kode CSS nya. berikut di bawah ini penulisannya.

Tag condisional awal.
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

</b:if>

Menambahkan Deklarasi CSS
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type="text/css">

</style>
</b:if>

Menambahkan kode CSS
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type="text/css">
.column-left-outer{display: none !important;}

.column-right-outer{display: none !important;}

.fauxcolumn-inner{display:none !important;}

.column-right-inner{display: none !important;}

.blog-pager{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>
</b:if>

Setelah semuanya digabungkan seperti di atas selanjuttnya Anda masuk ke bagian Edit HTML dan simpan kode di atas tepat di atas atau sebelum kode </head>.
Mungkin itu saja tutorial cara membuat halaman statis full width di template default blogger yang bisa saya sampaikan. Semoga postingan ini bisa membantu. Jika masih mengalami kesulitan atau ada kode yang tidak berjalan silahkan tinggalkan komentar di bawah.

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Silahkan berkomentar sesuai dengan topik.