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

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

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

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

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

<div class='imageElement'>
<h2><script>var startposts = 0; numposts = 1; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 0; numposts = 1; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></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><script>var startposts = 1; numposts = 2; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 1; numposts = 2; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></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><script>var startposts = 2; numposts = 3; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 2; numposts = 3; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></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><script>var startposts = 3; numposts = 4; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 3; numposts = 4; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></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><script>var startposts = 4; numposts = 5; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 4; numposts = 5; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://mahusay-fbt.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></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 комментирует... 2 февраля 2010 г. в 22:53: Извините, а не могли бы Вы объяснить, как восстановить панель navbar именно в этом шаблоне? Что-то не выходит у меня ничего по инструкции, которая дана в статье Восстановление элементов navbar. Я ничего не смыслю в html, поэтому буду признателен, если Вы подробно всё опишите.
The Neighbour комментирует... 3 февраля 2010 г. в 01:27: В статье "Восстановление элементов Navbar" рассказывается как восстановить панель навбар не в ее оригинальном виде, но о восстановлении ее самых важных элементов в виде отдельного меню(В статье можете посмотреть на второй картинке). Я проверил в шаблоне который вы выбрали и все работает. Нужно ясно понять в каком моменте вы не разобрались.
Важные пункты:
1. определить BlogID(описано в статье).
2. найти строку:<b:section class='sidebar'
в теле шаблона и перед ней вставить код с ХХХХХХХХ, где ХХХХ надо заменить на BlogID.
Завтра напишу про все это бриф статью где все растолкую.
The Neighbour комментирует... 3 февраля 2010 г. в 01:30: если что пищите в ICQ

274805552
Tamao комментирует... 3 февраля 2010 г. в 15:41: Спасибо, буду ждать выхода статьи. Если не осилю, постучусь в аську.
The Neighbour комментирует... 3 февраля 2010 г. в 17:09: статья уже написана. Прочитать ее можно здесь :
http://lagunof.blogspot.com/2010/02/nastroika-shablonov-bloggera.html
ЦУ комментирует... 15 сентября 2010 г. в 11:29: полюбуйтесь установил этот шаблон http://www.pereplanirovka-ufa.ru/)
Анонимный комментирует... 2 ноября 2010 г. в 23:11: А куда нужно установить шаблон, можно указать путь. Спасибо.
The Neighbour комментирует... 3 ноября 2010 г. в 09:28: Чтобы установить шаблон необходимо зайти в настройки блога, "дизайн" Вкладка "Изменить HTML" , затем нажать выбрать, выбираете файл шаблона ( с расширением XML) и нажимаете "загурзить"
Анонимный комментирует... 4 ноября 2010 г. в 09:27: Спасибо за ответ. Только не могу найти пункт "Изменить HTML". У меня в графе дизайн следующее:
темы
виджеты
меню
редактор
Уже все перерыл, помогите.
The Neighbour комментирует... 4 ноября 2010 г. в 09:58: Вот написал статью по этому поводу, если непонятно, обязательно пишите!

http://lagunof.blogspot.com/2010/11/kak-izmenit-shablon-v-blogger.html
Анонимный комментирует... 4 ноября 2010 г. в 10:27: Огромное спасибо. Я просто не понял, что это шаблон для blogger. Пытался применить к wordpress :-) Но информация очень пригодилась и я поменял на своем блоге дизайн, который был стандартным. Вот как бывает, ищешь одно, а находишь другое :-)
Анонимный комментирует... 4 ноября 2010 г. в 13:50: Мне вообщето нужно добавить миникартинку в пост на главную. Может подскажите, если знаете. Спасибо. Вот ссылка на форум с проблемой
http://forum.searchengines.ru/showthread.php?p=7906687#post7906687
nhk комментирует... 12 декабря 2010 г. в 20:18: А как убрать справа от картинки - "RSS Новости" с аватаркой и разделителем, и оставить только "о авторе" ? И как настроить поиск по блогу (который наверху)?
nhk комментирует... 15 декабря 2010 г. в 05:14: На пикасе лежат картинки в слайд шоу на верхней панеле 606х225, когда вставляешь линк на картинку, то картинка вставляется меньше рамки - почему ? Как исправить ?
The Neighbour комментирует... 16 декабря 2010 г. в 14:16: Измените, размер картинки!
ЛеННин комментирует... 19 января 2011 г. в 09:20: Здравствуйте! А у меня почему-то при нажатии на скачать открывается окошко Сервер не найден. Руки корявые? Или проблемы на сервере? Спасибо. :)У Вас очень толковые темы, мне, чайнику, нравится здесь. :)
Unknown комментирует... 19 января 2011 г. в 20:39: да все верно вылетел сервер, поищите тему по интернтету
ЛеННин комментирует... 20 января 2011 г. в 15:05: Нашла, поставила, спасибо! Все, что надо поменяла, загвоздка с картинкой в шапке. Ставлю с радикала, выходит половинка картинки. Где можно сделать картинку точного размера, который Вы даете? Сразу оговорюсь. Я чайник, впервые вижу все коды. :)
ЛеННин комментирует... 20 января 2011 г. в 15:11: Все, разобралась, спасибо. )
Катрин комментирует... 12 августа 2011 г. в 00:57: Всем доброго времени суток))Подскажите пожалуйста как сделать активными кнопки навигации и поиск по сайту в данном шаблоне?Точнее как можно поместить в них текстовое сообщение,чтобы например при нажатии клавиши "Контакты" высвечивались координаты..а не просто переключалось на главную страницу..хм..не знаю правильно ли я изложила свою проблему((Заранее благодарю!
Катрин комментирует... 12 августа 2011 г. в 01:02: Этот комментарий был удален автором.
Unknown комментирует... 12 августа 2011 г. в 05:35: Клавиша о нас добавляется в независимых страницах , я писал статью о независимых страницах. Поиск ставиться на блоге в виде гаджета. Посмотрите в дизайне, добавить гаджет поиск. Редактировать Контакты можно из админпанели блоггера третья вкладка от той где мы обычно печатаем статьи.
Катрин комментирует... 13 августа 2011 г. в 13:06: И снова здравствуйте!Сергей,я наверно неправильно изложила суть проблемы.В данном шаблоне уже есть "поиск",только он неактивен..и тоже самое с клавишами..они тоже существуют! вот ссылка,посмотрите пожалуйста
http://justokey.blogspot.com/
Unknown комментирует... 13 августа 2011 г. в 17:59: Попадались мне шаблоны у которых не работает поиск, это нужно подправлять в теле шаблона, сложно достаточно. А ссылки меню у вас не работают, т.к. вам нужно сначала создать независимые страницы, посмотрите у меня статью по независимым страницам в блоге. Затем в теле шаблона переписать пути на эти страницы. В самом коде.