Toggle navigation
:::
主選單
校園佈告
校園行事
維修通報
線上書籍
會議系統
下載專區
資料填報
影音播放
線上相簿
網站地圖
教育處
公文系統
教師專區
教師進修
磨課師平台
彰化教育雲
彰化縣公開授課系統
教育部OneDrive
學習扶助
因材網
識字量測驗
國際教育暨英語資源中心
學務系統
雲端校務系統
行政業務
學校簡介
學校基本資料平台
百年校史
教務處
輔導室
家長會
雙語成果
校園十景
總體課程
停課不停學
臺灣母語日資源網
數位學習
彰化Gsuite
彰化教育雲
因材網
國語日報加分吧
Pagamo
均一教育平台
LearnMode學習吧
CoolEnglish酷英網
一小時玩程式
Scratch
Canva
圖書館
反霸凌信箱
登入
登入
帳號
密碼
登入
:::
所有書籍
「google Blogger撰寫(2015-08)」目錄
MarkDown
18. [應用]Blogger邊欄加入影片
1. 如何建立blogger
2. 認識blogger介面
3. Blogger新增文章.超連結與圖片(*重要*)
4. 使用Word編寫Blogger文章
5. Blogger更改範本
6. Blogger自訂範本
7. Blogger文章分類
8. Blogger版面配置和加入小工具
9. Blogger儲存範本
10. Blogger共同作者
11. [應用]如何設定blog標籤分類於首頁超連結
12. [應用]增加計數器
13. [應用]增加跑馬燈
14. [應用]增加置頂公告
15. [應用]Blogger更改時區(時間跑掉了怎辦?)
16. [應用]Blogger設定文章的字型大小
17. [應用]Blogger邊欄加入相簿
18. [應用]Blogger邊欄加入影片
19. [應用]Blogger多層下拉選單設定***參考***
20. [應用]Blogger標籤多層次樹狀清單設定***參考***
21. [應用]首頁公佈欄
20. [應用]Blogger標籤多層次樹狀清單設定***參考***
google Blogger撰寫(2015-08) ========================= 參考網頁
#####
一.到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋
</head>
這個字串,找到後在此字串的前一行,插入以下程式碼:
<style>
/\*下拉選單 start\*/
\#dropMenu ul, #dropMenu li, #dropMenu span, #dropMenu a {
margin: 0;
padding: 0;
position: relative;
}
\#dropMenu:after, #dropMenu ul:after {
content: '';
display: block;
clear: both;
}
\#dropMenu a {
color: #333333;
display: inline-block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #eeeeee;
}
\#dropMenu ul {
list-style: none;
background: none!important;
overflow: visible!important;
z-index: 2;
border: none!important;
}
\#dropMenu > ul > li {
float: left;
}
\#dropMenu > ul > li.active > a {
background: #d9d9d9 url(http://2.bp.blogspot.com/-o\_z6JrMNzkg/VRPtCtXxTNI/AAAAAAAALZw/bag3Q6eUhSY/s1600/grad\_light.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0);
box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
-moz-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
-webkit-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
filter: none;
}
\#dropMenu > ul > li.active a:hover {
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0);
filter: none;
}
\#dropMenu > ul > li a {
box-shadow: inset 0 0 0 1px #ffffff;
-moz-box-shadow: inset 0 0 0 1px #ffffff;
-webkit-box-shadow: inset 0 0 0 1px #ffffff;
background: #bfbfbf url(http://2.bp.blogspot.com/-o\_z6JrMNzkg/VRPtCtXxTNI/AAAAAAAALZw/bag3Q6eUhSY/s1600/grad\_light.png) repeat-x left top;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #e5e5e5), color-stop(51%, #d7d7d7), color-stop(100%, #ededed));
background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
border-bottom: 1px solid #d2d2d2;
border-top: 1px solid #d2d2d2;
border-right: 1px solid #d2d2d2;
line-height: 34px;
padding: 0 16px;
filter: none;
}
\#dropMenu > ul > li a:hover {
background: #ffffff url(http://2.bp.blogspot.com/-o\_z6JrMNzkg/VRPtCtXxTNI/AAAAAAAALZw/bag3Q6eUhSY/s1600/grad\_light.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(50%, #bfbfbf), color-stop(51%, #b0b0b0), color-stop(100%, #c7c7c7));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
filter: none;
}
\#dropMenu > ul > li:first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #d2d2d2;
}
\#dropMenu > ul > li:last-child a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
\#dropMenu > ul > .has-sub:hover > ul {
display: block;
}
\#dropMenu .has-sub ul {
display: none;
position: absolute;
left: -1px;
min-width: 100%;
text-align: center;
\*width: 100%;
}
\#dropMenu li .has-sub:hover > ul {
display: block;
position: absolute;
top: 0;
left: 100%;
}
\#dropMenu .has-sub ul li {
text-align: center;
}
\#dropMenu .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #d2d2d2;
width: 140px;
display: block;
font-size: 14px;
line-height: 120%;
padding: 9px 10px;
text-align: left;
}
/\* 下拉選單 end\*/
</style>
##### #####
二.請到 Blogger 後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼:
<div id="dropMenu">
<ul>
<li><a href="網址"><span>首頁</span></a></li>
<li class="has-sub"><a href="#"><span>單層下拉選單1 ▼</span></a>
<ul>
<li><a href="網址"><span>項目 1</span></a></li>
<li><a href="網址"><span>項目 2</span></a></li>
<li><a href="網址"><span>項目 3</span></a></li>
<li><a href="網址"><span>項目 4</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>單層下拉選單2 ▼</span></a>
<ul>
<li><a href="網址"><span>項目 1</span></a></li>
<li><a href="網址"><span>項目 2</span></a></li>
<li><a href="網址"><span>項目 3</span></a></li>
<li><a href="網址"><span>項目 4</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>多層下拉選單1 ▼</span></a>
<ul>
<li class="has-sub"><a href="#"><span>項目 1 ►</span></a>
<ul>
<li><a href="網址"><span>網頁 1</span></a></li>
<li><a href="網址"><span>網頁 2</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>項目 2 ►</span></a>
<ul>
<li><a href="網址"><span>網頁 1</span></a></li>
<li><a href="網址"><span>網頁 2</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>項目 3</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>多層下拉選單2 ▼</span></a>
<ul>
<li class="has-sub"><a href="#"><span>項目 1 ►</span></a>
<ul>
<li><a href="網址"><span>網頁 1</span></a></li>
<li><a href="網址"><span>網頁 2</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>項目 2 ►</span></a>
<ul>
<li><a href="網址"><span>網頁 1</span></a></li>
<li><a href="網址"><span>網頁 2</span></a></li>
</ul>
#####
</li>
<li class="has-sub"><a href="#"><span>項目 3</span></a></li>
</ul>
</li>
<li><a href="網址"><span>無選單項目1</span></a></li>
<li><a href="網址"><span>無選單項目2</span></a></li>
</ul>
</div>
存檔後,請將這個小工具拉到導覽列的位置,這個多層下拉選單才能出現在導覽列上。
#####
三.修改通則
- 每個項目的網址,請填入 HTML 碼之中 "網址" 這個字串的位置即可 - 選單文字、及項目的文字,請自行修改 - 全部的項目都已經縮排整理,將來自行刪減時,也建議保持這個縮排格式,以免編修錯誤,造成選單無法執行。
:::
語系選擇
學校簡介
校長室
教務處
學務處
總務處
輔導室
家長會
媒體報導
北小臉書
北小附幼臉書
課程計畫平台
主選單
首頁
校園佈告
校園行事
維修通報
線上書籍
會議系統
下載專區
資料填報
影音播放
線上相簿
網站地圖