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
01Membuat single page blogger menggunakan tag conditional
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 == "URL yang anda inginkan"'>
... 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 == "sub-domain-anda/p/aboute-me.html"'>
#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 == "sub-domain-anda/p/aboute-me.html"'>
#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 == "sub-domain-anda/p/aboute-me.html"'>
#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.
Catatan: ubah sesuai yang anda inginkan, seperti warna gaya font dll, edit css contoh diatas sesuai element id/class struktur template anda.
02Membuat single page blogger dengan menempatkan style dari Editor HTML post
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.
Catatan: style diatas mungkin berbeda dengan element id/class struktur template anda, jadi silahkan untuk disesuaikan. kemudian trik ini memiliki kelemahan, tidak seperti tag conditional yang langsung menyembunyikan id/class element langsung ketika dimuat, melainkan jika anda gunakan untuk menyembunyikan header, maka header akan muncul terlebih dahulu sebelum element post ini termuat, dan jika element post termuat baru kemudian header akan hilang. tips saya, lebih baik ini digunakan untuk menyembunyikan element yang dimuat setelah element post termuat terlebih dahulu, seperti sidebar, footer dll.
Semoga bermanfaat pertanyaan silahkan sampaikan dikomentar....
Belum ada tanggapan untuk "Berbagai trik membuat single page"
Post a Comment