如何在 Blogger 站点的页脚中创建一组水平的社交媒体链接

Question

我正在尝试建立一个 Blogger 网站，并希望在页脚中包含一组水平的社交媒体链接。我可以在 Blogger 中添加链接的图像小部件，但是当我添加多个时，它们会垂直显示并左对齐。我尝试将我想要的小部件包装在 <div> 标签中并使用 css 改变它们的位置，但 Blogger 不让我保存原始代码说：

All widgets must be wrapped with a <section> tag.

有没有其他人遇到过这个问题，如果有，你是怎么解决的？

提前感谢您的帮助。

Answer 1

不是将每个 link 单独添加到 Blogger 的图像小部件，而是插入一个 HTML/Java 小部件，其代码类似于下面的块，其中 link 和图像路径引用已更新为您打算使用的那些。

<div id="menu">
<ul>
<li><a href="link1"><img src="img_src1”></a></li>
<li><a href="link2"><img src="img_src2”></a></li>
</ul>
</div>

然后进入“主题”面板，点击“自定义”。在新屏幕中选择“高级”选项卡并向下滚动到“添加 CSS”。粘贴以下要添加的代码。结果应该是在页脚中 linked 图片的水平列表。

#menu ul{
  list-style: none;
  text-align: center;
}
#menu li{
  display: inline;
  margin: 10px;
}

注意：如果需要，您可以通过更改 margin 来更改间距。

此外，由于您提到您使用的是允许您上传图像的图像小部件，如果您需要托管自己的图像，您仍然可以为此使用图像小部件。将您的图像上传到图像小部件并将其放置在您的主页上。转到您的网站并右键单击图像并选择 "Open in New Tab"。复制 URL 并将其放入您正在创建的 html 列表中以容纳您的社交媒体 link。然后您可以关闭图像小部件的可见性，Blogger 仍将托管该图像。

如何在 Blogger 站点的页脚中创建一组水平的社交媒体链接

How can I create a horizontal set of social media links in the footer of a Blogger site

html

css

blogger