Самые красивые шаблоны для блоггера - Часть 6. Аккуратный шаблон с красивым превью картинок.

суббота, 23 января 2010 г.

Рахманинов/вариации на тему Паганини:

В прошлых статьях мы рассматривали самые красивые темные шаблоны, шаблон - победитель рейтинга. В этой я расскажу об очень аккуратном и чистом шаблоне Mahusay. Чтобы увидеть всю его красоту, которой не видно на картинке – вам нужно его увидеть (посмотреть шаблон, скачать шаблон).


шаблон для блоггер Mahusay
Думаю вы уже обратили внимание как красиво в шапке шаблона меняются фотографии. Также автор шаблона сделал задний фон темным. Очень разумно. Когда долго работаешь за компьютером волей неволей болят глаза. Темный фон снимает нагрузку  с глаз.
Для того чтобы слайдшоу показывало наши фотографии нужно покопаться в настройках

<div class='imageElement'>
<h2>&lt;script&gt;var startposts = 0; numposts = 1; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; &lt;/script&gt;&lt;script src=&quot;http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</h2>
<p>&lt;script&gt;var startposts = 0; numposts = 1; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; &lt;/script&gt;&lt;script src=&quot;http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</p>
<a class='open' href='#' title='Read More'/>
<img class='full' src='http://i606.photobucket.com/albums/tt142/freebloggertemplate/mahusay/image1.jpg'/>
<img class='thumbnail' src='http://i606.photobucket.com/albums/tt142/freebloggertemplate/mahusay/image1.jpg'/>
</div>
<div class='imageElement'>
<h2>&lt;script&gt;var startposts = 1; numposts = 2; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; &lt;/script&gt;&lt;script src=&quot;http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</h2>
<p>&lt;script&gt;var startposts = 1; numposts = 2; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; &lt;/script&gt;&lt;script src=&quot;http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</p>
<a class='open' href='#' title='Read More'/>
<img class='full' src='http://i606.photobucket.com/albums/tt142/freebloggertemplate/mahusay/image2.jpg'/>
<img class='thumbnail' src='http://i606.photobucket.com/albums/tt142/freebloggertemplate/mahusay/image2.jpg'/>
</div>
<div class='imageElement'>
<h2>&lt;script&gt;var startposts = 2; numposts = 3; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; &lt;/script&gt;&lt;script src=&quot;http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</h2>
<p>&lt;script&gt;var startposts = 2; numposts = 3; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; &lt;/script&gt;&lt;script src=&quot;http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</p>
<a class='open' href='#' title='Read More'/>
<img class='full' src='http://i606.photobucket.com/albums/tt142/freebloggertemplate/mahusay/image3.jpg'/>
<img class='thumbnail' src='http://i606.photobucket.com/albums/tt142/freebloggertemplate/mahusay/image3.jpg'/>
</div>
<div class='imageElement'>
<h2>&lt;script&gt;var startposts = 3; numposts = 4; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; &lt;/script&gt;&lt;script src=&quot;http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</h2>
<p>&lt;script&gt;var startposts = 3; numposts = 4; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; &lt;/script&gt;&lt;script src=&quot;http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</p>
<a class='open' href='#' title='Read More'/>
<img class='full' src='http://i606.photobucket.com/albums/tt142/freebloggertemplate/mahusay/image1.jpg'/>
<img class='thumbnail' src='http://i606.photobucket.com/albums/tt142/freebloggertemplate/mahusay/image1.jpg'/>
</div>
<div class='imageElement'>
<h2>&lt;script&gt;var startposts = 4; numposts = 5; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; &lt;/script&gt;&lt;script src=&quot;http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</h2>
<p>&lt;script&gt;var startposts = 4; numposts = 5; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; &lt;/script&gt;&lt;script src=&quot;http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp&quot;&gt;
&lt;/script&gt;</p>
<a class='open' href='#' title='Read More'/>
<img class='full' src='http://i606.photobucket.com/albums/tt142/freebloggertemplate/mahusay/image2.jpg'/>
<img class='thumbnail' src='http://i606.photobucket.com/albums/tt142/freebloggertemplate/mahusay/image2.jpg'/>
</div>
В приведенном выше коде нужнопоменять красные строки на адрес вашего блога, а синие строки на ссылки фотографий которые показываются в красивом превью на главной странице. Размер картинок должен быть 606x225 пикселов.
В шаблоне вверху есть копки для RSS подписки и twittera. Чтобы заработал twitter замените в следующем коде строку на ваш твиттер:
<a href='http://twitter.com/ВАШЕ ИМЯ' id='twitter' title='Twitter'>Twitter</a>
Для RSS замените красную строку на ваш фид:
<input name='url' type='hidden' value='http://feeds.feedburner.com/~e?ffid=YOURFEEDBURNERID'/>
Чтобы заработали кнопки навигации (Главная, О нас и пр.) замените в данном коде Пути к категориям (символ # на ссылку) А синие слова на название своих категорий.
<ul>
<li class='current_page_item'><a href='/'><span><span>Home</span></span></a></li>
<li class='page_item page-item-39'><a href='#' title='About'><span><span>About</span></span></a></li>
<li class='page_item page-item-28'><a href='#' title='Child Page'><span><span>Child Page</span></span></a></li>
</ul>
Профиль автора (справа от картинок) меняется в коде:
<img alt='' class='avatar avatar-56' height='56' src='http://i606.photobucket.com/albums/tt142/freebloggertemplate/mahusay/thumbnail.png' width='56'/><p>This is a sample info about the author. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis.</p>
Замените красную ссылку на ссылку с нужной вам фотографией.
Этот шаблон может некорректно работать в Internet Explorer. Для этого в теле шаблона найдем код:
.jdGallery a
{
font-size: 100%;
text-decoration: none;
color: inherit;
}
и заменим его на вот этот:
.jdGallery a, .jdGallery a:hover
{
font-size: 100%;
text-decoration: none;
color: #fff;
}
Сохраним.

Похожие статьи

24 комментариев:

Tamao комментирует...

Извините, а не могли бы Вы объяснить, как восстановить панель navbar именно в этом шаблоне? Что-то не выходит у меня ничего по инструкции, которая дана в статье Восстановление элементов navbar. Я ничего не смыслю в html, поэтому буду признателен, если Вы подробно всё опишите.

Denis Bychkov комментирует...

В статье "Восстановление элементов Navbar" рассказывается как восстановить панель навбар не в ее оригинальном виде, но о восстановлении ее самых важных элементов в виде отдельного меню(В статье можете посмотреть на второй картинке). Я проверил в шаблоне который вы выбрали и все работает. Нужно ясно понять в каком моменте вы не разобрались.
Важные пункты:
1. определить BlogID(описано в статье).
2. найти строку:<b:section class='sidebar'
в теле шаблона и перед ней вставить код с ХХХХХХХХ, где ХХХХ надо заменить на BlogID.
Завтра напишу про все это бриф статью где все растолкую.

Denis Bychkov комментирует...

если что пищите в ICQ

274805552

Tamao комментирует...

Спасибо, буду ждать выхода статьи. Если не осилю, постучусь в аську.

Denis Bychkov комментирует...

статья уже написана. Прочитать ее можно здесь :
http://lagunof.blogspot.com/2010/02/nastroika-shablonov-bloggera.html

ЦУ комментирует...

полюбуйтесь установил этот шаблон http://www.pereplanirovka-ufa.ru/)

kol1 комментирует...

А куда нужно установить шаблон, можно указать путь. Спасибо.

The Neighbour комментирует...

Чтобы установить шаблон необходимо зайти в настройки блога, "дизайн" Вкладка "Изменить HTML" , затем нажать выбрать, выбираете файл шаблона ( с расширением XML) и нажимаете "загурзить"

kol1 комментирует...

Спасибо за ответ. Только не могу найти пункт "Изменить HTML". У меня в графе дизайн следующее:
темы
виджеты
меню
редактор
Уже все перерыл, помогите.

The Neighbour комментирует...

Вот написал статью по этому поводу, если непонятно, обязательно пишите!

http://lagunof.blogspot.com/2010/11/kak-izmenit-shablon-v-blogger.html

kol1 комментирует...

Огромное спасибо. Я просто не понял, что это шаблон для blogger. Пытался применить к wordpress :-) Но информация очень пригодилась и я поменял на своем блоге дизайн, который был стандартным. Вот как бывает, ищешь одно, а находишь другое :-)

kol1 комментирует...

Мне вообщето нужно добавить миникартинку в пост на главную. Может подскажите, если знаете. Спасибо. Вот ссылка на форум с проблемой
http://forum.searchengines.ru/showthread.php?p=7906687#post7906687

nhk комментирует...

А как убрать справа от картинки - "RSS Новости" с аватаркой и разделителем, и оставить только "о авторе" ? И как настроить поиск по блогу (который наверху)?

x-ray комментирует...

На пикасе лежат картинки в слайд шоу на верхней панеле 606х225, когда вставляешь линк на картинку, то картинка вставляется меньше рамки - почему ? Как исправить ?

The Neighbour комментирует...

Измените, размер картинки!

ЛеННин комментирует...

Здравствуйте! А у меня почему-то при нажатии на скачать открывается окошко Сервер не найден. Руки корявые? Или проблемы на сервере? Спасибо. :)У Вас очень толковые темы, мне, чайнику, нравится здесь. :)

Лагунов Сергей комментирует...

да все верно вылетел сервер, поищите тему по интернтету

ЛеННин комментирует...

Нашла, поставила, спасибо! Все, что надо поменяла, загвоздка с картинкой в шапке. Ставлю с радикала, выходит половинка картинки. Где можно сделать картинку точного размера, который Вы даете? Сразу оговорюсь. Я чайник, впервые вижу все коды. :)

ЛеННин комментирует...

Все, разобралась, спасибо. )

Катрин комментирует...

Всем доброго времени суток))Подскажите пожалуйста как сделать активными кнопки навигации и поиск по сайту в данном шаблоне?Точнее как можно поместить в них текстовое сообщение,чтобы например при нажатии клавиши "Контакты" высвечивались координаты..а не просто переключалось на главную страницу..хм..не знаю правильно ли я изложила свою проблему((Заранее благодарю!

Катрин комментирует...
Этот комментарий был удален автором.
Лагунов Сергей комментирует...

Клавиша о нас добавляется в независимых страницах , я писал статью о независимых страницах. Поиск ставиться на блоге в виде гаджета. Посмотрите в дизайне, добавить гаджет поиск. Редактировать Контакты можно из админпанели блоггера третья вкладка от той где мы обычно печатаем статьи.

Катрин комментирует...

И снова здравствуйте!Сергей,я наверно неправильно изложила суть проблемы.В данном шаблоне уже есть "поиск",только он неактивен..и тоже самое с клавишами..они тоже существуют! вот ссылка,посмотрите пожалуйста
http://justokey.blogspot.com/

Лагунов Сергей комментирует...

Попадались мне шаблоны у которых не работает поиск, это нужно подправлять в теле шаблона, сложно достаточно. А ссылки меню у вас не работают, т.к. вам нужно сначала создать независимые страницы, посмотрите у меня статью по независимым страницам в блоге. Затем в теле шаблона переписать пути на эти страницы. В самом коде.

Отправить комментарий

Оставляйте ваши комментарии

 
 
 

Читать блог на другом языке

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified
 
Copyright ©Lagunof.com
Блога автора книги "Недвижимость: классическая, виртуальная, интеллектуальная" При перепечатке материалов с блога обратная ссылка обязательна
e4a11e6f00df223bf058f2795454739b