удаление ненужных элементов со страницы блоггера

Синее поле за iframe находится здесь:

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

Чтобы убрать синее поле, вы можете скрыть «.post-outer» или:

background-color: transparent;
border: none;

Добавьте «!важно» там, где это необходимо.

Белое поле за iframe находится здесь:

.main-outer {

Чтобы удалить границу, удалите:

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

EDIT: (исходя из идеи другого формата)

Если вы хотите расширить синюю и белую части, вы должны увеличить ширину блога до той же ширины или больше, чем ширина 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).

Убедитесь, что вы удалили ширину 110% в .post-outer и любые другие изменения, которые вы сделали ранее перед первым ответом.

EDIT: спросили о лучшем способе сделать это:

Внутри страницы сообщения, где вы хотите использовать iframe, используйте этот код:

<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 или что-то еще.

Это должна быть единственная часть кода, которая нуждается в корректировке.

Это снимок того, как должен выглядеть приведенный выше код, когда вы копируете и вставляете его на страницу своего блога:

Используя вашу помощь из приведенных выше сообщений, я только что попробовал это в 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

Я не уверен, насколько это хорошее решение, но это лучшее, что я нашел до сих пор. Хотел бы я понять это, а не просто возиться с другим кодом! Есть ли лучшие способы сделать это?

Еще раз спасибо, Дамиан.