Содержание:
Введение
На одном из последних проектов, понадобилось внедрить слайдер тегов для SEO-продвижения. Слайдер тегов (ссылок) представляет собой набор активных ключевых слов и словосочетаний на внутренние страницы сайта. Набор тегов активных ключевых слов сделан таким образом, что доступен для индексации поисковыми системами.
Посмотреть пример реализации вы можете по ссылке - ДЕМО.
Подключаем слайдер тегов (ссылок)
В этой статье мы рассмотрим, как вы можете сделать такой же слайдер тегов на своем сайте. И сразу хочу предупредить, что я тестировал работоспособность на jQuery 2.2.4 + Bootstrap v4.3.1. Установить себе на сайт не составит труда, достаточно подключить всё необходимое. Далее я продемонстрирую вариант реализации, который подошел под наш проект.
В том месте, куда вы хотите добавить слайдер тегов, разместите следующий код:
<div class="tag-slider">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 tag-slider-1">
<div class="sl-links">
<div class="sl-list">
<ul class="sl-items">
<li class="item"><a href="/kottedzhi">аренда коттеджа</a></li>
<li class="item"><a href="/kottedzhi">дом в аренду на сутки</a></li>
<li class="item"><a href="/kottedzhi">коттедж на сутки недорого</a></li>
<li class="item"><a href="/kottedzhi">коттеджи без посредников</a></li>
<li class="item"><a href="/kottedzhi">снять коттедж на сутки</a></li>
<li class="item"><a href="/kottedzhi">снять дом посуточно</a></li>
<li class="item"><a href="/kottedzhi">аренда дома на сутки</a></li>
<li class="item"><a href="/kottedzhi">аренда коттеджа на сутки</a></li>
<li class="item"><a href="/kottedzhi">снять коттедж на просеке</a></li>
<li class="item"><a href="/kottedzhi">аренда дома посуточно</a></li>
<li class="item"><a href="/kottedzhi">снять коттедж недорого</a></li>
<li class="item"><a href="/kottedzhi">коттедж на сутки от собственника</a></li>
<li class="item"><a href="/kottedzhi-s-banej">снять дом с баней</a></li>
<li class="item"><a href="/kottedzhi-s-banej">коттедж с сауной на сутки</a></li>
<li class="item"><a href="/kottedzhi-s-banej">снять коттедж с баней</a></li>
<li class="item"><a href="/kottedzhi-s-banej">дома с баней в аренду на сутки</a></li>
<li class="item"><a href="/kottedzhi-s-banej">коттеджи с баней</a></li>
<li class="item"><a href="/kottedzhi-s-bassejnom">снять дом с бассейном</a></li>
<li class="item"><a href="/kottedzhi-s-bassejnom">аренда коттеджей с бассейном</a></li>
<li class="item"><a href="/kottedzhi-s-bassejnom">снять коттедж с бассейном</a></li>
<li class="item"><a href="/kottedzhi-s-bassejnom">дома с бассейном на сутки</a></li>
<li class="item"><a href="/kottedzhi-s-bassejnom">коттеджи с бассейном</a></li>
<li class="item"><a href="/kottedzhi">коттеджи в самарской области</a></li>
<li class="item"><a href="/kottedzhi">дом в самарской области</a></li>
<li class="item"><a href="/kottedzhi-na-prazdniki">коттеджи на праздники</a></li>
<li class="item"><a href="/kottedzhi-na-prazdniki">дом на праздник на сутки</a></li>
<li class="item"><a href="/kottedzhi-na-prazdniki">дом для вечеринки на сутки</a></li>
<li class="item"><a href="/kottedzhi-na-prazdniki">коттедж на день рождения</a></li>
<li class="item"><a href="/kottedzh-na-volge">коттеджи у водоемов</a></li>
<li class="item"><a href="/kottedzh-na-volge">коттеджи на волге</a></li>
<li class="item"><a href="/kottedzh-na-volge">коттеджи на берегу волги</a></li>
<li class="item"><a href="/kottedzhi">аренда дома длительно</a></li>
<li class="item"><a href="/kottedzhi-s-banketnym-zalom">коттеджи с банкетным залом</a></li>
<li class="item"><a href="/kottedzhi-na-korporativ">коттеджи на корпоратив</a></li>
<li class="item"><a href="/kottedzhi-na-svadbu">коттеджи на свадьбу</a></li>
<li class="item"><a href="/kottedzhi-na-vypusknoj">коттеджи на выпускной</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи в Самаре</a></li>
<li class="item"><a href="/kottedzhi">Дома на Правом берегу</a></li>
<li class="item"><a href="/kottedzhi">В Красноярском районе</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи в Царевщине</a></li>
<li class="item"><a href="/kottedzhi">В Мастрюковских озерах</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи в Прибрежном</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи в Тольятти</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи в Шигонском районе</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи на Красной глинке</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи в Кинельском р-н</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи в Новокуйбышевске</a></li>
<li class="item"><a href="/kottedzhi">Дома в Пригороде 15 км</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи в Безенчукском р-н</a></li>
<li class="item"><a href="/kottedzhi">В Ульяновской области</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи с аудиосистемой</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи с баней</a></li>
<li class="item"><a href="/kottedzhi">С банкетным залом</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи с барбекю</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи с бассейном</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи с бильярдом</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи у водоемов</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи с питанием</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи с рыбалкой</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи с пляжем</a></li>
<li class="item"><a href="/kottedzhi">С спортивной площадкой и тенисом</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи с ТВ</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи с теннисом</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи с WI-FI</a></li>
<li class="item"><a href="/kottedzhi">С кондиционером</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи с караоке</a></li>
<li class="item"><a href="/kottedzhi">Коттеджи в лесу</a></li>
<li class="item"><a href="/kottedzhi">Дома с отоплением</a></li>
<li class="item"><a href="/kottedzhi">Коттедж на просеке</a></li>
</ul>
</div>
<div class="sl-button">
<div class="sl-prev"><a href="#"> ← </a></div>
<div class="sl-next"><a href="#"> → </a></div>
</div>
<div class="sl-all-teg">
<a class="no-all" href="#">Свернуть</a>
<a class="pokaz-all" href="#">Показать все</a>
</div>
</div>
</div> <!--col-->
</div> <!--row-->
</div> <!--container-->
</div> <!--tag-slider-->
<script type="text/javascript">
$(function(){
$('.tag-slider .sl-all-teg > a').click(function(e){
e.preventDefault();
$('.tag-slider').toggleClass('active');
});
});
</script>
Пропишите в самом конце вашего файла стилей следующий CSS код:
.tag-slider {
margin: 30px auto 30px auto;
width: 825px;
display: block;
}
.tag-slider .container {
background: rgba(242, 242, 242, 0.95);
border-radius: 5px;
padding-top: 8px;
padding-bottom: 8px;
}
.tag-slider .container .row .tag-slider-1 .sl-links {
width: 100%;
}
.tag-slider .container .row .tag-slider-1 .sl-links .sl-list {
margin: 0px 0px;
overflow: hidden;
position: relative;
}
.tag-slider .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items {
list-style: none;
margin: 0;
padding: 0;
width: 100000px;
position: relative;
overflow: hidden;
}
.tag-slider .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items .item {
float: left;
text-align: center;
padding: 5px;
}
.tag-slider .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items .item a {
display: block;
text-decoration: none;
color: #000000;
background-color: #ffffff;
padding: 7px 13px;
border-radius: 3px;
margin: 0px 2px 0px 2px;
box-shadow: 0px 0px 5px #5555;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 255px;
height: 67px;
}
/*sl-button*/
.tag-slider .container .row .tag-slider-1 .sl-links .sl-button {
display: block;
width: 10%;
float: left;
}
.tag-slider .container .row .tag-slider-1 .sl-links .sl-button .sl-prev a,
.tag-slider .container .row .tag-slider-1 .sl-links .sl-button .sl-next a {
display: block;
text-decoration: none;
color: #008bbe;
padding: 0px 6px;
font-size: 1.3rem;
}
.tag-slider .container .row .tag-slider-1 .sl-links .sl-button .sl-prev {
float: left;
}
.tag-slider .container .row .tag-slider-1 .sl-links .sl-button .sl-next {
float: right;
}
/*sl-all-teg*/
.tag-slider .container .row .tag-slider-1 .sl-links .sl-all-teg {
display: block;
width: 90%;
float: left;
text-align: right;
padding-top: 0px;
padding-right: 15px;
}
.tag-slider .container .row .tag-slider-1 .sl-links .sl-all-teg a {
font-size: 1rem;
border-bottom: 1px dashed #003a54;
text-decoration: none;
display: inline-block;
}
.tag-slider .container .row .tag-slider-1 .sl-links .sl-all-teg a.no-all {
display: none;
}
.tag-slider .container .row .tag-slider-1 .sl-links .sl-all-teg a:hover {
text-decoration: none;
}
/*tag-slider.active*/
.tag-slider.active .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items {
width: 100%;
height: auto;
}
.tag-slider.active .container .row .tag-slider-1 .sl-links .sl-button{
display: none;
}
.tag-slider.active .container .row .tag-slider-1 .sl-links .sl-all-teg{
width: 100%;
}
.tag-slider.active .container .row .tag-slider-1 .sl-links .sl-all-teg .no-all {
display: inline-block;
}
.tag-slider.active .container .row .tag-slider-1 .sl-links .sl-all-teg .pokaz-all {
display: none;
}
/**/
@media only screen and (max-device-width: 1200px) {
.tag-slider .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items .item a {
width: 211px;
}
}
@media only screen and (max-device-width: 992px) {
.tag-slider .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items .item a {
width: 200px;
}
.tag-slider .container .row .tag-slider-1 .sl-links .sl-button {
width: 20%;
}
.tag-slider .container .row .tag-slider-1 .sl-links .sl-all-teg {
width: 80%;
}
}
@media only screen and (max-device-width: 767px) {
.tag-slider .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items .item a {
width: 230px;
}
}
@media only screen and (max-device-width: 576px) {
.tag-slider .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items .item a {
width: auto;
}
.tag-slider .container .row .tag-slider-1 .sl-links .sl-button {
width: 30%;
}
.tag-slider .container .row .tag-slider-1 .sl-links .sl-all-teg {
width: 70%;
}
.tag-slider.active .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items .item {
width: 100%;
}
.tag-slider.active .container .row .tag-slider-1 .sl-links .sl-list ul.sl-items .item a {
display: block;
width: 100%;
height: auto;
}
}
Подключите jQuery скрипт слайдера в <head> вашего сайта:
$(document).on('click', ".sl-next",function(){
var slLinks = $(this).parents('.sl-links');
right_carusel(slLinks);
return false;
});
$(document).on('click',".sl-prev",function(){
var slLinks = $(this).parents('.sl-links');
left_carusel(slLinks);
return false;
});
function left_carusel(slLinks){
var slLinks_width = $(slLinks).find('.item').outerWidth();
$(slLinks).find(".sl-items .item").eq(-1).clone().prependTo($(slLinks).find(".sl-items"));
$(slLinks).find(".sl-items").css({"left":"-"+slLinks_width+"px"});
$(slLinks).find(".sl-items").stop().animate({left: "0px"}, 200);
$(slLinks).find(".sl-items .item").eq(-1).remove();
}
function right_carusel(slLinks){
var slLinks_width = $(slLinks).find('.item').outerWidth();
$(slLinks).find(".sl-items").stop().animate({left: "-"+ slLinks_width +"px"}, 200);
setTimeout(function () {
$(slLinks).find(".sl-items .item").eq(0).clone().appendTo($(slLinks).find(".sl-items"));
$(slLinks).find(".sl-items .item").eq(0).remove();
$(slLinks).find(".sl-items").css({"left":"0px"});
}, 300);
}
Вот и все несложные действия, которые нужно сделать, чтобы начать пользоваться слайдером тегов. Далее вы можете настроить его самостоятельно, чтобы он органично вписывался в дизайн вашего сайта.
Заключение
Кроме первопричины, описанной в самом начале статьи, представление тегов на сайте помогает пользователю сориентироваться, что представлено на вашем ресурсе.
Всем удачи!
RSS лента комментариев этой записи