1-3 讓Blogger主選單永遠置於上方

更新於 發佈於 閱讀時間約 2 分鐘
1-3 讓Blogger主選單永遠置於上方-01

1-3 讓Blogger主選單永遠置於上方-01

對於個人而言,免費的Blogger樣版已經很夠用。若非要說有哪不滿意,大概就是主選單,會隨著網頁滾動消失(如下圖),雖然有回到上方按鈕,且多數人瀏覽習慣,逐漸轉為手機。不過我還是喜歡,能夠常駐上方的主選單。

1-3 讓Blogger主選單永遠置於上方-02

1-3 讓Blogger主選單永遠置於上方-02

況且要做到這點,非常的簡單,只需要兩步驟。

一、於</style>前,增加CSS

進入到Blogger後台/主題/自訂/編輯HTML,點進html內文,利用Ctrl+F搜尋</style>,將下列CSS貼於其前。

.navFixed {z-index:9999; position:fixed; top:0; left:0; margin-top:0; min-width: 00%; opacity:0.94; transition:opacity .5s ease-out;}

二、於</body>前,增加script

完成上步驟後,搜尋</body>,將下列script貼於其前。

<script type='text/javascript'>
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
$('.header-menu').addClass('navFixed');}
else {
$('.header-menu').removeClass('navFixed');}
});
});
</script>

儲存後就可以發現,主選單已經常駐於上方!

1-3 讓Blogger主選單永遠置於上方-03

1-3 讓Blogger主選單永遠置於上方-03

avatar-img
7會員
44內容數
分享個人創作。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
NoEnd│莫盡 的其他內容
在2-1已和大家介紹過,上、下章和回目錄的按鈕,寫作Blogger和一般Blogger另一個不同,大概就是目錄。同樣由於是個人創作的部落格,不可能會有專屬手機APP,目錄最好也是能夠,自動調節成合適的大小。 同樣是編輯CSS和利用無序清單元素的<li>就能辦到,而且語法也相差不大。同樣要先說明
寫作Blogger和一般Blogger最大的不同,就是有無上、下章和回目錄的按鈕了。又由於是個人創作的部落格,不可能會有專屬手機APP,這些按鈕最好是能夠,自動調節成合適的大小。 那麼會不會很難呢?其實並不難,一樣是編輯CSS就能辦到,這次會利用到的,還有無序清單元素的<li>。但要先說明的是
不知道你會不會,在寫作到一半時,對於必須重複打的字詞,感到生厭,甚至連剪下、貼上都懶。這時你就非常的需要,Quick Text Paste幫你快速作業。簡單說明,即利用其建立快速鍵,而能快速貼上字詞。 Quick Text Paste是由Software OK.com(直接連官網)免費提供,該
最開始真的只是,想用語音來校稿,但有了音檔,就想可順手放上YouTube,最好還能放張圖片。一個、二個檔的時候,倒也還好,但當檔案多的時候,就又想,難道沒有批次處理的工具嗎?未曾想,還真有,而且簡單到讓人嘖嘖稱奇,忍不住想讓更多人知道。 這個工具就是FFmpeg(直接連官網)。首先你可到官網,
大家寫文章時,都是用什麼「語言」存檔案呢?應該有不少人和我一樣,是用中文吧!可若偏偏遇上一個,不認「中文」的程式,也只能更名了!可難道一個個改?但為這去買或裝個軟體,好像又太過了,沒事誰又需要批量更名。 這時你就需要Rename Master(直接連官網),到了網頁,你可看見它大大提示著Freew
每個人的寫作習慣不一樣,我的習慣是每章分開存檔,除了方便查看外,檔案間也不會互相影響。另外就是,發佈文章時,能夠快速的生成章節目錄,方便快速的進行作業。 而要做到這點,也非常的容易,只要打開記事本,輸入六字符(只佔兩個中文字),並自訂檔名,最後於存檔前,將副檔名 .txt 改為 .bat 檔,
在2-1已和大家介紹過,上、下章和回目錄的按鈕,寫作Blogger和一般Blogger另一個不同,大概就是目錄。同樣由於是個人創作的部落格,不可能會有專屬手機APP,目錄最好也是能夠,自動調節成合適的大小。 同樣是編輯CSS和利用無序清單元素的<li>就能辦到,而且語法也相差不大。同樣要先說明
寫作Blogger和一般Blogger最大的不同,就是有無上、下章和回目錄的按鈕了。又由於是個人創作的部落格,不可能會有專屬手機APP,這些按鈕最好是能夠,自動調節成合適的大小。 那麼會不會很難呢?其實並不難,一樣是編輯CSS就能辦到,這次會利用到的,還有無序清單元素的<li>。但要先說明的是
不知道你會不會,在寫作到一半時,對於必須重複打的字詞,感到生厭,甚至連剪下、貼上都懶。這時你就非常的需要,Quick Text Paste幫你快速作業。簡單說明,即利用其建立快速鍵,而能快速貼上字詞。 Quick Text Paste是由Software OK.com(直接連官網)免費提供,該
最開始真的只是,想用語音來校稿,但有了音檔,就想可順手放上YouTube,最好還能放張圖片。一個、二個檔的時候,倒也還好,但當檔案多的時候,就又想,難道沒有批次處理的工具嗎?未曾想,還真有,而且簡單到讓人嘖嘖稱奇,忍不住想讓更多人知道。 這個工具就是FFmpeg(直接連官網)。首先你可到官網,
大家寫文章時,都是用什麼「語言」存檔案呢?應該有不少人和我一樣,是用中文吧!可若偏偏遇上一個,不認「中文」的程式,也只能更名了!可難道一個個改?但為這去買或裝個軟體,好像又太過了,沒事誰又需要批量更名。 這時你就需要Rename Master(直接連官網),到了網頁,你可看見它大大提示著Freew
每個人的寫作習慣不一樣,我的習慣是每章分開存檔,除了方便查看外,檔案間也不會互相影響。另外就是,發佈文章時,能夠快速的生成章節目錄,方便快速的進行作業。 而要做到這點,也非常的容易,只要打開記事本,輸入六字符(只佔兩個中文字),並自訂檔名,最後於存檔前,將副檔名 .txt 改為 .bat 檔,
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
易用性的第一定律就是「別讓我思考」。瞭解人類的思考系統,強化第一系統的網站設計方法,包括善用使用者過去的網頁觀看經驗,強化互動元件的預設用途提示,建立內容的視覺層次,整合選項,預設同意以及製作圖像的範例教學。提高網站的易用性,強化使用者對網站的體驗。
Thumbnail
不論是 Astra、Blocksy 還是 Kadence 佈景主題,都有內建頁首與頁尾編輯器,你可以在外觀自訂器中以所見即所得的方式新增各種元素,像是選單、按鈕及社群圖示。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
從上次作完喵喵健身教練網頁後,覺得自己以前作的個人簡歷網站實在是太醜了,而且當初為了搶快,直接套用 Bootstrap 版型,根本不用寫 JavaScript(燦笑) 所以這次決定把網站重寫,就算是從 1 開始吧,1-10 分作到 8 分就好,不然完美主義真的會搞死自己,那道光很快就來了(?)
Thumbnail
我在本篇文章回顧、記錄、分享經營部落格 2 年的心得,以及如果從頭經營部落格,我一定會優先做好的 3 件事情,包括:做好「搜尋引擎優化 / SEO」(做好「關鍵字研究」、新增文章「目錄」、固定「網址」);預先準備足夠的「籌碼」,讓自己有「餘裕」好好經營部落格;設計「名單磁鐵」,蒐集「電子報」名單。
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
前言 終於要到這個振奮人心的章節了,我們終於要來學習,如何讓自己的網頁更加美觀。 但在這之前,我們肯定得先學習,如何將我們的 CSS 檔案,連接到 HTML 當中。 連結分類 首先,我們在連結 CSS 的方法中,有分為三種: 內聯連結 在 .html 當中,任一標籤的裡面,用屬性 s
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
易用性的第一定律就是「別讓我思考」。瞭解人類的思考系統,強化第一系統的網站設計方法,包括善用使用者過去的網頁觀看經驗,強化互動元件的預設用途提示,建立內容的視覺層次,整合選項,預設同意以及製作圖像的範例教學。提高網站的易用性,強化使用者對網站的體驗。
Thumbnail
不論是 Astra、Blocksy 還是 Kadence 佈景主題,都有內建頁首與頁尾編輯器,你可以在外觀自訂器中以所見即所得的方式新增各種元素,像是選單、按鈕及社群圖示。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
從上次作完喵喵健身教練網頁後,覺得自己以前作的個人簡歷網站實在是太醜了,而且當初為了搶快,直接套用 Bootstrap 版型,根本不用寫 JavaScript(燦笑) 所以這次決定把網站重寫,就算是從 1 開始吧,1-10 分作到 8 分就好,不然完美主義真的會搞死自己,那道光很快就來了(?)
Thumbnail
我在本篇文章回顧、記錄、分享經營部落格 2 年的心得,以及如果從頭經營部落格,我一定會優先做好的 3 件事情,包括:做好「搜尋引擎優化 / SEO」(做好「關鍵字研究」、新增文章「目錄」、固定「網址」);預先準備足夠的「籌碼」,讓自己有「餘裕」好好經營部落格;設計「名單磁鐵」,蒐集「電子報」名單。
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
前言 終於要到這個振奮人心的章節了,我們終於要來學習,如何讓自己的網頁更加美觀。 但在這之前,我們肯定得先學習,如何將我們的 CSS 檔案,連接到 HTML 當中。 連結分類 首先,我們在連結 CSS 的方法中,有分為三種: 內聯連結 在 .html 當中,任一標籤的裡面,用屬性 s
Thumbnail
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題