如何当个部落格作者（6）（回到上面按键）

第一部分：介绍

假如你们的部落格文章太长，却不想要读者慢慢刷回到文章最上面，你们可以添加“回到上面”按钮（BACK TO TOP BUTTON）。由于小编满意这个部落格的设计，所以小编没有添加这个按钮。但是，小编已经私底下自己尝试放这个种按钮，这样小编才能教你们，与你们分享这些知识。

这里有一样东西要注意，那就是小编是根据https://techtspot.blogspot.my/2016/03/add-back-to-top-button-gadget-in-blogger.html 这个网站学习的，你们也可以顺便参考这个网站。

第二部分：备份（BACKUP）
首先，你们一定要做个备份（BACKUP）。万一你们做错了某一个步骤，就可以回头，重新再做过。

1.）要做备份，就进去你们的BLOGGER网站，再去你们自己的户口（https://www.blogger.com/about/?r=1-null_user），然后去按左边的THEME，按右上角的BACKUP/RESTORE：

2.）按DOWNLOAD THEME，如果你们到时候做错，要恢复原本的状况，就按CHOOSE FILE，再按UPLOAD。

3.）小编那个DOWNLOAD了的 BACKUP FILE是这样的（你们的FILE样子或ICON可能跟小编的不一样）：

第三部分：全部步
1.）首先，打开BLOGGER，然后去THEME > EDIT HTML：

2.）你们会看到以下画面 (不用怕，冷静点)：

3.）然后你们可以在任何一边随便按一下（“|”会出现。“|”是打字时出现的符号，会一闪一闪的）：

4.）按Ctrl+F( 也就是按着Ctrl按钮，然后按F)，SEARCH BOX就会出现：

5.）复制以下的词去SEARCH BOX那边，然后在SEARCH BOX那边按ENTER：

<head>

6.）在<head>下面PASTE以下的CODE，PASTE了后按SAVE：

<script

src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'>

</script>

7.）过后去LAYOUT > ADD A GADGET：

：

8.）按HTML/JAVASCRIPT：

9.）会有一个“格子”字出现，在那边PASTE以下的CODE：

jQuery(document).ready(function() {

var offset = 220;

var duration = 500;

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop() > offset) {

jQuery('.back-to-top').fadeIn(duration);

} else {

jQuery('.back-to-top').fadeOut(duration);

}

});

jQuery('.back-to-top').click(function(event) {

event.preventDefault();

jQuery('html, body').animate({scrollTop: 0}, duration);

return false;

})

});

</script>

<style>

div#page {

max-width: 900px;

margin-left: auto;

margin-right: auto;

padding: 20px;

}

.back-to-top {

position: fixed;

bottom: 2em;

right: 0px;

text-decoration: none;

color: #000000;

background-color: rgba(235, 235, 235, 0.80);

font-size: 12px;

padding: 1em;

display: none;

}

.back-to-top:hover {

text-decoration: none;

}

</style>

10.）这时，你们看到第九个步骤里最后那几行橙色的CODE吗？那些是放按钮的外观（APPEARANCE）的CODE，把那些橙色的字全部删除，再以以下6种选择中选一个你们喜欢的按钮外观，PASTE在橙色字体那边的位置，记得先把橙色那些字体给删除掉才PASTE以下6种中的其中一种CODE。记住，你们只能选一个：

10.1）

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHHMwOGipKc3_iQVX93i74dUx9BYWYzum2m9k0KSEF7Xp3sjZWJKilw5uDWeH0iuAjzQ2IA7X-nD6sdlcNYoCPZFbxnJokbbYBZr9Sf6fZsTxdk3LHXebLfrJRvhTIzRnO4dHrFm1sUXQ/s1600/1.+Back-To-Top+Button+-+Techtspot.png

10.2）

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWu5ZETYKgtfd_IDdrH5f-dxhzynfG4uZC9UKP37rV5_Oxcz6j8JVfNUY1w0e8MbsTHZELZ4cg0Nrj3uenqz7ZwC_BH24rklNaUB0B1h7rFnbnxnYNdGNayXOiLSbogfEL64-MoUSSHqo/s1600/2.+Back-To-Top+Button+-+Techtspot.pn

10.3）

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbVyyaIE6VHI5iusia44XtZQkpDRhJGiKtes_ROVY1KsyuXCRLnP5y03M9Whb5DKuxc_DKV64ZjqV_aJ6ZxRkZ1EP0-qBwkN-Yn503chErz38rHI_BxMd7t9c7-6jphLr1rZBc0Sei7w/s1600/3.+Back-To-Top+Button+-+Techtspot.png

10.4）

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit4KrtH45AU11dsMVYbSSKYF6UDOIcOqB4Rhm4gzGa9qxgLPVxK2fluvEmmLvj-AGDOwIkCipG8n9sbnHS-2lkCrVqolojYzaiU_as7WwP2iGOI7Y0rcNgp0lB3WuHaqeqve_64Xv1EVk/s1600/4.+Back-To-Top+Button+-+Techtspot.png

10.5）

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5Zm70BT5UxDvUyLT-dVsOAbiPeYgpNGpgaazVRmCu8QNoLme8vx0zC4CR0nYk84-IuY4puw1hrisilX8Ax92LHTHrZuElVvxERLu0FpDbqW3aaH4uBaysxzM3IacsbveXIB4poz-bQM/s1600/5.+Back-To-Top+Button+-+Techtspot.png

10.6）

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQCXRYD59zfp8n3mdLDbNkNf3DO3CBT2MSSxmf2srxGAgI3DYX-QxKOcM1Sc-twe61Ex1tzUho51DCHRY2d00FkjuEhn7vLgDtyxdJTh9TGpTTbwnR23oNOKDRkqqat-Yv8drg8qik4vY/s1600/6.+Back-To-Top+Button+-+Techtspot.png

11.）最后，把那个HTML/JAVASCRIPT放去FOOTER那边（如果你们不放在FOOTER的话，那个按钮不会出现）：

12.)那么，我们就完成了！（小编当时尝试后就删掉这个按钮，所以你们看不到这个按钮了）（虽然按钮不是很美观，但至少那个按钮是有功能的）：

第四部分：总结
如果有什么不明白，就在下方评论问小编吧！

更多文章：http://myblog20012001.blogspot.com/2017/10/blog-post_24.html

笔记和我们的故事 MYblog

Search This Blog

如何当个部落格作者（6）（回到上面按键）

Comments

Post a Comment