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
留言分享你的想法!
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
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
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