修改Blogger Template,給讀者一個乾淨的閱讀環境

年紀越大,有些Blog的側邊欄多的不像話,看個文章旁邊一堆方塊閃丫閃,個人是覺得很不舒服,最近翻閱一些Blog的文章,可以在進入內文後讓側邊欄消失

• Abin's Tech Note讓側邊列 (Sidebar) 的元件只在首頁顯示/不顯示
• 堯@部落格的如何讓某些元件只在首頁/內頁顯示[BLOGGER]

另外我又加上寬度的調整就如同我的Blog進入內文後左側欄會消失,並且讓文章範圍加寬,接下來就是整個修改的過程

第一步 隱藏測邊欄
首先進入控制主頁->範本->修改HTML,找到進入文章後要隱藏的元件,我是打算將整個左側欄隱藏,所以將下列HTML

<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='一些有的沒的元件' locked='false' title='' type='HTML'/>
.....
</b:section>
</div>

修改為
<b:if cond='data:blog.pageType != "item"'>
<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='一些有的沒的元件' locked='false' title='' type='HTML'/>
.....
</b:section>
</div>
</b:if>
紅色部分是要加入的
如此簡單的步驟就能在進入內文時將左側欄隱藏

第二步 變更文章寬度
這個部分是透過修改CSS來達成的,修改方式也很簡單,首先先找到下列HTML
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='blog 文章' type='Blog'/>
</b:section>
</div>
之後在上面加入紅色部分,變為
<b:if cond='data:blog.pageType != "item"'>
<style>#main-wrapper{width:540px;}</style>
<b:else/>
<style>#main-wrapper{width:720px;}</style>
</b:if>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='blog 文章' type='Blog'/>
</b:section>
</div>

這裡需要注意的是width的寬度,在data:blog.pageType != "item"時需要跟</head>前設定#main-wrapper的width一樣,至於<b:else/>之後我則是在加上側邊欄的大小(540+180=720)

每個人的Blogger Template或許有些許不同,不過大致上的改法都不會相差太遠,如有任何疑問再留言給我囉