Home 留言板 — —

2018/4/1

在 Blogger Blog 上安裝 Back to Top (回頂部)按鈕(樣式2)

  |    |  沒有留言  |  
提示 :
1. 本功能樣式

2. 進行安裝此小工具之前請您先將你的 Blogger Blog 主題作備份。(備份的方法) 

 建立本功能的方法 :

 Step 1. 登入您的 Blogger Blog；

 Step 2. 在 Blogger Blog 後控制台，點選「主題」項目 > 再點選主題的 " 編輯 HTML "；

 Step 3. 將電腦滑鼠點擊所開啟的 HTML 頁面內(任何位置皆可)；

 Step 4. 按壓電腦鍵盤上的 CTL+ F 兩按鍵，此時 HTML 版面區域內的右上角將出現一個搜尋欄框；

 Step 5. 使用電腦鍵盤在此搜尋欄框內輸入 <head> 或 </head>，再按電腦鍵盤上的 Enter 按鍵，之後，HTML 版區將顯現出黃色襯底的 <head> 或 </head> 內容段；

 Step 6. 將如下的程式碼拷貝張貼到 <head> 的下方 或 </head> 的上方

 <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

 Step 7. 將如下的程式碼拷貝張貼到 ></b:skin> 或 </style> 程式碼的上方

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

Step 8. 將如下的程式碼拷貝張貼到 </body> 程式碼的上方
Step 9.以上動作確認無誤後，點擊 HTML 版面區域左上方位的儲存主題 ;

 Step 10.完成。確認結果。

0 意見:

張貼留言