您现在的位置是:首页 > 建站建站
实现Google Blogger的自适应设计
cc博主2021-10-03【建站】837人已围观
目前的网站大多数都支持手机访问,使用较多的技术是自适应设计,Google Blogger做为一个年代很久的建站平台,对自适应的支持并不是太好,这里就介绍一下如何修改模版使得Google Blogger能够支持自适应设计。
方法一:使用Google Blogger自适应模版
这种方法是最简单的,Google Blogger曾经推出了四款自适应模版:Contempo、Soho、Emporio、知名,我们只要使用这四款模版即可支持自适应。不过,这四款模版可能并非人人喜欢,如果想用其他模版的话,就要进行手动修改。
方法二:自定义修改Google Blogger模版
对于老的Google Blogger模版,通常只能使用这种方法。
进入Blogger的后台,点选左边功能中的“主题背景”,再点页面里的“修改HTML”。
在HTML头部增加如下一行代码。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
搜索HTML,寻找width关键字,将使用绝对宽度的样式名找到。
搜索HTML,寻找padding-right,padding-left关键字,将使用这个的样式名找到。
Blogger后台点左侧“布局”,在底部添加“HTML/JavaScript”小工具。在博客中添加支持自适应的样式代码。
不同的Blogger模版,样式名略有一些不同,下面是一段示例代码。
<style type="text/css">
@media screen and (max-width:768px) {
body {min-width: 100%;width: 100%;}
.content-outer, .content-fauxcolumn-outer, .region-inner {min-width: 100%;max-width: 100%;width: 100%;}
.main-inner .columns {padding-left: 0;padding-right: 0;}
.main-cap-top .cap-left {display:none;}
.column-right-outer {width: 100%;}
#layout .content-outer {width: 100%;}
.column-right-outer {display:none;}
.column-right-inner {display:none;}
.footer-outer {display:none;}
}
</style>
相关文章
猜你喜欢
AI 生成模型五花八门,谁好谁坏?CMU 朱俊彦团队推出首个自动匹配排名系统
人工智能作者 | 李梅编辑 | 陈彩娴最近的生成式 AI 可谓十分火爆,新出的预训练图像生成模型多到让人目不暇接。无论是肖像、风景,还是卡通漫画、特定艺术家风格元素等等,每个模型都有它擅长生成的内容。这么多模型里面,如何快速找到一个能满足自己创作欲的最佳模型呢?...
阅读更多宜城红薯:新电商怎么“生生造出”一个新产业?
业界眼下,正是湖北宜城红薯的丰收时节。每天,高速公路上一辆辆满载红薯的大卡车络绎不绝,将宜城红薯发往四面八方,直达全国消费者的餐桌。宜城,这座位于湖北西北部,汉江中游的小城,自古就是鱼米之乡,宜城板鸭、皮蛋、西瓜、大米获得国家地理标志认证。因农产品电商在当地蓬勃...
阅读更多最新公益ssr节点账号免费分享和永久v2ray节点-每日更新(2022/9/2)
技术好文今天星期五,cc博主为大家提供最新公益ssr节点账号免费分享和永久v2ray节点-每日更新,更新于2022年9月2日17点更新,最新v2ray节点分享。需要付费节点下方推荐点击v2rayn出门右拐即可,周末更新资源部分可用,免费资源不易,请大家珍惜。CC博客将...
阅读更多香港云服务器 2核2G 3M 2个原生IP 50G硬盘 35元/月提速啦
服务器评测11年老牌IDC 诚信 稳定 靠谱公司持有资质 IDC ISP CDN 云牌照 互联网增值电信许可 等资质 提速啦(www.tisula.com)是赣州王成璟网络科技有限公司旗下云服务器品牌,目前拥有在籍员工40人左右,社保在籍员工30人+,...
阅读更多科学修仙,程序猿通过代码驯服野生「雷神之锤」,挥手即来,痛击队友
人工智能最近漫威的新电影《雷神4》小伙伴们看了吗。强大的戮神者戈尔,女版雷神的登场,炫酷的特效,爱与复仇编织的道路,《雷神4》上映的第一周票房便打破了《雷神3》的首映记录。提到雷神,就不免让人想起那把被诸多超级英雄垂涎万分的标志性武器——能够奴驭雷电,召之即来的...
阅读更多