網誌和網站不同，在首頁的版面就會包羅豐富完整落落長的資訊，俺很懶得在選帖看的時候還要一直向下拉捲軸，所以就希望將首頁的每帖文章精簡顯示。或成兩欄，或成多欄。
我目前已知兩種作法：
1. 改變文章和日期的寬度，將每帖設成 ½ 的大小，帖子便被切成兩欄並排顯示。
原文出處：Amanda Kennedy - How to display Blogger posts side by side
2. 利用Child選取器搭配頁面類型設定。
1. 改變文章和日期的寬度，將每帖設成 ½ 的大小，帖子便被切成兩欄並排顯示：（實作）
Step①：取得三欄式的Minima範本做修改：需先把左邊或右邊的側欄消掉一個，形成兩欄。
關於Minima範本：Muser Meta - 3 column Minima Templates modded for blogger beta by iMessengr.com - from [ metamuse ]
Minima範本來源：3 column Minima Templates For New Blogger - from iMessengr.net
Minima範本下載：MinimaStep②：可用記事本或是其他軟體打開編輯（Ex.Notepad++，Brackets）。
按 Ctrl+F 尋找下列原始碼做更改。
一、調節中間區二欄寬度：文章和側欄相加後寬度不得超過包覆的區塊（outer-wrapper）。
㊀尋找下列碼，剪下紅色的三行
下列語法貼到 </b:skin>之後，post的寬度加上相距離的寬度要 ≦ main-wrapper寬。
如果要變成三欄，就是 post×3 + marign×3 ≦ main-wrapper寬。
一、調節中間區二欄寬度：文章和側欄相加後寬度不得超過包覆的區塊（outer-wrapper）。
#outer-wrapper { width: ●●●px;} /*原始值⇢ex. 940*/
#main-wrapper { width: ●●●px;} /*原始值⇢ex. 620*/
.sidebar-wrapper { width: ●●●px;} /*原始值⇢ex. 320*/
二、刪除原始值，讓頭尾不窄於中間區，隨網頁無限蔓延#main-wrapper { width: ●●●px;} /*原始值⇢ex. 620*/
.sidebar-wrapper { width: ●●●px;} /*原始值⇢ex. 320*/
#header-wrapper { width:●●●px;} /*①刪除原始值或 ②原始值⇢940同寬*/
#header .description { max-width:●●●px; /*⇠刪除*/ }
#footer { width:●●●px;} /*①刪除原始值或 ②原始值⇢940同寬*/
三、固定主要內容區下的顯示頁數區塊。#header .description { max-width:●●●px; /*⇠刪除*/ }
#footer { width:●●●px;} /*①刪除原始值或 ②原始值⇢940同寬*/
#blog-pager { text-align: center;}
⇊⇊⇊ /*設定寬度和清空左右*/
#blog-pager { width: 620px; clear: both; text-align: center;}
四、確定每篇日期出現在正確的位置。⇊⇊⇊ /*設定寬度和清空左右*/
#blog-pager { width: 620px; clear: both; text-align: center;}
㊀尋找下列碼，剪下紅色的三行
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'> /*剪下紅色的三行碼*/
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
（……略）
㊁找出<a expr:name='data:post.id'/>，將剛剪下來（Ctrl+X）的三行貼在它下面。<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'> /*剪下紅色的三行碼*/
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
（……略）
<a expr:name='data:post.id'/>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
五、讓文章形成兩欄並排的關鍵CSS：<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
下列語法貼到 </b:skin>之後，post的寬度加上相距離的寬度要 ≦ main-wrapper寬。
如果要變成三欄，就是 post×3 + marign×3 ≦ main-wrapper寬。
<b:if cond='data:blog.pageType != "item" '>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
</style>
</b:if>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
</style>
</b:if>
Step③：將修改過的Minima範本貼進「範本」➤「編輯HTML」並儲存即可。
友情提示：修改前記得備份沒改過的Minima範本，修改成功亦要備份改好的範本。
因為，也許下一步就想要改成其他種類的版面格式。
顯示效果如下，因為我後來初版把側欄都刪掉了，變成只有文章區塊，所以只能另外弄效果圖。
關於如何讓側欄消失，請參閱 Increase Page Layout Size by hiding Sidebar in Blogger
它的作法是隱藏（display: none;）。
初版時我不用側欄，所以我的作法是直接到Body區把側欄的code刪掉，效果如下：
因為，也許下一步就想要改成其他種類的版面格式。
顯示效果如下，因為我後來初版把側欄都刪掉了，變成只有文章區塊，所以只能另外弄效果圖。
它的作法是隱藏（display: none;）。
初版時我不用側欄，所以我的作法是直接到Body區把側欄的code刪掉，效果如下：
2. 利用Child選取器搭配頁面類型設定：
從1.的Step③結果中，雖然我最後已將範本改到讓文章可以齊平齊大並排，但我還有另一種主要需求，就是將最新發布（即第一篇）的文章放大，1.的作法無法滿足我，所以只好另闢蹊徑。
Child是一個很方便、很好玩的虛擬類別，加上(n)作為很好用的選取器。
只要在一個父元素（區域area）裡包含數個子元素（屬性相同的element），就可以使用它。
比方說，清單列表（<ul></ul>）裡面包含好幾個項目（<li></li>），
我們可以用nth-chlid(n)內的 n 改成各種演算條件，讓項目顯示不同效果。
✎ 針對第一個項目所作樣式
li: first-child{ width:200px;}
li: nth-chlid(-n+1){ width:200px;}
✎ 針對最後一個項目所作樣式
li: last-child{ background: #ffff00;}
✎ 針對倒數第N個項目
li: nth-last-child{ code;}
✎ 選取第 N個項目
li: nth-child(n) ←n可作不同運算
如果沒設定數值，n本身是自0起丟進去執行迴圈的數列（0, 1, 2, 3, 4......）
✎ 選取單數的項目 li: nth-child(odd){ code;}
✎ 選取偶數的項目 li: nth-child(even){ code;}
✎ 選取跳項的項目
li: nth-child(n+b){ code;}
li: nth-child(n-b){ code;}
從微軟的網頁獲得的解釋是第a+b或第a-b個的子項目，選取以a為倍數的子項目變化。我認為另一位作者介紹得比較易懂，亦有實例，看得比較清楚： CSS可樂 〈使用CSS3 :nth-child(n) 選取器教學〉
PS.<li></li>項目有斷行效果，所以選單數或雙數直接用odd/even即可選取。
大概了解一下Child怎麼用就好，然後和上一帖〈【Blogger】備份範本，網頁結構及修改〉一樣，將虛擬類別選取器寫進針對首頁做改變的條件標記。
在網誌的世界裡，每塊文帖的區塊名稱是統一的，在此假設名稱是post。
文帖區塊左鄰(float: left;)，並分設首帖和其他文帖區塊大小，這樣就能形成兩欄又能首篇放大的效果了。
❆ 若格式跑掉，請注意內距（padding）和外距（margin）跟文帖寬度相加後是否超過包圍的區域大小。
Child是一個很方便、很好玩的虛擬類別，加上(n)作為很好用的選取器。
只要在一個父元素（區域area）裡包含數個子元素（屬性相同的element），就可以使用它。
比方說，清單列表（<ul></ul>）裡面包含好幾個項目（<li></li>），
我們可以用nth-chlid(n)內的 n 改成各種演算條件，讓項目顯示不同效果。
✎ 針對第一個項目所作樣式
li: first-child{ width:200px;}
li: nth-chlid(-n+1){ width:200px;}
✎ 針對最後一個項目所作樣式
li: last-child{ background: #ffff00;}
✎ 針對倒數第N個項目
li: nth-last-child{ code;}
✎ 選取第 N個項目
li: nth-child(n) ←n可作不同運算
如果沒設定數值，n本身是自0起丟進去執行迴圈的數列（0, 1, 2, 3, 4......）
✎ 選取單數的項目 li: nth-child(odd){ code;}
✎ 選取偶數的項目 li: nth-child(even){ code;}
✎ 選取跳項的項目
li: nth-child(n+b){ code;}
li: nth-child(n-b){ code;}
從微軟的網頁獲得的解釋是第a+b或第a-b個的子項目，選取以a為倍數的子項目變化。我認為另一位作者介紹得比較易懂，亦有實例，看得比較清楚： CSS可樂 〈使用CSS3 :nth-child(n) 選取器教學〉
PS.<li></li>項目有斷行效果，所以選單數或雙數直接用odd/even即可選取。
若選取的是div或span，加上了斷行<br/>，選取單數或雙數的方程式要改成4n+1或4n-1。
<div>單</div><br/>
<div>雙</div><br/>
<div>單</div><br/>以第一個div來算，單數的div選取為：1,5,9,13......➜ 4n+1
<div>雙</div><br/>以第一個div來算，雙數的div選取為：3,7,11,15......➜ 4n-1
<div>單</div><br/>
<div>雙</div><br/>
<div>單</div><br/>以第一個div來算，單數的div選取為：1,5,9,13......➜ 4n+1
<div>雙</div><br/>以第一個div來算，雙數的div選取為：3,7,11,15......➜ 4n-1
✁ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
大概了解一下Child怎麼用就好，然後和上一帖〈【Blogger】備份範本，網頁結構及修改〉一樣，將虛擬類別選取器寫進針對首頁做改變的條件標記。
在網誌的世界裡，每塊文帖的區塊名稱是統一的，在此假設名稱是post。
<b:if cond='data:blog.pageType == "index" '>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.post: first-child { width: 500px;} /*第一篇要寬500px*/
.post: nth-child(n+2) { width: 250px;} /*第二篇以上要寬250px*/
</style>
<b:else/>
<style>
.post{ width: 250px;} /*分頁、搜尋和標籤列表的文帖均寬250px*/
</style>
</b:if>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.post: first-child { width: 500px;} /*第一篇要寬500px*/
.post: nth-child(n+2) { width: 250px;} /*第二篇以上要寬250px*/
</style>
<b:else/>
<style>
.post{ width: 250px;} /*分頁、搜尋和標籤列表的文帖均寬250px*/
</style>
</b:if>
</b:if>
文帖區塊左鄰(float: left;)，並分設首帖和其他文帖區塊大小，這樣就能形成兩欄又能首篇放大的效果了。
❆ 若格式跑掉，請注意內距（padding）和外距（margin）跟文帖寬度相加後是否超過包圍的區域大小。
發表文章
0 Comments:
張貼留言