Beta 如何加一欄容易編輯的縮圖

謝謝Hoctor介紹﹐這就可以展現Bolgger Beta 的功力了﹐很容易就增加一欄專放縮圖得﹐整體就很美觀了.
隨時經由page element修改檔名﹐圖片就改變了﹐很方便的。

會玩Beta的﹐基本的add page element及修改HTML就不多說了。
最後結果如下圖所示


詳細步驟如下

1.Template->Add Elements, 選擇sidebar中的Add Page Elements﹐畫面跳出後再選擇Link List項目就可。


2.將剛新增的link元件拉到本文blog post上面


2.隨便建幾個連結﹐當然是你做好的圖檔﹐建議先做100x100px的四張縮圖﹐這邊就Key進連結

3.打開HTML編輯﹐記得勾選extend widget喔

原來的﹐找LinkList,若你已建link連結﹐這邊可能是linklist2﹐找到最後一個就對了
b:widget id='LinkList1' locked='false' title='Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<div id='link'>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</div>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


新的程式﹐記得id='linklist1-3'這要修到一樣再貼上去
<b:widget id='LinkList1' locked='false' title='Random Pics' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<div class='hoctro_spacer'>
<b:loop values='data:links' var='link'>
<a expr:href='data:link.target' onblur='try {parent.deselectBloggerImageGracefully();} catch(e) {}'><img alt='' border='0'
expr:src='data:link.target' height='100' style='display:inline; margin:0px auto 10px; ;cursor:pointer;' width='100'/></a>
</b:loop>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

完工﹐這樣子就可以看到結果了

Tags search:Blogger beta

Filed Tags:Blogger_beta