Все сталкивались с проблемой больших постов которые тянуться далеко в низ и портят вид блога, поэтому существует очень хороший способ прятать большую часть текста под кат а видимым оставлять только анонс. Существует два способа прятать текст под кат
1. Простой я его потом опишу он легче но на мой взгляд не удобный, потому как "Читать далее..." отображается в каждом посте и при нажатии на него начинает обновлять или открывать новое окно.
2. По сложнее но дело того стоит, я выбрал именно его для своего блога. В отличии от первого способа при нажатии на ссылку "Читать далее..." он просто раскрывает остальной текст поста без надобности обновления страницы. Ну что поехали...
1. Идем Макет>Изменить HTML и сохраняем шаблон, это важно.
2. Теперь перед тегом </head> вставляем следующий код, сохраняем:
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>
3. Находим <div class='post-body' теперь внимание добавляем только то что выделено красным:
<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
4 Идем Настройки>Форматирование в пункт Шаблон сообщения вставляем следующий код и сохраняем
<span id="fullpost"">
</span>
Если вы все сделали по инструкции то все должно работать как у меня.
PS Возникнут проблемы или вопросы прошу в комменты.
Прочитать полностью...
Как сделать расширенное резюме поста, анонс "Читать далее..."
Как разместить AdSense в блог!
Рекламу АдСенсе можно расположить влюбом месте вашего блога, если вы не особо знакомы с xml то делайте народным метотом тыка но прежде сохраниет шаблон, если сохранили то бояться нечего.
Начнём с самого простого прежде чем вставить код его нужно отпарсить Внимание без этого ни как иначе вместо баннера Адсенсе у вас буде пустое место. Делается это просто при помощи специального сервиса я пользуюсь этим Quick Escape вставляете код подтверждаете и все дальше сами понимаете.
Тем кто добавляет в сайтбар по средствам Макет>Добавить гаджет>HTML/JavaScript этого делать не надо!
Ну и всем понятное дело код не должен выходить за теги <body> и </body>
Ну а если вам хочется привести АдСенсе в более божеский вид, есть выход. Как известно проливами АдСенсе запрещается менять рекламный код, а мы и не будем. Есть другой способ нарядить рекламу, все гениально и просто а самое главно подробно описано в следующем посте Меняем вид AdSense - законно! Подробная инструкция
Прочитать полностью...
Вертикальное меню (navbar).
Вы наверно заметили, 4 кнопы у меня слева это вертикальный навбар или меню, кому как привычнее. Я его по заимствовал с другого шаблона Blogger Genkit
А вот и сам код:
Этот код нужно расположить в CSS части
#divStayTopLeft {
left:5px;
position:absolute;
top:15px;
}
.sidetab {
}
.sidetab ul {
list-style-type: none;
margin: 0;
margin-top: 130px;
padding: 0;
}
.sidetab ul li {
border-bottom: 0;
margin-bottom: 0;
padding: 0;
}
.sidetab a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf-10oWi6Vrg9r2aIrLmt4ZThsQvhmnUAlv5EW0twohuH_46uBfmEaM9f5rgsxW5BVGnLVyjUx6HK8hguoTrdZ03uQfUumTEjUePirW_lqZ2YZVL_sa4JjgoFPDH0K_bm-mpQ42x9vM_4/s1600/gtbg_sidetab.gif) no-repeat;
display: block;
height: 60px;
padding-bottom: 6px;
width: 25px;
}
.sidetab a:link, .navlist a:visited {
color: #555;
text-decoration: none;
}
.sidetab a:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf-10oWi6Vrg9r2aIrLmt4ZThsQvhmnUAlv5EW0twohuH_46uBfmEaM9f5rgsxW5BVGnLVyjUx6HK8hguoTrdZ03uQfUumTEjUePirW_lqZ2YZVL_sa4JjgoFPDH0K_bm-mpQ42x9vM_4/s1600/gtbg_sidetab.gif) no-repeat 0px -70px;
}
.sidetab .sidetab_alt a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPBRoEQhlfksrd2kG9favGuSjHv0wAvqVFtY3ny9QmjF2JrZGyMDdDpebYerUJOdsKtxmuyT9WRz66uTSXu806P8Q1uFyM_FWxYXjsk1W_FniNBwOL8apqCL8jWUsLdvItj1ivCn8O3Q/s1600/gtfeed.gif) no-repeat;
height: 25px;
}
.sidetab .sidetab_alt a:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPBRoEQhlfksrd2kG9favGuSjHv0wAvqVFtY3ny9QmjF2JrZGyMDdDpebYerUJOdsKtxmuyT9WRz66uTSXu806P8Q1uFyM_FWxYXjsk1W_FniNBwOL8apqCL8jWUsLdvItj1ivCn8O3Q/s1600/gtfeed.gif) no-repeat 0px -35px;
}
Ну а этот уже между тегами <body> и </body>
<div id='divStayTopLeft'>
<div class='sidetab'>
<ul class='navlist'>
<li><a expr:href='data:blog.homepageUrl'><img alt='HOME' height='60' src='http://img98.imageshack.us/img98/7128/ererhomebo7.gif' width='25'/></a></li>
<li><a expr:href='data:blog.homepageUrl + "atom.xml"'><img alt='Sitemap' height='60' src='http://img98.imageshack.us/img98/9450/erersitemapbx5.gif' width='25'/></a></li>
<li><a href='#' title='Contact Me'><img alt='Contact' height='60' src='http://img98.imageshack.us/img98/7302/erercontactph2.gif' width='25'/></a></li>
<li class='sidetab_alt'><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'><img alt='' height='25' width='25'/></a></li></ul></div>
</div>
У меня он в самом конце сразу перед </body>, чисто из удобства.
PS Советую скачать все кнопки и залить на свой хост, мало ли. Ну а если захотите русифицировать то тут надо менять само изображение кнопки.
Если возникнут вопросы, прошу в комменты.
Прочитать полностью...
