如何当个部落格作者（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：

<script>
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>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0D3HZqcFvbtdPVZLN83hXjy8BAm6ADbFvc8DeGT9jNS_K3q6WHRpjNWNZ0CexC6z7eGIZVPodYzocmxNBXbUpFQqkedgzH3epNUirC4aSsyIQHyTUcvFVtBR8Cgo2ya7Db5D3CXEmZ5_O/s1600/back+to+top+.png" alt="Back to Top" / ></a>

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

Comments

Post a Comment