Cara Menambahkan Halaman Statis (Laman) Satu Kolom (Full Width) di Blogger


Mungkin ada di antara sobat yang ingin menambahkan laman atau halaman statis di blogger. Sobat ingin melakukan itu mungkin karena sobat ingin membuat halaman tentang atau halaman sitemap atau yang lainnya. 

Dan ternyata tidak hanya itu, sobat juga ingin menambahkan laman atau halaman statis dengan tampilan satu kolom (full width) agar terlihat ringkas tanpa menampilkan widget sidebar dan footer. 

Artinya sobat menginginkan satu halaman penuh diisi sebuah postingan pada laman atau halaman statis yang sobat buat tanpa mempengaruhi tampilan halaman postingan dinamis seperti halaman copywriting milik saya ini. 

Pekerjaan membuat halaman satu kolom di halaman statis itu gampang-gampang susah. Gampangnya kode yang dibutuhkan memang sudah tersedia. Tapi sulitnya adalah mencocokkan kode tersebut dengan template yang digunakan. Karena setiap template biasanya menggunakan nama element Id dan Class yang berbeda-beda.

Nah di situlah letak kenjlimetannya, karena dibutuhkan ketelitian dan kejujuran. Hehe. 

Tapi tak apa meski agak sulit, sobat pasti bisa kok.

Trik ini menggunakan tag conditional. Secara sederhana tag conditional digunakan untuk mengatur elemen-elemen di mana akan ditampilkan atau di mana akan disembunyikan. 

Baiklah tidak perlu berpanjang lebar lagi. Berikut tutorialnya.

1. Copy kode berikut:

<b:if cond='data:blog.pageType == "static_page"'>
<style>
    .PopularPosts, .footer, .tably, #social_networks, .sidebar, .sidebar-inner, #sidebar-wrapper {
    display: none;
 }
    #post-wrapper {
    width: 101%;
 }
</style>
</b:if>
 

2. Masuk ke halaman template sobat lalu tampilkan edit HTML. Cari kode <body>. Tekan ctrl+f untuk pencarian cepat. Setelah ketemu paste kode di atas tepat di bawah kode <body>.

3. Simpan template. Apa yang terjadi? Apakah halaman statis sobat sudah berubah tampilan menjadi satu kolom? Jika sudah, maka berhasillah semua rangkaian tutorial ini. Jika belum terjadi apa-apa, maka silakan ikuti langkah ke 4.

4. Nah sekarang coba sobat sedikit serius, hehe. Perhatikan kode di atas yang berwarna biru khususnya pada kode .PopularPosts, .footer, .tably, #social_networks, .sidebar, .sidebar-inner, #sidebar-wrapper

Itulah nama-nama element Id dan Class yang saya maksud tadi. Jika setelah melakukan tutorial di atas tapi tidak terjadi apa-apa, maka itu artinya dalam template sobat terdapat nama-nama elemen Id dan Class yang berbeda dengan yang di atas. Untuk itu sobat harus berusaha mencarinya. 

Nama element Id dan Class di atas adalah nama element yang digunakan dalam template ini. Template ini keluaran Mbak Arlina, mungkin jika template sobat juga keluaran Mbak Arlina tutorial di atas akan bekerja dengan baik.

Jika nama element Id dan Class tidak cocok dengan template sobat, tak ada salahnya sobat menggunakan nama element Id dan Class yang juga biasa digunakan ini: .blog-pager, .post-footer, .feed-links, .comments, #comments, .sidebar-wrapper.

Untuk nama element Id #post-wrapper di atas yang berfungsi mengatur lebar kolom, jika Id tersebut tidak berfungsi silakan mencoba yang ini #main-wrapper. 

Demikian tutorial tentang cara menambahkan halaman statis (laman) satu kolom (full width) di blogger.

Semoga bermanfaat!


Sebelumnya
« Prev Post
Selanjutnya
Next Post »
Comments
5 Comments

5 comments

Click here for comments
17 August 2015 at 16:38 ×

info yang bermanfaat mas :D

Balas
avatar
admin
27 January 2016 at 20:49 ×

Gan, mau tanya nih, gimana ya kalo buat kondisinya seperti ini :

<IF halaman = hanya Halaman statis Sitemap dan Contact>
<Ya> - Tampilkan sidebar (semua)
<Tidak> - <IF halaman = bukan Halaman statis Sitemap dan Contact>
<Ya> - Hilangkan sidebar (semua)
<END IF>
<END IF>

Balas
avatar
admin
29 January 2016 at 20:09 × This comment has been removed by the author.
avatar
admin
29 January 2016 at 20:13 ×

Coba dengan kode ini gan...


<b:if cond='data:blog.pageType == "item"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>


Ini untuk menghilangkan sidebar untuk postingan dinamis... tapi tetep perhatikan elemen class dan idnya

Balas
avatar
admin
Thanks for your comment