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
在2-1已和大家介紹過,上、下章和回目錄的按鈕,寫作Blogger和一般Blogger另一個不同,大概就是目錄。同樣由於是個人創作的部落格,不可能會有專屬手機APP,目錄最好也是能夠,自動調節成合適的大小。 同樣是編輯CSS和利用無序清單元素的<li>就能辦到,而且語法也相差不大。同樣要先說明
Thumbnail
在2-1已和大家介紹過,上、下章和回目錄的按鈕,寫作Blogger和一般Blogger另一個不同,大概就是目錄。同樣由於是個人創作的部落格,不可能會有專屬手機APP,目錄最好也是能夠,自動調節成合適的大小。 同樣是編輯CSS和利用無序清單元素的<li>就能辦到,而且語法也相差不大。同樣要先說明
Thumbnail
最初會想加入這個功能,主要是因為自己(當初還沒想弄寫作Blogger),因為找資料的過程中,雖然記得將出處加入頁籤,但不知為何(搞錯?),卻和要用的資料對不上,為此著實苦惱了好一陣子。偶然在某次搜集資訊,將資料貼上後,竟然貼心的附上原文網址,當下直覺太讚了,故而研究了一番。 改替成寫作Blogge
Thumbnail
最初會想加入這個功能,主要是因為自己(當初還沒想弄寫作Blogger),因為找資料的過程中,雖然記得將出處加入頁籤,但不知為何(搞錯?),卻和要用的資料對不上,為此著實苦惱了好一陣子。偶然在某次搜集資訊,將資料貼上後,竟然貼心的附上原文網址,當下直覺太讚了,故而研究了一番。 改替成寫作Blogge
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
雖然Wordpress 的頁首頁尾功能可以處理基礎的網站排版, 但真正追求細膩和個性化的設計就會稍顯不足。 這時,”Elementor Header & Footer Builder” 就是你的救星。 它打破了預設的框架限制,讓你隨心所欲地設計, 依照你的品味打造專屬的網站魅力。以下三大賣點,就是我
Thumbnail
雖然Wordpress 的頁首頁尾功能可以處理基礎的網站排版, 但真正追求細膩和個性化的設計就會稍顯不足。 這時,”Elementor Header & Footer Builder” 就是你的救星。 它打破了預設的框架限制,讓你隨心所欲地設計, 依照你的品味打造專屬的網站魅力。以下三大賣點,就是我
Thumbnail
對於個人而言,免費的Blogger樣版已經很夠用。若非要說有哪不滿意,大概就是主選單,會隨著網頁滾動消失(如下圖),雖然有回到上方按鈕,且多數人瀏覽習慣,逐漸轉為手機。不過我還是喜歡,能夠常駐上方的主選單。 一、於</style>前,增加CSS 進入到Blogger後台/主題/自訂/編輯HTML
Thumbnail
對於個人而言,免費的Blogger樣版已經很夠用。若非要說有哪不滿意,大概就是主選單,會隨著網頁滾動消失(如下圖),雖然有回到上方按鈕,且多數人瀏覽習慣,逐漸轉為手機。不過我還是喜歡,能夠常駐上方的主選單。 一、於</style>前,增加CSS 進入到Blogger後台/主題/自訂/編輯HTML
Thumbnail
寫作Blogger和一般Blogger最大的不同,就是有無上、下章和回目錄的按鈕了。又由於是個人創作的部落格,不可能會有專屬手機APP,這些按鈕最好是能夠,自動調節成合適的大小。 那麼會不會很難呢?其實並不難,一樣是編輯CSS就能辦到,這次會利用到的,還有無序清單元素的<li>。但要先說明的是
Thumbnail
寫作Blogger和一般Blogger最大的不同,就是有無上、下章和回目錄的按鈕了。又由於是個人創作的部落格,不可能會有專屬手機APP,這些按鈕最好是能夠,自動調節成合適的大小。 那麼會不會很難呢?其實並不難,一樣是編輯CSS就能辦到,這次會利用到的,還有無序清單元素的<li>。但要先說明的是
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
在上一篇文章1-1 利用免費Blogger版型創建寫作部落格,可以知道我使用的版型是2018年的,那時的圖片還不興導圓角,可是在今年新出的樣版,都將圖片加上圓角,實在有些羨慕,那該怎麼辦呢? 其實是非常容易的,只要按滑鼠右鍵,之後就是剪下、貼上的事。 不過首先,你得知道圓角的CSS語法為bo
Thumbnail
在上一篇文章1-1 利用免費Blogger版型創建寫作部落格,可以知道我使用的版型是2018年的,那時的圖片還不興導圓角,可是在今年新出的樣版,都將圖片加上圓角,實在有些羨慕,那該怎麼辦呢? 其實是非常容易的,只要按滑鼠右鍵,之後就是剪下、貼上的事。 不過首先,你得知道圓角的CSS語法為bo
Thumbnail
易用性的第一定律就是「別讓我思考」。瞭解人類的思考系統,強化第一系統的網站設計方法,包括善用使用者過去的網頁觀看經驗,強化互動元件的預設用途提示,建立內容的視覺層次,整合選項,預設同意以及製作圖像的範例教學。提高網站的易用性,強化使用者對網站的體驗。
Thumbnail
易用性的第一定律就是「別讓我思考」。瞭解人類的思考系統,強化第一系統的網站設計方法,包括善用使用者過去的網頁觀看經驗,強化互動元件的預設用途提示,建立內容的視覺層次,整合選項,預設同意以及製作圖像的範例教學。提高網站的易用性,強化使用者對網站的體驗。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News