Endless TACOJOHN

如同我的Banner，上面的照片欄位怎麼制作的呢?!
本文將說明如何讓自己的banner有個自由的欄位，使用者可自由置放flickr badge或是其他自己想放的內容。

Step 1: 登入Blogger並進入修改HTML頁面

Step 2: 找到banner部分的片段，並新增紅色的部份
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='自己的blog標題' type='Header'/>
<b:widget id='headhtml' locked='false' title='' type='HTML'/>
</b:section>
</div>


Step 3: 儲存範本…打完!!基本上算是打完收工啦!!

此時再到設定/範本/網頁元素頁面，會看到Banner下方多了一個自由欄位，即可利用編輯的方式加入你想要加入的內容、Java Script程式啦!!

okay，再來教大家如何像我一樣，加入Flickr Badge!!

Step 4: 到Flickr Badge依照指示設定自己想要的樣式，最後再將它所給的html code加入剛剛新增的欄位就可以了。

另外，預設layout是會置左，如果要置右的話，先來看一下剛剛的那段code(以下是以小弟得到的code，若你的code不同，請自行舉一反三)
<!-- Start of Flickr Badge -->
<style type="text/css">
#flickr_badge_uber_wrapper {margin-right:40px;float:right;padding: 0 0 10px;}
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {margin:0 3px;background-color:#fff;padding:4px;border:1px solid #333 !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" border="0" cellpadding="0" cellspacing="10"><tr><td>
<script src="http://www.flickr.com/badge_code_v2.gne?count=5&display=random&size=s&layout=h&source=user&user=********" type="text/javascript"></script>
</td>
</tr>
</table>
<!-- End of Flickr Badge -->

看出來了嗎??我加入紅色的部份，其中這段CSS的class名稱就跟下方綠色的Table ID是一樣的!!
至於其他的CSS語法請自行參閱網路上的教學囉!!

好吧，大放送，有人用完會發現Banner變超大一個，那是因為網站描述(description)欄位的關係
一樣，進入修改HTML頁面，找到下面這一串CSS程式
#header .description {
display: block;
margin: 0 1%;
padding: 0 0 40px;
line-height: 1.4em;
font-size: 50%;
}

把40px改小即可囉!!

Enjoy it!!!