Красивый шаблон для блоггера – Revolution Church Updated

пятница, 5 февраля 2010 г.

Вивальди/Осень скачать
Этот шаблон один из самых лучших шаблонов блоггер. Посмотрите как он выглядит. Скачать шаблон.


Как вы можете видеть по середине шаблона размещена красивая и большая галерея плавно меняющая изображения. Чтобы эта галерея заработала нужно сделать следующее.
Скачайте файл со скриптами. Благодаря этим скриптам сменяются картинки. Т.к. у владельцев блогов на Blogspot нет доступа к хостингу – нужно воспользоваться своим хостингом либо бесплатным. Например fileave.com. Здесь простая регистрация и простая форма для заливки файлов. Сюда же мы будем заливать не только скрипты чтобы форма для превью картинок заработала но и сами картинки подогнанные под четко установленный размер. Об этом ниже.
Вы скачали скрипты, зарегистрировались в fileave.com (либо разместили файлы на своем хостинге). Если вы хотите иметь собственный дешевый хостинг – можете купить его на iphoster.ru (всего 0.7 долларов в месяц или 8.4 доллара в год за 1000 мегабайт пространства и возможностью размещать до 3 сайтов). Хотя я слышал много плохих отзывов об этом хостинге – у моего знакомого уже около полугода размещен блог и проблем не наблюдалось. Если же не хотите рисковать и желаете взять более надежный хостинг – возьмите на best-hoster.ru, Будет дороже, но надежнее.
Чтобы слайдшоу заработало нужно в шаблоне поменять пути:

<link charset='utf-8' href='http://YOUR-FILE-HOST-NAME/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://YOUR-FILE-HOST-NAME/mootools-1.2.1-core-yc.js' type='text/javascript'/>
<script src="http://YOUR-FILE-HOST-NAME/mootools-1.2-more.js" type="text/javascript"></script>
<script src='http://YOUR-FILE-HOST-NAME/jd.gallery.js' type='text/javascript'/>
<script src='http://YOUR-FILE-HOST-NAME/js/mrsn.js' type='text/javascript'/>

Замените красные строки на путь, где вы разместите скрипты.
Когда будете заливать фотографии на хостинг – перед этим называйте фото короткими, английскими именами. Иногда, если фото названо русскими буквами, оно может не открыться. Также если называете фотографии несколькими словами ставьте между словами символ нижней черты _ Например так foto_o_prirode.jpg
Теперь найдите в шаблоне следующий код (если не знаете как устанавливать шаблон см. тут):

<div id='myGallery'>
<div class='imageElement'>
<h3>Featured Article #1</h3>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-1.htm' title='Read More'/>
<img class='full' src='http://blogovod.fileave.com/images/b-cumulus.jpg'/>
<img class='thumbnail' src='http://blogovod.fileave.com/images/b-cumulus-thumbnail.jpg'/>
</div>
<div class='imageElement'>
<h3>Featured Article #2</h3>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-2.htm' title='Read More'/>
<img class='full' src='http://blogovod.fileave.com/images/streamline.jpg'/>
<img class='thumbnail' src='http://blogovod.fileave.com/images/streamline-thumb.jpg'/>
</div>
<div class='imageElement'>
<h3>Featured Article #3</h3>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-3.htm' title='Read More'/>
<img class='full' src='http://blogovod.fileave.com/images/wp-st.jpg'/>
<img class='thumbnail' src='http://blogovod.fileave.com/images/wp-sb-th.png'/>
</div>
</div>

Этот код отвечает за вывод картинок. Минимально могут показываться две картинки, максимально сколько угодно. В этом коде значения обозначают следующее:
open – при нажатии на картинку будет открываться заданная вами страница.
full – большая картинка размером 588х400 пикселей которая показывается в слайд шоу
thumbnail – маленькая картинка 100х75 пикселей показываемая в вкладке “Анонсы”
Замените синие ссылки на пути с вашими фото в категориях open и thumbnail. Путь категории open замените на ссылку страницы которая будет показываться при нажатии на одну из картинок.
h3 – заголовок всплывающего к картинке.
p – текст всплывающего описания к картинке.
Поменяйте зеленый текст в вышеприведенном скрипте на свое описание картинок.
Если вы хотите добавить еще одну картинку вставьте между тегами <div id='myGallery'>  …  </div> следующий код:

<div class='imageElement'>
<h3>Featured Article #3</h3>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-3.htm' title='Read More'/>
<img class='full' src='http://blogovod.fileave.com/images/wp-st.jpg'/>
<img class='thumbnail' src='http://blogovod.fileave.com/images/wp-sb-th.png'/>
</div>

Чтобы удалить рекламу в шапке найдите в шаблоне код:

<script type='text/javascript'><!--
google_ad_client = "pub-5469344909203162";
google_ad_host = "pub-1599271086004685";
/* 468x60, created 11/5/08 */
google_ad_slot = "7530352650";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>

И удалите его.


Чтобы удалить скрипт превью картинок, найдите следующий код и удалите его:

<script src='http://YOUR-FILE-HOST-NAME/mootools-1.2.1-core-yc.js' type='text/javascript'/>
<script src="http://YOUR-FILE-HOST-NAME/mootools-1.2-more.js" type="text/javascript"></script>
<script src='http://YOUR-FILE-HOST-NAME/jd.gallery.js' type='text/javascript'/>

И еще этот код нужно удалить:

#myGallery, #myGallerySet, #flickrGallery {
width: 588px;
height: 400px;
z-index:5;
border: 1px solid #000;
}

.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 85px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}

.jdGallery .slideInfoZone h2
{
padding: 0;
font-size: 14px;
margin: 0;
margin: 2px 5px;
font-weight: bold;
color: #FFFFFF;
}

.jdGallery .slideInfoZone h3
{
padding: 0;
font-size: 14px;
margin: 0;
margin: 2px 5px;
font-weight: bold;
color: #FFFFFF;
}

function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready',startGallery);

Featured Article #1
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...
<a href='http://www.revolutiontwo.com/demo/church/featured/featured-article-1.htm' rel="nofollow">

Featured Article #2
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...
<a href='http://www.revolutiontwo.com/demo/church/featured/featured-article-2.htm' rel="nofollow">

Featured Article #3
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...
<a href='http://www.revolutiontwo.com/demo/church/featured/featured-article-3.htm' rel="nofollow">

Источник.

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