воскресенье, 19 октября 2008 г.

Как изменять размеры элементов в шаблоне blogger

Original: <a href='http://feeds.feedburner.com/~r/wayblogger/~3/315543490/bolgger.html'a>Как изменять размерÑ&lsqauo; элементов в шаблоне blogger</a></br><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_6wb0Y2NPwZM_FQLyETi-AIx47L3R-bWXzqNoD5XJe_XxIk_oxUJAsC-V39U86EXt5cWc_CjOaNQa2szfcKuxH3LIdXBjjYz1xPGeXfrqTvvj_9Q7PBi2XKA5biXEtUZ7hjGUs_LbQCM/s1600-h/2Steves.JPG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_6wb0Y2NPwZM_FQLyETi-AIx47L3R-bWXzqNoD5XJe_XxIk_oxUJAsC-V39U86EXt5cWc_CjOaNQa2szfcKuxH3LIdXBjjYz1xPGeXfrqTvvj_9Q7PBi2XKA5biXEtUZ7hjGUs_LbQCM/s400/2Steves.JPG" alt="блог, шаблонÑ&lsqauo; блоггер, blogger" id="BLOGGER_PHOTO_ID_5213620146707463330" border="0" /></a><span style="font-weight: bold;">Как изменять размерÑ&lsqauo; элементов в шаблоне blogger</span><br /><br />Ð"ля начала, перейдите в настройках вашего блога в Макет>Изменить HTML и сохраните шаблон на вашем компьютере (а то мало ли что напортачите).<br /><br />Ниже я как смог нарисовал схему стандартного шаблона blogger.<br />Тело шаблона (<span style="font-weight: bold;">body</span>), внутри тела размещен основной элемент <span style="font-weight: bold;">outer </span> (для редактирования используется свойство <span style="font-weight: bold;">#outer-wrapper</span>), а уже на нем и размещаются элементики блога:<br />- главная панель блога (редактируется через свойство <span style="font-weight: bold;">#main</span>)<br />- боковая панель блога (редактируется через свойство <span style="font-weight: bold;">#sidebar</span>)<br />- панель заголовка блога (редактируется через свойство <span style="font-weight: bold;">#header-wrapper</span>)<br />- нижняя панель блога (редактируется через свойство <span style="font-weight: bold;">#footer</span>)<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWu-2TqhkUAtRKVrtGpb8rXuLe7fTAvKiL_RyZJUHax_yB1BYp3eDyFRCM3DJD6iEMhxK5eg4Lh-tWJnO9Mqff8PxyRd3wEYlE2VHNxp6zJTB211J4aT6TYruUtfRn3ZNrSHnfEeAeOJo/s1600-h/template.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWu-2TqhkUAtRKVrtGpb8rXuLe7fTAvKiL_RyZJUHax_yB1BYp3eDyFRCM3DJD6iEMhxK5eg4Lh-tWJnO9Mqff8PxyRd3wEYlE2VHNxp6zJTB211J4aT6TYruUtfRn3ZNrSHnfEeAeOJo/s400/template.JPG" alt="blogger, блог, шаблонÑ&lsqauo; blogger" id="BLOGGER_PHOTO_ID_5213615626795078194" border="0" /></a><br />Ð"ля нас наиболее интересно изменение ширинÑ&lsqauo; элементов (<span style="font-weight: bold;">width</span>), поэтому просто находим эту переменную внутри редактируемого свойства и меняем ей значение, а если у свойства не задана ширина, то просто добавляем еÑ' вручную (например <span style="font-weight: bold;">width: 300px;</span> ) . Если вам хочется расширить блог на всю ширину страницÑ&lsqauo;, то просто удалите <span style="font-weight: bold;">width</span> из свойства <span style="font-weight: bold;">#outer-wrapper</span> (например в <a href="http://way-blogger.blogspot.com/">"Путь Ð'логгера"</a> это удалит так надоевшие многим зеленÑ&lsqauo;е полоски по бокам), после этого расширьте то нужного размера элементÑ&lsqauo; <span style="font-weight: bold;">#main</span> и <span style="font-weight: bold;">#sidebar</span> (помните ширину можно задавать не только в пикселях <span style="font-weight: bold;">px</span>, но и в процентах <span style="font-weight: bold;">%</span> от общей ширинÑ&lsqauo; страницÑ&lsqauo;) .<br />Ð'общем экспериментируйте, приводите ваш блог к идеальному виду, а после всех манипуляций не забÑ&lsqauo;вайте нажимать кнопку "Сохранить шаблон"<br />Если хотите бÑ&lsqauo;Ñ‚ÑŒ в курсе всего, просто подпишитесь на <a href="http://feeds.feedburner.com/wayblogger">RSS рассÑ&lsqauo;лку.</a><br /><br /><a href="http://way-blogger.blogspot.com/">Ð'ернуться на главную страницу</a><br /><a href="http://way-blogger.blogspot.com/2008/05/blog-post.html">Карта блога</a><div class="blogger-post-footer"><a href="http://blogun.ru/?r=8287">Заработай на рекламнÑ&lsqauo;Ñ… статьях?</a></div>
<p><a href="http://feeds.feedburner.com/~a/wayblogger?a=FRaWJ3"><img src="http://feeds.feedburner.com/~a/wayblogger?i=FRaWJ3" border="0"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~f/wayblogger?a=SRcW9I"><img src="http://feeds.feedburner.com/~f/wayblogger?i=SRcW9I" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/wayblogger?a=fU7PdI"><img src="http://feeds.feedburner.com/~f/wayblogger?i=fU7PdI" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/wayblogger?a=GWI6tI"><img src="http://feeds.feedburner.com/~f/wayblogger?i=GWI6tI" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/wayblogger?a=0VfLxI"><img src="http://feeds.feedburner.com/~f/wayblogger?i=0VfLxI" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/wayblogger?a=jxUrhI"><img src="http://feeds.feedburner.com/~f/wayblogger?i=jxUrhI" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/wayblogger?a=rUQWxI"><img src="http://feeds.feedburner.com/~f/wayblogger?i=rUQWxI" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/wayblogger/~4/315543490" height="1" width="1"/>

Комментариев нет: