| Сегодня 1 июня, суббота |
      |
  
|
  
Какой рейтинг вас больше интересует?
|
Главная / Каталог блогов / Cтраница блогера Блог для блогов - создание блога на blogspot / Запись в блоге
Красивый слайдер свежих статей блога Blogspot2014-01-29 05:18:00 (читать в оригинале)Автоматизированный слайдер последних сообщений блога Всем привет! Сегодня у нас еще один слайдер виджет свежих сообщений в блоге на Blogspot. В своем предыдущем посте я писала об автоматизированном слайдере для боковых колонок блога. Этот виджет немногим отличается от предыдущего. Поэтому у Вас есть возможность выбрать из двух, какой больше подходит для Вашего блога. Установить виджет так же просто: черновик blogger-дизайн-добавить гаджет-Html/JavaScript-вставить-сохранить. Пример смотрите в демо блоге справа. Кто заинтересовался, поехали копировать код ниже: <center> <div id="headerbox"> Свежие статьи в блоге</div> <div id="featuredpostside"> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ FeaturedPostSide({ blogURL:"http://demoblog-z.blogspot.com", MaxPost:5, idcontaint:"#featuredpostside", ImageSize:300, interval:5000, autoplay:true, tagName:false }); //]]> </script> <link href="http://fonts.googleapis.com/css?family=Oswald:300" rel="stylesheet" type="text/css" /> <style scoped="" type="text/css"> /* Made by AllBloggerTricks.com with lot of hardwork please keep the comment intact */ ul.abt-sidebar-slider * { -moz-box-sizing: border-box; } ul.abt-sidebar-slider { font: 11px Verdana,Geneva,sans-serif; } ul.abt-sidebar-slider, ul.abt-sidebar-slider li { list-style: none outside none; margin: 0; padding: 0; position: relative; } ul.abt-sidebar-slider { height: 500px; width: 100%; } ul.abt-sidebar-slider li { display: none; float: left; height: 24.5%; overflow: hidden; padding: 0; position: absolute; width: 100%; } ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) { display: block; } ul.abt-sidebar-slider li:nth-child(2) { left: 0; top: 50%; } ul.abt-sidebar-slider img { border: 0 none; height: 100%; width: 100%; } ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li { transition: all 0.4s ease-in-out 0s; } ul.abt-sidebar-slider li:nth-child(4) { left: 0; top: 75%; width: 100%; } ul.abt-sidebar-slider li:nth-child(3) { left: 0; top: 25%; } ul.abt-sidebar-slider .overlayx { background-color: rgba(0, 0, 0, 0.5); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 2; } ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img { border: 4px solid #0e5198; border-radius: 3px 3px 3px 3px; } ul.abt-sidebar-slider .overlayx:hover { opacity: 0.1; } ul.abt-sidebar-slider h4 { color: white; font-family: Oswald; font-size: 20px; font-weight: 100; line-height: 1.5em; margin: 0; padding: 0 10px; position: absolute; top: 25px; width: 100%; z-index: 2; } ul.abt-sidebar-slider .label_text { bottom: 10px; color: white; font-size: 90%; left: 10px; position: absolute; z-index: 2; } ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname { display: none; } .buttons { margin: 5px 0 0; } .buttons a { display: inline-block; height: 25px; position: relative; text-indent: -9999px; width: 15px; } .buttons a:before { border-color: transparent #535353 transparent transparent; border-style: solid; border-width: 8px 7px; content: ""; height: 0; left: 50%; margin-left: -10px; margin-top: -8px; position: absolute; top: 50%; width: 0; } .buttons a.nextx:before { border-color: transparent transparent transparent #535353; margin-left: -3px; } .date { background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84); bottom: 93px; padding: 8px; position: relative; right: 6px; } #headerbox { background: #0073e9; font-family: Oswald; padding: 5px; } </style> </center> Теперь давайте разберемся в настройках: Свежие статьи в блоге-пишите свое название; demoblog-z.blogspot.com"-URL адрес блога; MaxPost:5-количество сообщений; interval:5000-интервал вращения в милисекундах; height: 500px;width: 100%-высота и ширина слайдера; border: 4px solid #0e5198-размер и цвет окантовки рамки; font-size: 20px-размер шрифта заголовков постов; background: #0073e9-цвет фона вкладки, где пишите свежие статьи блога;
|
 
Категория «Писатели»
Взлеты Топ 5
Падения Топ 5
Популярные за сутки
|
Загрузка...
BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.
взяты из открытых общедоступных источников и являются собственностью их авторов.