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

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

В прошлых статьях мы рассматривали самые красивые темные шаблоны, шаблон - победитель рейтинга. В этой я расскажу об очень аккуратном и чистом шаблоне 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;
}

Сохраним.