从博客页面中删除不需要的元素

Question

我正在尝试将 iframe 嵌入到我的测试博客 - damianp1.blogspot.co.uk 的名为“测试”的页面中

我已经从页面中删除了很多不需要的项目以腾出尽可能多的空间，但是找不到 id 来删除出现在 iframe 后面的蓝色框，也无法获取 iframe以适合底部带有灰色边框的白色框。

这是我目前使用的代码：

<style type="text/css">

.blog-pager, .footer, .post-footer, .feed-links, #Attribution1, .comments, .post-title, .sidebar
{ display:none !important;}
.main-inner .columns {position: relative; left: -205px; top 50px; width: 1305;padding-left:0 !
important;padding-right:0 !important;}

</style>
</b:if>
<style>]

</style>

<div class="post-outer" style="width:1100px;">
<div id="outerdiv" style="width: 1200px; overflow: hidden">
<iframe width="1300" style="position: relative; left: -190px; top: -34px" height="600" 
src="http://wildlife-ramblings.blogspot.co.uk/" scrolling="yes" frameborder="0"></iframe>
</div>
</div>

有人可以告诉我如何将所有内容正确组合在一起，以便 iframe 整齐地填充页面吗？

非常感谢，达米安。

Answer 1

iframe 后面的蓝色框位于此处：

.post-outer {
background-color: #eef8f8;
border: solid 1px #e8e8e8;

要移除蓝色框，可以隐藏“.post-outer”或者：

background-color: transparent;
border: none;

在需要的地方添加“！important”。

iframe后面的白框位于这里：

.main-outer {

要移除边框，请移除：

box-shadow: 0 1px 3px rgba(0, 0, 0, .15);

编辑： （基于不同的格式理念）

如果您想扩大蓝色和白色部分，您必须将博客的宽度扩大到与 iframe 相同或更大的宽度。 点击“模板”>橙色按钮，上面写着“自定义”。 在加载的页面上点击“调整宽度”。

如果您不想增加整个博客的宽度，您可以使用条件标签来仅影响该页面。要仅影响该特定页面，请找到“/b:skin”并在其下方粘贴以下代码：

 <b:if cond='data:blog.url == &quot;http://damianp1.blogspot.co.uk/p/test_6572.html&quot;'>
 <style>
 #Blog1 {
 width: 1200px !important;
 }
 </style>
 </b:if>

要扩展白色部分的高度，您必须添加“高度：800 像素”或 iframe 的高度（或多 20 像素至 40 像素以将其扩展到 iframe 之外）。

确保删除 .post-outer 上的 110% 宽度以及在第一个答案之前您之前所做的任何其他编辑。

编辑：被问及更好的方法：

在您想要 ifrmae 的帖子页面中，使用以下代码：

<style>
html, body {
overflow-y: hidden;
} 

#iframe-wrapper {
height: 100%;
width:1100px;
position: fixed;
scroll: no;
margin: 0 auto;
left:0px;
right: 0px;
z-index:9999;
margin-top: -52px;
top: 0px
bottom: 0px;
}

#title-wrapper {
height:70%;
margin:0 auto;
width: fixed;
background-color:  white;
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
border-bottom:20px  white solid;
border-right:20px  white solid;
border-left:20px  white solid;
text-align:center;
border-radius:30px;
-moz-border-radius:  30px;
-webkit-border-radius:  30px; 
}

.blog-pager, .footer, .post-footer, .feed-links, #Attribution1, .comments, .post-title, .sidebar
{ display:none !important;}
</style>

<div id="iframe-wrapper"><div id="iframe-inner">
</div><div id="title-wrapper"><h3><span style="color: black; font-size: 30px">Wildlife Ramblings</span></h3>

<div style="border: solid #e8e8e8 1px; padding: 20px; background: #eef8f8; border-radius:20px; -moz-border-radius:  20px; -webkit-border-radius: 20px; height: 83%"><embed  src="http://wildlife-ramblings.blogspot.co.uk/" width="100%" height="100%"></embed></div>
</div></div>

这会将 iframe 放在博客本身上（但博客样式相同，包含圆角的蓝色和白色背景），仅在您粘贴代码的页面上。也许这对您来说会更容易。

您可能需要通过更改上面显示的部分代码来调整 iframe 的位置。找到这部分代码：

#iframe-wrapper {
margin-top: -52px;
}

要将整个 iframe 向上移动（靠近页面顶部），请将 -52px 增加到 -62px（或其他任何值）。要将整个 iframe 向下移动（更靠近页面底部），请将 -52px 减少到 -42px 或其他值。

这应该是代码中唯一需要调整的部分。

当您将上面的代码复制并粘贴到您的博客页面中时，它应该是什么样子的快照：

Answer 2

在上述帖子的帮助下，我刚刚在页面本身的 html 中尝试了这个，它似乎工作......

<style type="text/css">

.blog-pager, .footer, .footer-outer, .post-footer, #sidebar-wrapper, #midsidebar-
wrapper, .gapad2, .post-header-line-1, .navbar, .feed-links, #Attribution1, .comments, 
.post-title, .sidebar { display:none !important;}

#Blog1 { width: 1100px; !important; } .main-outer { width: 1170px !important; }

</style>
</b:if>
<style>]
</style>

<iframe src="http://wildlife-ramblings.blogspot.co.uk/" style= border:3px #eef8f8 
solid;" name="Wildlife Ramblings" scrolling="yes" frameborder="1" marginheight="5px" 
marginwidth="5px" height="800px" width="100%"></iframe>

这是结果...http://damianp1.blogspot.co.uk/p/test_5.html

我不确定这个解决方案有多好，但这是迄今为止我找到的最好的解决方案。我希望我能理解这一点，而不是仅仅使用不同的代码！有没有更好的方法来做到这一点？

再次感谢达米安。