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
NoEnd│莫盡
7會員
44內容數
分享個人創作。
NoEnd│莫盡的其他內容
2023/12/17
如果你已經決定,以後就都自出版電子書,那麼建議進行編輯前,可以先安裝/加入外掛,簡化作業流程,因為自己僅出版文字書/小說,所以僅就此部分說明(因為其他的還沒用過)。 題外話:外掛超好用,但不知為什麼用的人很少,可能翻的名字不好,一般都會是翻插件。一開始會想到安裝外掛,也實在是因,明明工具列那麼
Thumbnail
2023/12/17
如果你已經決定,以後就都自出版電子書,那麼建議進行編輯前,可以先安裝/加入外掛,簡化作業流程,因為自己僅出版文字書/小說,所以僅就此部分說明(因為其他的還沒用過)。 題外話:外掛超好用,但不知為什麼用的人很少,可能翻的名字不好,一般都會是翻插件。一開始會想到安裝外掛,也實在是因,明明工具列那麼
Thumbnail
2023/12/17
個人不是使用Word寫作,而且原本就習慣一章一章寫,不過看到Sigil的,從標記【<hr class="sigil_split_marker" />】分割的功能,很好奇是怎樣的,結果發現它超好用的,能夠幫你自動分章節成HTML檔。 要做到這點,非常的簡單,你只要使用儲存搜尋和Automation
Thumbnail
2023/12/17
個人不是使用Word寫作,而且原本就習慣一章一章寫,不過看到Sigil的,從標記【<hr class="sigil_split_marker" />】分割的功能,很好奇是怎樣的,結果發現它超好用的,能夠幫你自動分章節成HTML檔。 要做到這點,非常的簡單,你只要使用儲存搜尋和Automation
Thumbnail
2023/12/14
為了自出版電子書,搜尋相關資料,大體看過一遍,然後,得到的結論是,不該做的別做!(EPUB│Reflow文字書│橫排的情況)雖然自覺只是進行了『非常低度』的編輯,但還是多了。 已順利上傳的是Pubu,只花不到5分鐘,有點嚇到我!其他的則還在等候審查,等有結果後再一次分享。此篇先談談遇到的問題吧!
Thumbnail
2023/12/14
為了自出版電子書,搜尋相關資料,大體看過一遍,然後,得到的結論是,不該做的別做!(EPUB│Reflow文字書│橫排的情況)雖然自覺只是進行了『非常低度』的編輯,但還是多了。 已順利上傳的是Pubu,只花不到5分鐘,有點嚇到我!其他的則還在等候審查,等有結果後再一次分享。此篇先談談遇到的問題吧!
Thumbnail
看更多
你可能也想看
Thumbnail
創作不只是個人戰,在 vocus ,也可以是一場集體冒險、組隊升級。最具代表性的創作者社群「vocus 野格團」,現在有了更強大的新夥伴加入!除了大家熟悉的「官方主題沙龍」,這次我們徵召了 8 位領域各異的「個人主題專家」,將再度嘗試創作的各種可能,和格友們激發出更多未知的火花。
Thumbnail
創作不只是個人戰,在 vocus ,也可以是一場集體冒險、組隊升級。最具代表性的創作者社群「vocus 野格團」,現在有了更強大的新夥伴加入!除了大家熟悉的「官方主題沙龍」,這次我們徵召了 8 位領域各異的「個人主題專家」,將再度嘗試創作的各種可能,和格友們激發出更多未知的火花。
Thumbnail
vocus 最具指標性的創作者社群──「野格團」, 2026 年春季,這支充滿專業、熱情的團隊再次擴編,迎來了 8 位實力堅強的「個人主題專家」新成員 💫💫💫 從投資理財、自我成長、閱讀書評到電影戲劇,他們各自帶著獨特的「創作超能力」準備在格友大廳與大家見面。
Thumbnail
vocus 最具指標性的創作者社群──「野格團」, 2026 年春季,這支充滿專業、熱情的團隊再次擴編,迎來了 8 位實力堅強的「個人主題專家」新成員 💫💫💫 從投資理財、自我成長、閱讀書評到電影戲劇,他們各自帶著獨特的「創作超能力」準備在格友大廳與大家見面。
Thumbnail
易用性的第一定律就是「別讓我思考」。瞭解人類的思考系統,強化第一系統的網站設計方法,包括善用使用者過去的網頁觀看經驗,強化互動元件的預設用途提示,建立內容的視覺層次,整合選項,預設同意以及製作圖像的範例教學。提高網站的易用性,強化使用者對網站的體驗。
Thumbnail
易用性的第一定律就是「別讓我思考」。瞭解人類的思考系統,強化第一系統的網站設計方法,包括善用使用者過去的網頁觀看經驗,強化互動元件的預設用途提示,建立內容的視覺層次,整合選項,預設同意以及製作圖像的範例教學。提高網站的易用性,強化使用者對網站的體驗。
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
最初會想加入這個功能,主要是因為自己(當初還沒想弄寫作Blogger),因為找資料的過程中,雖然記得將出處加入頁籤,但不知為何(搞錯?),卻和要用的資料對不上,為此著實苦惱了好一陣子。偶然在某次搜集資訊,將資料貼上後,竟然貼心的附上原文網址,當下直覺太讚了,故而研究了一番。 改替成寫作Blogge
Thumbnail
最初會想加入這個功能,主要是因為自己(當初還沒想弄寫作Blogger),因為找資料的過程中,雖然記得將出處加入頁籤,但不知為何(搞錯?),卻和要用的資料對不上,為此著實苦惱了好一陣子。偶然在某次搜集資訊,將資料貼上後,竟然貼心的附上原文網址,當下直覺太讚了,故而研究了一番。 改替成寫作Blogge
Thumbnail
對於個人而言,免費的Blogger樣版已經很夠用。若非要說有哪不滿意,大概就是主選單,會隨著網頁滾動消失(如下圖),雖然有回到上方按鈕,且多數人瀏覽習慣,逐漸轉為手機。不過我還是喜歡,能夠常駐上方的主選單。 一、於</style>前,增加CSS 進入到Blogger後台/主題/自訂/編輯HTML
Thumbnail
對於個人而言,免費的Blogger樣版已經很夠用。若非要說有哪不滿意,大概就是主選單,會隨著網頁滾動消失(如下圖),雖然有回到上方按鈕,且多數人瀏覽習慣,逐漸轉為手機。不過我還是喜歡,能夠常駐上方的主選單。 一、於</style>前,增加CSS 進入到Blogger後台/主題/自訂/編輯HTML
Thumbnail
在2-1已和大家介紹過,上、下章和回目錄的按鈕,寫作Blogger和一般Blogger另一個不同,大概就是目錄。同樣由於是個人創作的部落格,不可能會有專屬手機APP,目錄最好也是能夠,自動調節成合適的大小。 同樣是編輯CSS和利用無序清單元素的<li>就能辦到,而且語法也相差不大。同樣要先說明
Thumbnail
在2-1已和大家介紹過,上、下章和回目錄的按鈕,寫作Blogger和一般Blogger另一個不同,大概就是目錄。同樣由於是個人創作的部落格,不可能會有專屬手機APP,目錄最好也是能夠,自動調節成合適的大小。 同樣是編輯CSS和利用無序清單元素的<li>就能辦到,而且語法也相差不大。同樣要先說明
Thumbnail
寫作Blogger和一般Blogger最大的不同,就是有無上、下章和回目錄的按鈕了。又由於是個人創作的部落格,不可能會有專屬手機APP,這些按鈕最好是能夠,自動調節成合適的大小。 那麼會不會很難呢?其實並不難,一樣是編輯CSS就能辦到,這次會利用到的,還有無序清單元素的<li>。但要先說明的是
Thumbnail
寫作Blogger和一般Blogger最大的不同,就是有無上、下章和回目錄的按鈕了。又由於是個人創作的部落格,不可能會有專屬手機APP,這些按鈕最好是能夠,自動調節成合適的大小。 那麼會不會很難呢?其實並不難,一樣是編輯CSS就能辦到,這次會利用到的,還有無序清單元素的<li>。但要先說明的是
Thumbnail
在上一篇文章1-1 利用免費Blogger版型創建寫作部落格,可以知道我使用的版型是2018年的,那時的圖片還不興導圓角,可是在今年新出的樣版,都將圖片加上圓角,實在有些羨慕,那該怎麼辦呢? 其實是非常容易的,只要按滑鼠右鍵,之後就是剪下、貼上的事。 不過首先,你得知道圓角的CSS語法為bo
Thumbnail
在上一篇文章1-1 利用免費Blogger版型創建寫作部落格,可以知道我使用的版型是2018年的,那時的圖片還不興導圓角,可是在今年新出的樣版,都將圖片加上圓角,實在有些羨慕,那該怎麼辦呢? 其實是非常容易的,只要按滑鼠右鍵,之後就是剪下、貼上的事。 不過首先,你得知道圓角的CSS語法為bo
Thumbnail
雖然Wordpress 的頁首頁尾功能可以處理基礎的網站排版, 但真正追求細膩和個性化的設計就會稍顯不足。 這時,”Elementor Header & Footer Builder” 就是你的救星。 它打破了預設的框架限制,讓你隨心所欲地設計, 依照你的品味打造專屬的網站魅力。以下三大賣點,就是我
Thumbnail
雖然Wordpress 的頁首頁尾功能可以處理基礎的網站排版, 但真正追求細膩和個性化的設計就會稍顯不足。 這時,”Elementor Header & Footer Builder” 就是你的救星。 它打破了預設的框架限制,讓你隨心所欲地設計, 依照你的品味打造專屬的網站魅力。以下三大賣點,就是我
Thumbnail
教你如何榮登搜尋引擎排名 第步新增資源網址(就是網誌的網址) 第二步網址審查 第三部要求建立索引 漫遊器設定也一併做優化會更好 Ps提交索引之後要等至少一星期左右蜘蛛爬蟲才會自動將你的網址加入搜尋索引 最快可能一天就好了 Ps設定在左側欄
Thumbnail
教你如何榮登搜尋引擎排名 第步新增資源網址(就是網誌的網址) 第二步網址審查 第三部要求建立索引 漫遊器設定也一併做優化會更好 Ps提交索引之後要等至少一星期左右蜘蛛爬蟲才會自動將你的網址加入搜尋索引 最快可能一天就好了 Ps設定在左側欄
Thumbnail
每位網站站長,都希望套用優雅和專業的網站字形 為自己新建立的部落格或網站 套上獨特的中文字形 換走醜陋的【新細明體】 這點困擾很多新手站長 我們以最多人使用的 WordPress 為例 不需要學習 CSS 語法 透過套用 WordPress 的字形外掛 即可以輕鬆地變換網站的字形
Thumbnail
每位網站站長,都希望套用優雅和專業的網站字形 為自己新建立的部落格或網站 套上獨特的中文字形 換走醜陋的【新細明體】 這點困擾很多新手站長 我們以最多人使用的 WordPress 為例 不需要學習 CSS 語法 透過套用 WordPress 的字形外掛 即可以輕鬆地變換網站的字形
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News