简单2步,给googleblog加上漂亮的back-to-top小工具


没有Back-to-top标签的网页不够友好,不够完美,在网上查了很多资料,中文的资料基本没有,因为googleblog不能在中国大陆运行,而且目前vlog横行天下,老版的文字blog早已日暮西山,我自己主要是想梳理自己的学习经历,写blog是一个很好的输出方法.

英文参考有不少,但总是特别复杂,又是jquery,又是css,我目前连看都看不懂,我只是想实现一个简单的back-to-top功能,应该没那么复杂才对.于是想到了用markdown写出图片链接,然后再把html代码复制到gadget(googleblog小工具)中,搞了一下午,因为一个简单的错误一直没有成功,好在结果是好的.直接上答案.

  1. 在布局-页面主体,或者页脚中添加一个html小工具
  2. 在html小工具中复制粘贴以下代码:
    <a style="display:scroll;position:fixed;bottom:0px;right:50px;"href="#"title="返回顶部"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWgxlxprSF_ffsW927i6AS9RYiJ6Z5JTyQ6sz6Td8oYesbM-mGDPELSWrnfP_M4_EGNnE43eMvnVl8QVoZRjAXcC8mRFmv8fcP2SnlNnqwody1XUAlljii7LqcbZw8A-f_TFtbdE2GxAQu/s1600/BACK+TO+TOP.png"width="50" height="35"/></a>

    注意:

  1. 点右下角图标保存(一定要保存,我因为没保存,没看到修改效果,浪费一下午时间,愚蠢的低级错误.)

  2. src=""中双引号中的网址是标签的图片网址,可以随意换成你自己喜欢的图标,图标的位置,大小也可以通过修改bottom,width,heigh的数值大小随意更改.
  3. 生成的效果如下:右下角小小的向上箭头

总结自己的低级错误,是为了以后少犯,不必灰心,学习就是这样,在不断犯错改正中自我更新,错误无论大小,都是对自己的一种完善.祝各位学习愉快,