Blogger：布局页面上的标签部分

Question

我为Blogger创建了一个响应主题。因此，由于Layout页面显示的是实际布局的反映，但不利用媒体查询。在管理区域中，所有内容都以100％宽度垂直排列（预计）。

我的问题：有没有办法可以在某种程度上标记这些部分，以便标签显示在布局页面上，但在查看网站时却没有？目前，在查看布局页面时，有8个部分说“添加小工具”，用户无法知道哪个部分是什么。

Answer 1

YES！您可以更改ANYTHING以处理布局页面（管理页面）的外观和样式（包括标题），而不会影响实际网站的外观和样式。

回答有关布局页面标题的问题。比如说，你有一个TEXT小部件，你想把“TEXT”的标题改为布局中的实际标题，而不是实际的网站：

1. 找到要解决的小部件ID（在模板中）：“模板”＆gt; “跳转到小工具”＆gt; “文本1”。

“跳转到窗口小部件”中列出的所有窗口小部件都是您希望根据您要解决的ID而使用的ID。

1. 在“/ b：skin”上方使用CSS根据您的需要设置标题样式（ID以“＃”开头，​​因此请确保将其添加到窗口小部件ID前面）：

   #layout #text1 .title {
   display:block !important;
   }
   #text1 .title {
   display:none;
   }
   

您可以使用相同的方法在CSS代码之前使用代码“#layout”更改布局部分中的任何内容并设置样式。例如，您可以调整标题的高度，并自动调整布局部分（管理部分），但这会导致布局中标题部分和博客部分之间的空间过大。

这样做：

    #header {
    height:147px;
    }

    #layout #header {
    height: 0px !important;
    }

要调整整个布局，例如宽度，请使用：

     body #layout {
     width: 700px !important; 
     }

如果在“布局”页面上没有立即看到更改，则在保存模板后，在布局页面上单击刷新按钮。

编辑:(测试答案的快照）



正如您所看到的，小部件的标题显示在布局页面上，但不显示在实际网站上：

Answer 2

无法设置Blogger的布局页面样式，因为它会删除您添加到模板的样式和内容。

但你绝对可以找到解决方法来完成这项工作。由于它是布局面板，因此唯一将使用它的人将是博客管理员。安装一些浏览器扩展，允许您将自定义css添加到任何网页，并添加一些特定于博客布局页面的CSS规则。

我主要使用Chrome，我就是这样做的。

1. 安装了Chrome扩展程序 - https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en

2. 现在添加CSS以自定义布局页面。我有一个标识为footer-3的博客页脚的b：部分。所以我添加了

   #footer-3:before{content: "footer";}

   作为CSS和我添加了一条规则，仅在从http://www.blogger.com/display?blogID=11开始的URLS上使用CSS（11应该是博客ID）

现在，当我打开布局页面时，它在页脚部分上方添加了文本“页脚”。您也可以找到FireFox的类似扩展和解决方法。



但如果您尝试将此功能编码到模板中，则无法帮助您

Answer 3

admin section通常称为Layout。

您从哪个设备查看布局。如果您从浏览器尺寸为1024 x 768或更高的计算机上打开博客网站，则布局应显示为在实际网站上查看并not一个100％宽度的线。即使我使用响应式博客模板而不是面临这个问题。

回到主要问题，没有出路。已经存在的小部件的标题标签应该给出关于正在考虑的位置的明确提示。

Answer 4

几年后，正确的答案现在已经过时了，不再起作用。但是，Google通过简单地将属性name="NameOFSectionHere"添加到小部件部分来添加对命名部分的支持。

在“管理>布局”中命名标题部分“新标题”的完整示例：

<b:section id='header' name='New Header' showaddelement='true'>