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

Question

我正在尝试将iframe嵌入到我的测试博客中名为“test”的页面中 - 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整齐地填充页面吗？

非常感谢，Damian。

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相同或更大的宽度。 点击“模板”＆gt;橙色按钮，显示“自定义”。 在加载的页面上单击“调整宽度”。

如果您不想增加整个博客宽度，可以使用条件标签仅影响该页面。要仅影响该特定页面，请找到“/ 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>

要扩展白色部分的高度，您必须添加“高度：800px”或iframe的高度（或者将其扩展到iframe之后再增加20px-40px）。

确保删除.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

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

再次感谢，Damian。