在部落格下方加個雜誌版型的圖文導覽列

如何製作類似雜誌版形的圖文導覽列，將圖片與短文介紹相結合，增加部落格的吸引力。

綸太郎是參考BTemplates裡的Zinmag Tribune模板製作的，原始模板樣式如下


相關資訊
模板展示

我曾經套用過這個模版，但是在IE底下一直有黃色的驚嘆號訊息無法解決，再加上他加入的JavaScript的效果很多，而且整個套版程序非常複雜，而且像這種版面很多設計都是要人工更新，無法自動更新，耗費的精神太大，所以我參考了裡面的程式碼，做了一個圖文式的導覽列，這個比較是適合你的部落格主題有很多照片襯托的版面使用，像是美食、攝影、旅遊性質的部落格，有種畫龍點睛的效果(我自己私心認為)，所以我把它套用在我的旅遊部落格---東京封印上，自己覺得有稍微達到我要的雜誌模板的設計。

使用這個設計之前，我要提醒使用的人，這個圖片和文字是要自己手動更新的，並不會自動帶出你最新的文章或是定義的某類文章，因為我沒有使用什麼JavaScript語法，實際上這部份我也不會，只是有這個想法，你可以一個禮拜更新一次，或是一個月更新一次，視你自己的需要，我會設計這樣的版面是因為我的旅遊文章有些有時效性，符合最新或是最切合網友需要的資訊，我會把它用圖文表框重點標出，不僅讓讀者可以了解到現在最新的旅遊資訊，也可以讓你的文章曝光點閱增加。

如何做呢?
其實和上篇文章在部落格名稱下方放個水平連結導覽列的原理是一樣的，
記得先備份原始模板，一樣以官方模板Stretch Denim來修改，
進入後台→版面配置→修改HTML
然後在CSS區增加這個圖文列的定義，定義碼如下，
#photobar{
position: relative;
overflow: auto;
width: 990px;
height: 85px;
margin: 0 1%;
background:#FFF9E7 url(背景圖網址);
border-bottom: 1px dotted #00C400;
}
.fmeta {
margin: 0;
padding: 0;
text-align: left;
font-size:7pt;
line-height:1.3em;
color:#444;
text-align: left;
}
.panel {
width: 220px;
float:left;
margin: 0 1%;
padding:5px 0 5px 5px;
display:inline;
color:#969696;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.panel p{
margin:0px 0px;
padding:0 0;
color:#333;
font-size:11px;
}
.panel img{
margin:0px 5px 0px 0px;
padding:3px 3px;
float:left;
background:#fff;
border:1px solid #DDD8D5;
}

定義說明如下，這些元素的名稱你都可以自定，不一定要和我一樣，
.photobar，整個圖文列的定義，設定寬度與高度，背景也可用背景圖片，或是指定顏色，在這裡有設定overflow，就是超過寬度時會有捲軸出現。
.fmeta，敘述文字的定義，如果你要斷行就在文字裡加個</br>即可。
.panel，圖文列裡每個圖+文的區塊定義，你要配合你的總寬度，譬如我的寬度是990px，那我設每個panel的區塊寬度是220px，就可以顯示4個區塊。
.panel img，這個就是圖文列裡的圖片顯示，這裡設有框線，如果不要框線，就將border:1px solid #DDD8D5;這行拿掉即可。

定義好了外觀，接下來就是將這個圖文列區塊放進正確的位置，我是放在文章內容區塊之上，所以在HTML區，找到主文區塊 <div id='content-wrapper'> ，在這上面加上以下這段語法即可。
<div id='photobar'>
<div class='panel'>
<a href='文章網址'><img alt='' height='60' src='圖片網址' width='80'/></a>
<div class='fmeta'>文章短文介紹</div>
</div>
<div class='panel'>
<a href='文章網址'><img alt='' height='60' src='圖片網址' width='80'/></a>
<div class='fmeta'>文章短文介紹</div>
</div>
<div class='panel'>
<a href='文章網址'><img alt='' height='60' src='圖片網址' width='80'/></a>
<div class='fmeta'>文章短文介紹</div>
</div>
<div class='panel'>
<a href='文章網址'><img alt='' height='60' src='圖片網址' width='80'/></a>
<div class='fmeta'>文章短文介紹</div>
</div>
</div>

如果你要再增加第5個圖文塊的話，一樣在倒數第二個div後面插入以下語法即可，類推。
<div class='panel'>
<a href='文章網址'><img alt='' height='60' src='圖片網址' width='80'/></a>
<div class='fmeta'>文章短文介紹</div>
</div>
其中我將圖片縮成80*60格式的形式，不管你的原始圖片多大，都可以套用，不過還是建議選擇圖片小點，不然增加網頁載入的時間，我是直接套用文章裡的圖片網址，會比較輕鬆。

這樣你就有一個圖文表列式的導覽列，雖然這個設計不是很炫，但是我覺得很實用，更新就看自己的需要了，也可以手動讓你的舊文出來透透氣，因為我之前也有使用隨機文章的Hacks，但常常都會卡住，拖慢網頁載入速度，後來就捨棄不用了，這種導覽方式，我自己覺得還不錯用，跟大家分享。

如果對模板template的整體配置不清楚者，可以參閱
Blogger template模板教學課程---概說及基本結構