Добро пожаловать на форум!
Новые сообщения Участники Правила форума Поиск RSS
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные пользователи Новые участники
Болт (3758)
XemorDio (2728)
Skyline (2698)
Strelok41 (2177)
Максим [16.12.2017]
vuky [15.12.2017]
LaysPL [13.12.2017]
_Zmey_ [05.12.2017]
Потеряшка [03.12.2017]
Страница 1 из 11
Форум » Web-раздел » Скрипты uCoz » Вид главной страницы by Гай Квинт
Вид главной страницы by Гай Квинт
Гай_Квинт Дата: Понедельник, 07.11.2016, 18:51 | Сообщение # 1
Группа: Одиночки
Сообщений: 6
Награды: 0 Репутация: 14
Статус: Offline
Итак. В связи со скорым переходом на новый дизайн, выкладываю свои наработки. Может кому и пригодится. Выкладываю, как есть, так что делайте под себя сами.
Основная задача главной страницы сайта - показать, что есть на ресурсе. Я постарался по максимуму разложить информацию.
Рассчитано на ширину сайта 980px.
Вставляем это в то место, где должно быть отображено. Обратите внимание, что не должно быть глобальных блоков, ибо просто не поместится.
Код
<div class="b_cont"><!-- <bc> --><table width="100%"> <tr> <td style="-webkit-border-radius: 5px; border-radius: 5px; border: 2px solid #000000;">
<table cellpadding="1" cellspacing="1" style="width: 100%; -webkit-border-radius: 5px; border-radius: 5px; border: 0px solid #000000;">
<tbody>
<tr>
<td><font face="Roman"><span style="font-size: 10pt; color: #d5d5d5;"><span style="color: #b68611; font-size: 10pt;">НОВЫЕ</span> БЛОГИ</span></font></td>
<td><font face="Roman"><span style="font-size: 10pt; color: #d5d5d5;"><span style="color: #b68611; font-size: 10pt;">НОВЫЕ</span> КОММЕНТАРИИ</span></font></td>
</tr>
<tr>
<td>
<table cellpadding="1" cellspacing="1" style="width: 100%;">
<tbody>
<tr>
<td style="-webkit-border-radius: 5px; border-radius: 5px; background: #151515; border: 1px solid #000000;"><center> <div class="container" id="example"><div id="slides"><div class="slides_container">

<div class="slide">
<a href="/last-zone"><img src="http://stalker-uc.ru/designs_77/img/slide1.jpg" height="223" alt="Slide 1"></a>
<div class="caption" style="bottom:0"><p><a href="http://stalker-uc.ru/last-zone">ФРПГ "Путь Сталкера"</a></p>
</div></div>

<div class="slide">
<a href="/articles/31-1-0-150"><img src="http://stalker-uc.ru/designs_77/img/slide2.jpg" height="223" alt="Slide 2"></a>
<div class="caption">
<p><a href="http://stalker-uc.ru/articles/31-1-0-150">Релиз игры "Казаки 3" от GSC Game World</a></p>
</div></div>

<div class="slide">
<a href="/forum/10"><img src="http://stalker-uc.ru/designs_77/img/slide3.jpg" height="223" alt="Slide 3"></a>
<div class="caption">
<p><a href="http://stalker-uc.ru/forum/10">Новости и обновления нашего портала</a></p>
</div></div>

<div class="slide">
<a href="/films"><img src="http://stalker-uc.ru/designs_77/img/slide4.jpg" height="223" alt="Slide 4"></a>
<div class="caption">
<p><a href="http://stalker-uc.ru/films">Фильмы тематики Постапокалипсис</a></p>
</div></div>

</div>

<a href="#" class="prev"><img src="http://manual.ucoz.net/files/1/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="http://manual.ucoz.net/files/1/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>

</div>
</div></center>ИНФОРМЕР СТАТЕЙ</td>
</tr>
</tbody>
</table>
</td>
<td>
<table cellpadding="1" cellspacing="1" style="width: 100%; height: 632px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #000000; background: #151515;">
<tbody>
<tr>
<td style="-webkit-border-radius: 5px; border-radius: 5px; background: #151515;">ПОСЛЕДНИЕ КОММЕНТАРИИ<hr>АКТИВНЫЕ КОММЕНТАТОРЫ</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p> </p>

<table style="width: 100%; -webkit-border-radius: 5px; border-radius: 5px; border: 0px solid #000000;" cellspacing="1" cellpadding="1">

<tbody>
<tr>
<td class="block_title"><font face="Roman"><span style="font-size: 10pt; color: rgb(213, 213, 213);"><span style="color: rgb(182, 134, 17); font-size: 10pt;">ПОСЛЕДНИЕ</span> НОВОСТИ</span></font></td>
<td><font face="Roman"><span style="color: rgb(213, 213, 213); font-size: 10pt;"><span style="color: rgb(182, 134, 17); font-size: 10pt;">НОВОЕ</span> НА ФОРУМЕ</span></font></td>
<td><font face="Roman"><span style="color: rgb(213, 213, 213); font-size: 10pt;"><span style="color: rgb(182, 134, 17); font-size: 10pt;"><span style="color: rgb(182, 134, 17); font-size: 10pt;">МЫ</span></span> ВКОНТАКТЕ</span></font></td>
</tr>
<tr>
<td>
<table style="width: 100%; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #000000;" cellspacing="1" cellpadding="1">
<tbody>
<tr>
<td style="-webkit-border-radius: 5px; border-radius: 5px; background: #151515;">ПОСЛЕДНИЕ НОВОСТИ</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #000000;" cellspacing="1" cellpadding="1">
<tbody>
<tr>
<td style="-webkit-border-radius: 5px; border-radius: 5px; background: #151515;">ПОСЛЕДНЕЕ НА ФОРУМЕ</td>
</tr>
</tbody>
</table>
</td>
<td>
<center><script type="text/javascript" src="//vk.com/js/api/openapi.js?122"></script><!-- VK Widget -->
<div id="vk_groups"> </div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "260", height: "342", color1: '151515', color2: 'b68611', color3: 'b68611'}, 83924954);
</script></center>
</td>
</tr>
</tbody>
</table>
<p> </p>
<table cellpadding="1" cellspacing="1" style="width: 100%; -webkit-border-radius: 5px; border-radius: 5px; border: 0px solid #000000;">
<tbody>
<tr>
<td><font face="Roman"><span style="font-size: 10pt; color: #d5d5d5;"><span style="color: #b68611; font-size: 10pt;">ПОПУЛЯРНЫЕ</span> ФАЙЛЫ</span></font></td>
<td><font face="Roman"><span style="font-size: 10pt; color: #d5d5d5;"><span style="color: #b68611; font-size: 10pt;">ИНФОРМАЦИЯ</span> О САЙТЕ</span></font></td>
</tr>
<tr>
<td>
<table cellpadding="1" cellspacing="1" style="width: 100%; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #000000;">
<tbody>
<tr>
<td style="-webkit-border-radius: 5px; border-radius: 5px; background: #151515;">ПОПУЛЯРНЫЕ ФАЙЛЫ</td>
</tr>
</tbody>
</table>
</td>
<td>
<table cellpadding="1" cellspacing="1" style="width: 100%; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #000000;">
<tbody>
<tr>
<td style="-webkit-border-radius: 5px; border-radius: 5px; background: #151515;">
<p align="center"><font color="#D3D3D3"><b>United Stalker Community</b></font></p>
<p align="center"><font color="#D3D3D3">Это уникальный интернет-портал, посвященный постапокалипстическим играм S.T.A.L.K.E.R., Survarium, Metro, Fallout.</font></p>
<p align="center"><font color="#D3D3D3">На нашем сайте ты можешь погрузиться в атмосферу игры, пообщаться на форуме, в чате. Играть в ФРПГ и многое другое. Вступай в наши ряды!</font></p>
<hr>
<center><a href="http://stalker-gamers.ru"><img alt="Мир Геймеров" border="0" height="31" src="http://stalker-gamers.ru/sg.gif" title="Мир Геймеров" width="88"></a><a href="http://world-stalker.3dn.ru/" target="blank"><img border="0" src="http://world-stalker.3dn.ru/ws.gif"></a><br>
<hr><a href="http://stalker-gaming.clan.su"><img alt="Моды Тени Чернобыля, Чистое Небо, Зов Припяти. Карты, Читы, Прохождение модов" src="http://stalker-gaming.clan.su/sg/banner/gaming.gif"></a><img src="http://stalker-uc.ru/diza/88x31.png"></center>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p> </p>
<table cellpadding="1" cellspacing="1" style="width: 100%; -webkit-border-radius: 5px; border-radius: 5px; border: 0px solid #000000;">
<tbody>
<tr>
<td><font face="Roman"><span style="font-size: 10pt; color: #d5d5d5;"><span style="color: #b68611; font-size: 10pt;">ИГРЫ</span></span></font></td>
<td><font face="Roman"><span style="font-size: 10pt; color: #d5d5d5;"><span style="color: #b68611; font-size: 10pt;">ФОТОГАЛЕРЕЯ</span></span></font></td>
</tr>
<tr>
<td>
<table cellpadding="1" cellspacing="1" style="width: 596px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #000000;">
<tbody>
<tr>
<td style="-webkit-border-radius: 5px; border-radius: 5px; background: #151515;"><a href="http://stalker-uc.ru/shadow-of-chernobyl"><div class="h_b_poster"><img src="http://stalker-uc.ru/designs_77/other-images/game-soc.jpg"></a> </div><a href="http://stalker-uc.ru/clear-sky"><div class="h_b_poster"><img src="http://stalker-uc.ru/designs_77/other-images/game-cs.jpg"></a> </div>
<a href="http://stalker-uc.ru/call-of-pripyat"><div class="h_b_poster"><img src="https://pp.vk.me/c637730/v637730550/2ee4/l_xMJ7VZO-s.jpg"></a> </div>
<a href="/survarium"><div class="h_b_poster"><img src="http://stalker-uc.ru/designs_77/other-images/game-surv.jpg"></a> </div>
<a href="http://stalker-uc.ru/metro-2033"><div class="h_b_poster"><img src="http://stalker-uc.ru/designs_77/other-images/game-2033.jpg"></a> </div>
<a href="http://stalker-uc.ru/stalker-online"><div class="h_b_poster"><img src="https://pp.vk.me/c637730/v637730550/2e0d/zIQ4JpaBd70.jpg"></a> </div></td>
</tr>
</tbody>
</table>
</td>
<td>
<table cellpadding="1" cellspacing="1" style="width: 366px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #000000;">
<tbody>
<tr>
<td style="-webkit-border-radius: 5px; border-radius: 5px; background: #151515;">НОВЫЕ ФОТОГРАФИИ</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p> </p>
<!-- Yandex.Metrika informer -->
<a href="https://metrika.yandex.ru/stat/?id=28614656&from=informer"
target="_blank" rel="nofollow"><img src="https://informer.yandex.ru/informer/28614656/3_0_666471FF_464451FF_1_pageviews"
style="width:88px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" class="ym-advanced-informer" data-cid="28614656" data-lang="ru" /></a>
<!-- /Yandex.Metrika informer -->

<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter28614656 = new Ya.Metrika({
id:28614656,
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
} catch(e) { }
});

var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function () { n.parentNode.insertBefore(s, n); };
s.type = "text/javascript";
s.async = true;
s.src = "https://mc.yandex.ru/metrika/watch.js";

if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/28614656" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</table>

Это ставим выше или ниже тэйбла, не важно
Код
<script type="text/javascript" src="http://stalker-uc.ru/designs_77/img/slides.js"></script>
<script type="text/javascript">
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'loading.gif',
play: 4100,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});</script>

Это ставим в css
Код
.h_b_poster {background:url(http://stalker-uc.ru/designs_77/h_b_poster.png) no-repeat; height:100px; width:187px; padding:3px; margin:0 3px 0 0; color:#fff; float:left; position:relative;}
.h_b_poster:last-child {margin:0;}
.h_b_poster .h_t_inf, .h_b_media .h_b_poster .h_t_inf_2 {background:url(http://stalker-uc.ru/designs_77/container_wrap.png); padding:2px 5px 4px 5px; font-size:10px; text-align:center; position:absolute;}
.h_b_poster .h_t_title {background:url(http://stalker-uc.ru/designs_77/container_wrap.png); padding:2px 4px; width:179px; display:block; overflow:hidden; position:absolute; bottom:3px; font-size:10px;}
.h_b_poster .h_t_quad {background:url(http://stalker-uc.ru/designs_77/h_b_quad.png) no-repeat 5px center; padding:0 5px 0 15px; position:absolute; bottom:5px;}
.h_b_poster img {height:100px; width:187px;}

Дальше - информеры. Всё в код вставил, лень по отдельности разбирать
Код

Информер статей
<div class="b_cont"><!-- <bc> --><table width="327"> <tr> <td style="-webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #000000;">
<div id="entryID$ID$"><div style="text-align:center;">
<div class="videoarticle" id="expected$ID$">
<div id="article$ID$" class="videoarticleimg">
<div id="articleinfo$ID$" class="videoaticleinfo">
Автор: <a href="$PROFILE_URL$" class="ve-author"style="font-weight:bold; color:#ffffff; font-size:12px;">$USERNAME$</a>
<div style="padding-top:2px;">Просмотров: $READS$</div>
</div>
<a href="$ENTRY_URL$"><img src="$IMG_URL1$" width="327" alt=""/></a>
</div>
<div style="padding-top:5px;"><a href="$ENTRY_URL$" class="aticlename" style="font-weight:bold;">$TITLE$</a></div>
<div class="articlecat">Категория: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></div>
</div>
<script type="text/javascript">
$('#article$ID$').hover(function() {
$('#articleinfo$ID$').stop().animate({bottom:0},200);
},function() {
$('#articleinfo$ID$').stop().animate({bottom:-39},200);
});
</script>
</div></div></table>
--
Информер последних комментариев
<ul class="clearlist"> <li><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$" class="avatar" height="45" width="45"><?else?><img src="/.s/img/icon/social/noavatar.png" class="avatar" height="45" width="45"/><?endif?><div>
<span class="recent_comment_name">$USERNAME$</span> <span class="ctime">$DATE$</span></div><i class="fa fa-pencil" aria-hidden="true"></i> <a href="$ENTRY_URL$#comments" title="$USERNAME$ | $ENTRY_TITLE$">$MESSAGE$</a><div class="clear"></div></li></ul>
<style>
/*-------Коментарии последние------------- */

ul.clearlist {margin: 0; padding: 0; font-family: 'PT Sans';}
.clearlist li .avatar { float: left; margin-right: 5px; padding: 1px; border: 1px solid #151515; border-radius: 50px;}
.clearlist li .recent_comment_name, .recent_comment_name a {color: #d15128; font-weight: 700; font-size: 13px; padding-top: 5px; display: inline-block;}
.clearlist li .ctime {color: #999; padding-left: 5px;}
.clearlist a { color: #b68611; font-size: 12px;}
.clearlist a:hover { color: #3A413F; }
.clearlist li {padding: 5px 0; border-bottom: 1px dotted #151515; background-size: 200.22% auto; -webkit-background-size: 200.22% auto; -moz-background-size: 200.22% auto; background-position: -0 0; background-image: linear-gradient(to right,rgba(255,255,255,0) 50%,#87CEEB 50 <img src="/.s/sm/2/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ; transition: background-position .5s ease-out; -webkit-transition: background-position .5s ease-out; white-space: nowrap; overflow: hidden; -webkit-mask: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 210px, rgba(0, 0, 0, 0));}
.clearlist li:hover {background-position: -99.99% 0;}
.clearlist i { color: #87CEEB;}

/*-------Конец - Коментарии последние------------- */</style>
--
Активные комментаторы
<ul class="clearlist"> <li><?if($AVATAR_URL$)?><img src="$AVATAR_URL$" class="avatar" height="45" width="45"><?else?><img src="/.s/img/icon/social/noavatar.png" class="avatar" height="45" width="45"/><?endif?><div>
<span class="recent_comment_name">$USERNAME$</span> <span class="ctime">$DATE$</span></div><i class="fa fa-pencil" aria-hidden="true"></i> <a href="$ENTRY_URL$#comments" title="$USERNAME$ | $ENTRY_TITLE$">Комментариев: $COM_POSTS$</a><div class="clear"></div></li></ul>
<style>
/*-------Коментарии последние------------- */

ul.clearlist {margin: 0; padding: 0; font-family: 'PT Sans';}
.clearlist li .avatar { float: left; margin-right: 5px; padding: 1px; border: 1px solid #151515; border-radius: 50px;}
.clearlist li .recent_comment_name, .recent_comment_name a {color: #d15128; font-weight: 700; font-size: 13px; padding-top: 5px; display: inline-block;}
.clearlist li .ctime {color: #999; padding-left: 5px;}
.clearlist a { color: #b68611; font-size: 12px;}
.clearlist a:hover { color: #3A413F; }
.clearlist li {padding: 5px 0; border-bottom: 1px dotted #151515; background-size: 200.22% auto; -webkit-background-size: 200.22% auto; -moz-background-size: 200.22% auto; background-position: -0 0; background-image: linear-gradient(to right,rgba(255,255,255,0) 50%,#87CEEB 50 <img src="/.s/sm/2/wacko.gif" border="0" align="absmiddle" alt="wacko" /> ; transition: background-position .5s ease-out; -webkit-transition: background-position .5s ease-out; white-space: nowrap; overflow: hidden; -webkit-mask: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0) 210px, rgba(0, 0, 0, 0));}
.clearlist li:hover {background-position: -99.99% 0;}
.clearlist i { color: #87CEEB;}

/*-------Конец - Коментарии последние------------- */</style>
--
Последнее на форуме
<li><b><a href="$LAST_POST_URL$">$THREAD_TITLE$</a> </b><span>| $POST_USER$</span><div style="font:7pt">$DATE$ $TIME$ | <a href="$FORUM_URL$">$FORUM$</a></div></li><hr>
--
Последние новости
<a href="$ENTRY_URL$"><center><div class="b_cont"><!-- <bc> --><table width="200"> <tr> <td style="-webkit-border-radius: 5px; border-radius: 5px; border: 2px solid #000000;">
<center><b>$TITLE$</b></center>
</table></a>

<div class="b_cont"><!-- <bc> --><table width="200"> <tr> <td style="-webkit-border-radius: 5px; border-radius: 5px; border: 2px solid #000000; background:url('http://stalker-uc.ru/diza/bg_news.png');"><center>
<a href="$ENTRY_URL$" ><img src="$IMG_SMALL_URL1$" width="100%" height="77" title="Подробнее" ></a></center>
</table>
--
Популярные файлы
<a href="$ENTRY_URL$"><div class="h_b_poster"><strong class="h_t_title">$TITLE$</strong> <img src="$IMG_SMALL_URL1$"></a> </div>
--
Новые фотогарфии
<div align="center"><a href="$PHOTO_URL$"><img src="$PHOTO_DIRECT_URL$" width="97%" ></a></div>

В целом, всё. По идее должно правильно работать. Если нет - пишите в комментарии здесь, а лучше на нашем форуме http://stalker-uc.ru
В итоге, должно получиться вот так:



Автор - Гай Квинт.


Сообщение отредактировал Гай_Квинт - Понедельник, 07.11.2016, 19:00
Форум » Web-раздел » Скрипты uCoz » Вид главной страницы by Гай Квинт
Страница 1 из 11
Поиск:
06:57
Обновить

Хостинг от uCoz | Design by XemorDio | MODSTALKER © 2009-2017