GO Blog

Single page/halaman penuh adalah satu halaman yang tidak dihiasi oleh widget atau pun element sidebar. ada tujuan dan kebutuhan tertentu sehingga author atau pemilik blog membuah sebuah single page di blognya, misalnya untuk menempatkan forum, membuat halaman daftar isi, aboute blog juga alasan lainnya. untuk demo, silahkan klik link aboute atau forum pada blog ini. kali ini kita akan mencoba untuk membuatnya bagi sobat yang ingin tahu caranya, silahkan ikuti trik berikut ini.

Saya akan memberikan dua cara untuk membuat single page/halaman penuh di blogger, yaitu dengan cara menggunakan tag conditional dan dengan cara memasukkan style melalui Editor Laman/Entri. Langsung ke cara pertama


Sebelum sobat melakukan trik ini, sebaiknya lihat dulu beberapa element blog anda agar nanti anda tidak bingung ketika memutuskan ID/Class mana dalam element yang ingin di sembunyikan, misal #main_wrapper, #out-wrapper, #page-wrapper, .post, .side-wrapper atau #sidebar_wrapper karena ini penting untuk nanti menentukan element mana yang akan di sembunyikan. yang perlu anda ingat, setiap template memiliki ID dan Class yang berbeda jadi silahkan dipahami struktur template anda.

Untuk membuat single page menggunakan tag conditional, silahkan login terlebih dahulu ke akun blogger anda
Pilih Template -> Edit HTML

sekarang kita buat tag conditional seperti di bawah ini

<b:if cond='data:blog.url == &quot;URL yang anda inginkan&quot;'>
... css disini ...
</b:if>

lalu kita letakkan css di dalamnya untuk mengatur dan menyembunyikan element ID/Class tertentu. misal kita akan membuat single page untuk aboute me dengan menghilangkan semua ID/Class header, sidebar dan footer maka contohnya seperti berikut:

<b:if cond='data:blog.url == &quot;sub-domain-anda/p/aboute-me.html&quot;'>
#header-wrapper, #sidebar-wrapper, #footer-wrapper { display:none; }
</b:if>

tag conditional diatas telah menghilangkan semua id/class header, sidebar dan footer namun belum mengatur tinggi, lebar, jarak, warna latar, warna font, gaya font dan lain sebagainya dalam halaman tersebut, maka kita harus memberikan tambahan style, misal:

#main-wrapper { width:100%; heigth:100%; background-color: red; padding: 1em; margin: 2em; }
.post  { width: 100%; background: white; margin:0; padding:0;}
.post h3 { font-family: arial 14px georgia, sanserif; font-weight: bold; color: blue; text-decoration: underline; line-height:1.2em; }

style diatas, kita masukkan kedalam tag conditional tadi, menjadi:

<b:if cond='data:blog.url == &quot;sub-domain-anda/p/aboute-me.html&quot;'>
#header-wrapper, #sidebar-wrapper, #footer-wrapper { display:none; }
#main-wrapper { width:100%; heigth:100%; background-color: red; padding: 1em; margin: 2em; }
.post  { width: 100%; background: white; margin:0; padding:0;}
.post h3 { font-family: arial 14px georgia, sanserif; font-weight: bold; color: blue; text-decoration: underline; line-height:1.2em; }
</b:if>

Lalu letakkan diatas kode tag </head> dan bungkus dengan <style>...</style> seperti berikut ini:

<style>
<b:if cond='data:blog.url == &quot;sub-domain-anda/p/aboute-me.html&quot;'>
#header-wrapper, #sidebar-wrapper, #footer-wrapper { display:none; }
#main-wrapper { width:100%; heigth:100%; background-color: red; padding: 1em; margin: 2em; }
.post  { width: 100%; background: white; margin:0; padding:0;}
.post h3 { font-family: arial 14px georgia, sanserif; font-weight: bold; color: blue; text-decoration: underline; line-height:1.2em; }
</b:if>
</style>

lalu simpan perubahan template anda.




Untuk membuat single page dengan cara ini memang lebih mudah, kita hanya perlu membuat style dan menempatkan dalam posting.

Masuk ke akun blogger anda
Pilih Entri Baru/Laman baru, jika anda telah membuat posting/laman yang ingin di ubah menjadi single page buka saja dan edit post/laman lalu letakkan kode style berikut di dalamnya melalui tab editor HTML

<style>
#header-wrapper, #sidebar-wrapper, #footer-wrapper { display:none; }
#main-wrapper { width:100%; heigth:100%; background-color: red; padding: 1em; margin: 2em; }
.post  { width: 100%; background: white; margin:0; padding:0;}
.post h3 { font-family: arial 14px georgia, sanserif; font-weight: bold; color: blue; text-decoration: underline; line-height:1.2em; }
</style>

Simpan hasil pekerjaan atau hasil edit anda.


Semoga bermanfaat pertanyaan silahkan sampaikan dikomentar....