博文

目前显示的是标签为“blogger”的博文

用Stylish插件修改blogger编辑器宽度

图片
blogger的系统有一点点 "过时". 在编辑博文的时候, 我觉得编辑器的宽度有点太窄, 特别是在比较大的显示器上, 显得没有充分利用. 可以打开开发者工具, 找到这个页面元素, 把width属性改大一点. 但是这样修改的结果, 只要刷新页面就复原了. 为了能每次打开这个编辑器页面都可以自动修改. 可以使用插件实现.

Blogger 切换到 Google Analytics (分析) 4

图片
得到你的 GA4 代码 登录 https://analytics.google.com/ ,点击 "全部网站数据" 选择 GA4 看到你需要添加的代码 G-XXXXXXXXXX 设置Blogger 效果

Blogger 模板 Notable 首页出现精选博文FeaturedPost 后排版问题

图片
之前这个修改可以让 首页显示热门博文PopularPosts 但是在Blogger的 Notable 类模板下,首页的排版显得很奇怪。 经过分析,是"更多博文"的浮动排版造成的影响。 修改模板文件 修改前: .blog-pager{ float:$endSide; margin-$endSide:468px; margin-top:48px } .blog-pager .blog-pager-older-link{ color:$(feed.button.color); float:right; font:$(feed.button.font); text-transform:uppercase } 修改后: .blog-pager{ text-align: center; margin: 2em 0; } .blog-pager .blog-pager-older-link{ color:$(feed.button.color); font:$(feed.button.font); text-transform:uppercase } 效果: =========== 其它修改一并记录一下: 广告前后留空太多 修改前: .shown-ad {     margin-bottom: 85px;     margin-top: 85px; } 修改后: .shown-ad {     margin-bottom: 45px;     margin-top: 45px; } 博文之间广告宽度 修改前: .shown-ad .inline-ad{ display:block; max-width:$(feed.width - 604px) } 修改后: .shown-ad .inline-ad{ display:block; max-width:$(feed.width - 204px) }

Blogger模板Notable系列去掉首字母变大占两行的CSS样式

图片
 当在Blogger中使用Notable系列模板时,每篇文章的首字母会变大,占两行。如下: 在一些以文字为主的博客站也许很合适,但是放在技术类的站我个人觉得就不太适合了。

将Blogger页面添加为Telegram Instant View时,用replace_tag解决a内部不支持img的问题

图片
将Blogger页面添加为Telegram Instant View时,遇到 Element <img> is not supported in <a> 的错误 报错信息示例: [..after:119] @simplify Element <img> is not supported in <a>: <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF5Km8RG7WQw6aKDRVJdFno0hPg_m63nPEhO2beAVZvKtBNgdYecEOyKTyA6CFhrtaWc5c6BqWq2friOctVX2nI7IzjtBI9sTwFxw0N1P_S2DrZIIg5KBBKZ1X-p-IMjbHfywbRWQt1x_nzIh3KO9Rj2bRsr8SreJmxp4HWQnlvrTTykQ2KsOoVJqu/s16000/2022-05-31_23-56-43.jpg"/> 解决方案: # 将`<a>`和`<p>`标签下的`<img>`标签替换为`<figure>`,使子标签下的 <img> 正常显示 @replace_tag(<figure>): //a[.//img] @replace_tag(<figure>): //p[.//img] 感谢: https://www.10101.io/2019/05/23/telegtam-instant-view 

Blogger修改模板文件 将非标题的超链接的字体 改为代码字体 方便打印 后识别

图片
我的搭建节点的教程有个目标就是——爷爷奶奶也能成功,只要能认识字母,会操作键盘和鼠标,就能成功。 我设想的一个使用场景是——把教程的字体调大后打印出来, 读者照着纸质的教程操作. 那么超链接的可读性是需要得到保证的.

Blogger 模板 Essential 右侧增加AdSense区域

图片
Blogger 模板 Essential 右边有2个长条状的Google Adsense区域. 我觉得我的页面会比较长, 所以足够添加第3个Adsense区域. 那么就要修改Blogger的模板文件了

Blogger 模板 Essential 首页显示热门博文PopularPosts

图片
写博客的产出不稳定的,如果出现了受欢迎的博文,希望能多持续一段时间,也想推荐给"过客"。所以我想在首页也显示热门博文。

Blogger 模板 Essential 去掉返回按钮 显示菜单按钮

图片
换了一个新模板Essential,我觉得还是比较满意。不过进入博文页面的时候左上角有一个返回按钮,而菜单按钮"三"不见了。我希望用菜单按钮把左侧的Google翻译、RSS Feed呼出来、归档、标签云;如果想返回的话,使用浏览器自带的功能就可以了。

Blogger 连接 Google Analytics UA-XXXXXXXXX-X

图片
Google Analytics默认生成的统计ID是G-XXXXXXXXXX,填不到Blogger后台里面去。 我们要生成“老版本”的Google Analytics统计ID UA-XXXXXXXXX-X

Blogger修改Google AdSense样式 提醒用户 '此为广告'

图片
作为个人博客, 希望能从Google AdSense挣到一点广告费. 但是Google添加的广告有些确实一眼看过去容易让读者误以为是网站正文插图. 

Blogger的精选博文FeaturedPost只在首页Homepage出现

图片
也许你有希望重点宣传的博文,或者你想置顶一篇声明,于是你在Blogger里设置了 精选博文。也许你觉得在首页显示“置顶”博文的摘要就够了,不用在打开某篇博文还要显示这个。那么……

Blogger应用text-autospace.js给中英文之间 添加空格 用Github Pages解决MIME type mismatch问题 引入jquery解决$ is not a function问题

图片
添加<script src='https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js'/> 添加<script src='https://crazypeace.github.io/text-autospace.js/text-autospace.min.js'/>

修改Blogger模板 自定义CSS时 使用!important

图片
修改Blogger模板 自定义CSS时 会发现添加的CSS代码没有全部生效。

在Blogger里用box-shadow的CSS样式显示图片阴影

图片
起因是,有些教程里贴了比较多的图片,图片是在白色为底色的界面上截下来的,教程本身页面也是白色为底,如果有多个图片连续的时候,容易让读者分不清图片之间的分隔。

在Blogger里用比较好的CSS样式显示代码

图片
Blogger没有提供显示代码的样式。可以用一个取巧的办法,把引用样式Hack成用于显示代码的样式。

The Hot3 in Last 30 Days

无服务器 自建短链服务 Url-Shorten-Worker 完整的部署教程

ClouDNS .asia免费域名 托管到CloudFlare开CDN白嫖Websocket WS通道翻墙 / desec.io