新版面blog V3.0

2010年3月11日星期四

新版面blog V3.0

Posted on 20:00 by Sean

大約一年多前左右，因為某些因素與不爽把我的部落格搬離無名小站，來到blogger這個系統，blogger真的是個很陽春很陽春的界面，什麼事情都得要自己來，版面自己調整，程式碼自己寫(當然可以用抓的)，基本上java script我可是一點也不會寫，連網路放置程式碼的空間都沒有，但持著DIY的精神，我修改了一些版面並且調整了一下，完成了我搬家之後部落格版面，主題為-"My life,My Opinion…"(V2 beta)，用了幾個月後，終於找到一個令我滿意的templete-"Chucky"，並花了不少時間做調整。

基本上這個版面最重要的script就是"縮圖文"，精選文章和文章區塊都是用這方法所寫成，讓我的部落格變得很好閱讀，也就是原先我打算用在V2 beta的預定版面。

目前版面配置如上圖，首先來看最上面的部分，右上角為搜尋列以及RSS定閱標籤，搜尋列可以直接搜尋本站文章，方便查找使用，而RSS這部分目前已設定完成，可以至Feedburner 做文章定閱。

連結列主要連結至我的其他網頁，"BLOG"為我目前這個blogger架構下的本站，"Flickr" 主要連結到我的Flickr相簿，由於我不是pro會員，所以上傳上限就是200張照片，這上面的照片我會挑自己較為滿意的作品上傳，因為…限量是殘酷的。

連結列後面還有一個"WebAlbum"選項，這是還在建構中的相簿，是以blogger架構來設計，未來將放置較多的照片，目前還在做細部調整中。由於blogger可以允許一個人有很多不同的blog，所以未來計畫增加的連結為財經相關，計畫增加"Bussiness Weekly Report"，這些未來的計畫就一步一步來吧…

介紹完連結列，就來介紹主要部分，精選文章與文章區塊，這兩個東西概念是一樣的，在這邊就介紹精選文章這部分，這裡使用到了"縮圖文"的程式，而這部分調整我花了很多工夫，目前是連youtube影片都可以嵌入在上面，先來看看Chucky的程式碼

<div id="featured-post-wrap" class="clearfix">
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#featured-post').cycle({
fx: 'fade',
speed: 'fast',
timeout: 6000(切換的時間),
pause:2,
next: '#featured-next',
prev: '#featured-prev'
});
})
</script>
<div id="featured-post">
<div class="featured-item">
<img alt="影像名稱" width="304" src="影像連結" class="featured-thumb" height="190"/>
<div class="post clearfix">
<p class="date-post">日期</p>
<h2 class="title"><a href="文章連結" title="文章標題">文章標題</a></h2>
<div class="entry">
文章簡略描述
</div>
<a class="read-more" href="文章連結" title="Continue Reading...">Continue Reading...</a>
</div>
</div>
</div>
<a id="featured-prev">prev</a>
<a id="featured-next">next</a>
</div><!-- /featured-post-wrap –>

紅字部分自行修改即可
如果想加文章可在</div>前加上

<div id="featured-post">
<div class="featured-item">
<img alt="影像名稱" width="304" src="影像連結" class="featured-thumb" height="190"/>
<div class="post clearfix">
<p class="date-post">日期</p>
<h2 class="title"><a href="文章連結" title="文章標題">文章標題</a></h2>
<div class="entry">
文章簡略描述
</div>
<a class="read-more" href="文章連結" title="Continue Reading...">Continue Reading...</a>
</div>
</div>

即可
如果想要放影片可以將

改成

同樣的也可以將其改成Flickr 或 Picasa 的slide，最重要的是class後面那串一定要有，才能正常呼叫縮圖文的功能。

最後就是小裝置了，小裝置是一些基本的元件，目前設計為可摺收，有個人資料，整合發文的行事曆(可直接點選發文日期即可跳至文章)，分類標籤，最新發文及回應等…

每篇文章加上延伸閱讀、推文分享、還有留言功能，符合blog基本需求…大致上V3的版面就介紹到這了。

Carpe Diem

2010年3月11日星期四