開始建立一個新的Blogger

綜觀所及 , 手邊的資料越來越多 , 分類也開始越來越雜 , 遠遠望去"檔案總管"密密麻麻的目錄

讓我望之生畏 , 到底我要在茫茫的檔案中如何做有系統的整理呢 ?

在"HEAD"標題區 跟"POST"文章區 增加網頁元素(page element)

Blogger 雖然提供的template 很少, 介面看起來簡單,但操作有些複雜, 加上一些名詞從字面上不太明白意思, 有時候常不知道從何下手.不過Blogger 有一個好處是彈性很大, 透過網路上的資源, 學習一下別人的經驗, 熟悉及懂了blogger之後, 其實修改CSS或版面還是可行的.
這陣子的版面在千修萬改之下, 有點心得, 整理自己用過的部分, 分享一下.
首先就是如果想在 Header 放圖片, 或是文章上方放adsense, 最容易的方式就是用網頁元素(page element), 直接選擇 "HTML/JavaScript", 把程式碼或圖片引入 就可以了. 但是預設的template, 其實這兩塊都是沒有新增網頁元素(page element).
所以我們可以自己新增一下.
如果google帳戶的語言設定,使用的是中文的話, 有些名詞真的蠻難意會的.
先介紹一下中文介面的修改步驟.
首先選擇 範本--> 修改 html 就會看到下面這個畫面. 要注意的是, 每次修改之前, 最好先備份一下模板.
按一下 "下載完整模版", 把目前的template 另存到電腦就行了.
附帶說明 "展開小裝置範本" , 其實就是 "展開widget template", 如果這個選項沒有勾取, 那麼目前所看到的html並非完整的, 一些widget的 html code 是被隱藏起來了... 有時候修改模板時, 會異動到widget內的程式碼, 這時候必須要勾取這個選項.

 

這次先不用.

先看一下原始的template, 只有在side bar 及 footer 處,可以新增網頁元素(page element).

1. 先改header的部分, 找到這段程式碼

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

把紅字部分改成以下.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

2. 再修改post的部分, 找到以下程式碼.

<div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'>

把紅字部分改成以下.

<div id='main-wrapper'><b:section class='main' id='main' showaddelement='yes'>

儲存之後, 回到網頁元素, 應該可以看到以下的樣式了.

再自行新增網頁元素, 選"HTML/JavaScript", 把圖片或adsense加入,就大功告成了

例 : 在標題上加 Menu bar

1. 範本--> 修改HTML
在 #header-wrapper {..} 之後, 加入以下程式碼

#navmenubar{
height:25px;
line-height:23px;
margin:0 1px;
background:#1B90DD;
color:#ffffff;
}
#navmenubar li{
float:left;
list-style-type:none;
border-left:1px solid #ffffff;
border-top:1px solid #ffffff;
border-right:1px solid #777D85;
border-bottom:1px solid #777D85;
white-space:nowrap;
}
#navmenubar li a{
display:block;
padding:0 10px;
font-size:12px;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
* html #navmenubar a {width:1%;}
#navmenubar .selected,#navmenubar a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}

如果想改背景色或字體色, 就自己調 background 及color 吧!
2. 然後到 範本 --> 網頁元素
在標題列下, 加入一個新的網頁元素. 加入要連結出去的程式碼.如下圖, 紅字部分是網址, 藍字部分是顯示出來的文字.

或是直接copy下述程式碼, 再自行修改吧!
<div id="navmenubar">
<li><a href="網址">文字</a></li>
</div>
效果像這樣..

如何在Blogger中加入星號評等

 首先要先登入draft.blogger.com 後才能選此功能,點選 “版面配置”---> “網頁元素”---> “網誌文章”選取 “顯示星號評等”後儲存

 

 

 

 

詳細鑑制 參考此文

來試試新玩意之五，Blogger in Draft：Star Ratings

使用內建的勘入式留言板

常用的HTML 語法

 

HTML 連結寫法

 

基本連結的 HTML

<a href="http://URL">文字  </a>

另外開新視窗來做連結

<a href="http://URL" target="_blank">文字</a>

連結到信箱

<a href="mailto:myaddress@example.com">

寄給我！</a>

Blog 建置經驗

準備工作

1.標籤分類

2.文章分類

3.留言系統

4.星號