為 Blogger Blog 填加 Go to Top (回頂部)按鈕(樣式1)

---

為 Blogger Blog 填加 Go to Top (回頂部)按鈕。

a. 請您先將你的Blogger主題作備份。(備份的方法)
b. 您可以將「按鈕」修改為你意向的外觀(含顏色)。

1. 登入Blogger；

2. 點選Blogger控制台版面的「主題」項目，並再點選主題的 " 編輯 HTML "；

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

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

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

6. 將如下的程式碼拷貝張貼到 </body> 的上方(或前方) 

<style type='text/css'>
#bgt-StoTop {-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px; width: 40px;background-color: #fff;background-color: #fff;filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#9902ab68&#39;,EndColorStr=&#39;#9902ab68&#39;);text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#ff0000;text-decoration:none;border:1px solid #555;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(function($) {
    $.fn.scrollToTop = function() {
    $(this).hide().removeAttr(&quot;href&quot;);
    if ($(window).scrollTop() != &quot;0&quot;) {
        $(this).fadeIn(&quot;slow&quot;)
    }
    var scrollDiv = $(this);
    $(window).scroll(function() {
        if ($(window).scrollTop() == &quot;0&quot;) {
        $(scrollDiv).fadeOut(&quot;slow&quot;)
        } else {
        $(scrollDiv).fadeIn(&quot;slow&quot;)
        }
    });
    $(this).click(function() {
        $(&quot;html, body&quot;).animate({
        scrollTop: 0
        }, &quot;slow&quot;)
    })
    }
});
jQuery(function($) {
    $(&quot;#bgt-StoTop&quot;).scrollToTop();
});
</script>
<a href='#' id='bgt-StoTop' style='display:none;'>︽</a>


7. 以上動作確認無誤後，點擊HTML版面區域左上方位的 儲存主題；

8. 完成。

應用說明 :
您可以更改 Back to Top 按鈕的外觀效果。

1. 程式碼 :  width: 40px
修改 40 數字可以改變按鈕的寬度。

2. 程式碼 : background-color: #fff;background-color: #fff;filter:
修改 fff (顏色代碼)內容可以改變按鈕的顏色。

3. 程式碼 : border:1px solid #555
修改 1px 的數字可以改變按鈕邊框的厚度。 修改 555 的顏色代碼可以改變按鈕邊框的顏色。

4. 程式碼 : color:#ff0000
修改 ff0000(顏色代碼)內容可以改變按鈕的文字(圖標)顏色。

5. 程式碼 : style='display:none;'>︽</a>
修改 ︽ 內容，可以修改為｢Back to To｣､｢回頂部｣，或其他文字及圖標。

---