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 == "http://damianp1.blogspot.co.uk/p/test_6572.html"'>
<style>
#Blog1 {
width: 1200px !important;
}
</style>
</b:if>
要扩展白色部分的高度,您必须添加“高度:800 像素”或 iframe 的高度(或超过 iframe 的 20 像素-40 像素)。
确保删除 .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 或其他值。
这应该是代码中唯一需要调整的部分。
当您将上面的代码复制并粘贴到您的博客页面时,这是一个快照: