Thursday, 7 June 2012

Static Fullpage Blogspot

Membuat halaman blogspot tanpa sidebar yang biasanya disebut dengan Static Fullpage Blogspot dan adapula yang menyebutnya dengan full width page yaitu halaman penuh satu kolom tanpa sidebar pada blogger.

Banyak master blogspot yang sudah membuat tutorial tentang hal ini, dan saya hanya ingin mempelajarinya dengan menuliskan di blog ini agar tidak lupa :)

Cara membuat halaman full width pada static page blogger diantaranya:

Periksa elemen dari template blogspot:

Pada template saya, elemennya adalah sidebar-wrapper dan main-wrapper 


Hilangkan sidebar berdasarkan class atau id pada layout template blogger dan atur ukuran dari konten:

Letakkan salahsatu kode berikut diatas </head>
Menghilangkan sidebar pada halaman artikel atau halaman statis tertentu
<b:if cond='data:blog.url == &quot;http://your_page_url&quot;'>
<style type='text/css'>
#main-wrapper {
width:95%;
float:none;
margin:0 auto;
padding:0 auto;
}
#comment-holder {
width:100%;
}
#sidebar-wrapper {
display: none;
}
.post-title {
text-align:center;
padding:15px;
}
</style>
</b:if>


Menghilangkan sidebar pada seluruh halaman statis
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#main-wrapper {
width:95%;
float:none;
margin:0 auto;
padding:0 auto;
}
#comment-holder {
width:100%;
}
#sidebar-wrapper {
display: none;
}
.post-title {
text-align:center;
padding:15px;
}
</style>
</b:if>

Menghilangkan sidebar pada halaman beranda
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#main-wrapper {
width:95%;
float:none;
margin:0 auto;
padding:0 auto;
}
#comment-holder {
width:100%;
}
#sidebar-wrapper {
display: none;
}
.post-title {
text-align:center;
padding:15px;
}
</style>
</b:if>

DEMO

No comments:

Post a Comment