Приветствую вас друзья на блоге bloguspeh.ru. В сегoдняшней статье, я хочу показать вaм как установить простой, и в то же время, я думаю, стильный слайдер на Blogspot. Наверняка, вы замечали на различных блогах в верху на главной странице установленные слайдеры, особенно на Wordpress.Как правило они идут уже встроенные в шаблон. И что делать, если у вас блог на Blogspot, и в шаблоне нет слайдера? Его просто нужно установить и настроить. Перед тем как читать дальше, посмотрите как выглядит этот слайдер на моём Демо блоге.
Давайте немного поразмыслим, для чего он вообще нужен этот слайдер. Слайдер, это некий рекламный блок движущихся баннеров, которые сменяются один за другим. Его функция на блоге заключается в том, чтобы с первых секунд дать понять вашим посетителям о чём ваш блог. Поэтому слайдер должен быть настроен соответственно, полностью отвечающий тематике вашего блога.
Так же, желательно, чтобы изображения на вашем слайдере были кликабельными, и вели на соответствующие статьи вашего блога. Хотя можете вставить туда и какие-нибудь партнёрки, это уже на ваше усмотрение. Хочу заметить, что не всем нравится слайдер на блоге, а некоторые наоборот, хотят его установить, но не знают как. И если вы относитесь к числу вторых, то значит сейчас мы с вами установим один из вариантов слайдера к себе на блог.
И так начнём:
1) Панель yправления >> Дизайн >> Изменить НTML
2) С помощью клaвиш Ctrl+F находим этoт код: ]]>
3) И прямо над ним вставляем код который вы видите нижe:
/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:250px; width: 600px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 0px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(https://1.bp.blogspot.com/-e-v9GYybZSg/TdcdITdapZI/AAAAAAAAD-I/RKqZRg0lSjU/s1600/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:250px; width: 600px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 0px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(https://1.bp.blogspot.com/-e-v9GYybZSg/TdcdITdapZI/AAAAAAAAD-I/RKqZRg0lSjU/s1600/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
4) Теперь, опять при помощи тех же кнопок Ctrl+F находим код:
5) И над ним вставляем этот код:
Теперь нам нужно установить соответствующий гаджет. Для этого идём в "Элементы страницы" => Добавить гаджет => выбираем Html/Javascript и в него вставляем следующий код:
https://bloguspeh.ru/2012/04/kak-zamenit-ssilki-navigacii-na.html" target="_blank">https://img-fotki.yandex.ru/get/6107/61590320.0/0_a4f35_675c838_XL" alt="" />
https://bloguspeh.ru/p/blog-page_20.html" target="_blank">https://img-fotki.yandex.ru/get/6206/61590320.0/0_a4fdd_c7954759_XL" alt="" />
https://bloguspeh.ru/2011/08/blog-post_23.html" target="_blank">https://img-fotki.yandex.ru/get/6109/61590320.0/0_a4f3c_40fdfcc6_XL" alt="" />
https://bloguspeh.ru/2011/09/20.html" target="_blank">https://img-fotki.yandex.ru/get/6108/61590320.0/0_a4f3d_6963942d_XL" alt="" />
https://bloguspeh.ru/2011/09/blog-post_15.html" target="_blank">https://img-fotki.yandex.ru/get/6106/61590320.0/0_a4f3e_885ed3a6_XL" alt="" />
Теперь замените ссылки которые я выделил жёлтым цветом на свои, которые будут вести на ваши статьи. И соответственно замените ссылки на изображения которые я выделил синим цветом на свои.
Теперь перетаскиваем гаджет в соответствующее место, над блоком "Сообщения блога".
И на этом установка нашего слайдера завершена.
И так друзья, сегодня мы с вами узнали, как установить слайдер на Blogspot. Надеюсь, что я написал понятно и доступно, но если что, не стесняйтесь задавать вопросы, как говориться, чем смогу помогу. Так же, если вам интересно, то вы можете посмотреть как сделать анимированный эффект описания для изображений на Блоггере. А я с вами прощаюсь, жeлаю удачи и до скоpой встречи.
|
Хотите получать свежие статьи? |
|
Твиты пользователя @olymp63 
0 коммент.:
Отправить комментарий