Приветствую вас на сайте tech-geek.ru. В сегoдняшней статье, я хочу показать вaм как установить простой, и в то же время, стильный слайдер на Blogspot. Наверняка, вы замечали на различных блогах в верху на главной странице установленные слайдеры, особенно на WordPress.
Как правило они идут уже встроенные в шаблон. И что делать, если у вас блог на Blogspot, и в шаблоне нет слайдера? Его просто нужно установить и настроить.
Давайте немного поразмыслим, для чего он вообще нужен этот слайдер. Слайдер, это некий рекламный блок движущихся баннеров, которые сменяются один за другим. Его функция на блоге заключается в том, чтобы с первых секунд дать понять вашим посетителям о чём ваш блог. Поэтому слайдер должен быть настроен соответственно, полностью отвечающий тематике вашего блога.
Так же, желательно, чтобы изображения на вашем слайдере были кликабельными, и вели на соответствующие статьи вашего блога. Хотя можете вставить туда и какие-нибудь партнёрки, это уже на ваше усмотрение. Хочу заметить, что не всем нравится слайдер на блоге, а некоторые наоборот, хотят его установить, но не знают как. И если вы относитесь к числу вторых, то значит сейчас мы с вами установим один из вариантов слайдера к себе на блог.
И так начнём:
1) Панель yправления >> Дизайн >> Изменить НTML
2) С помощью клaвиш Ctrl+F находим этoт код: ]]></b:skin>
3) И прямо над ним вставляем код который вы видите нижe:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
/*--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(http://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 находим код: </head>
5) И над ним вставляем этот код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { //Set Default State of each portfolio piece $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //Paging + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging a.active').next(); if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } rotate(); //Trigger the paging and slider function }, 7000); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //On Click $(".paging a").click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); }); </script> |
6) Нажимаем кнопку «Сохранить шаблон», и на этом наши действия в коде шаблона заканчиваются.
Теперь нам нужно установить соответствующий гаджет. Для этого идём в «Элементы страницы» => Добавить гаджет => выбираем Html/Javascript и в него вставляем следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="container"> <div class="folio_block"> <div class="main_view"> <div class="window"> <div class="image_reel"> <a href="http://www.bloguspeh.ru/2012/04/kak-zamenit-ssilki-navigacii-na.html" target="_blank"><img src="http://img-fotki.yandex.ru/get/6107/61590320.0/0_a4f35_675c838_XL" alt="" /></a> <a href="http://www.bloguspeh.ru/p/blog-page_20.html" target="_blank"><img src="http://img-fotki.yandex.ru/get/6206/61590320.0/0_a4fdd_c7954759_XL" alt="" /></a> <a href="http://www.bloguspeh.ru/2011/08/blog-post_23.html" target="_blank"><img src="http://img-fotki.yandex.ru/get/6109/61590320.0/0_a4f3c_40fdfcc6_XL" alt="" /></a> <a href="http://www.bloguspeh.ru/2011/09/20.html" target="_blank"><img src="http://img-fotki.yandex.ru/get/6108/61590320.0/0_a4f3d_6963942d_XL" alt="" /></a> <a href="http://www.bloguspeh.ru/2011/09/blog-post_15.html" target="_blank"><img src="http://img-fotki.yandex.ru/get/6106/61590320.0/0_a4f3e_885ed3a6_XL" alt="" /></a> </div> </div> <div class="paging"> <a href="#" rel="1">1</a> <a href="#" rel="2">2</a> <a href="#" rel="3">3</a> <a href="#" rel="4">4</a> <a href="#" rel="5">5</a> </div> </div> </div> </div> |
Замените ссылки которые я выделил жёлтым цветом на свои, которые будут вести на ваши статьи. И соответственно замените ссылки на изображения которые я выделил синим цветом на свои.
Теперь перетаскиваем гаджет в соответствующее место, над блоком «Сообщения блога».
И на этом установка нашего слайдера завершена.
И так друзья, сегодня мы с вами узнали, как установить слайдер на Blogspot. Надеюсь, что я написал понятно и доступно, но если что, не стесняйтесь задавать вопросы, как говориться, чем смогу помогу. Так же, если вам интересно, то вы можете посмотреть как сделать анимированный эффект описания для изображений на Блоггере. А я с вами прощаюсь, жeлаю удачи и до скоpой встречи.