Сегодня 16 мая, четверг

Какой рейтинг вас больше интересует?

получить код

Главная /

Каталог блогов

/

Cтраница блогера Блог для блогов - создание блога на blogspot

Записи в блоге

	Блог для блогов - создание блога на blogspot Голосов: 1 Адрес блога: http://bdblogov.blogspot.com/ Добавлен: 2013-06-02 03:52:18 блограйдером Olga28

Виджет пронумерованных популярных сообщений блога Blogspot

2014-01-30 21:58:00 (читать в оригинале)

Красивый слайдер свежих статей блога Blogspot

2014-01-29 05:18:00 (читать в оригинале)

Автоматизированный слайдер последних сообщений блога

Как установить код слайдера в блог на Blogspot

Всем привет! Сегодня у нас еще один слайдер виджет свежих сообщений в блоге на Blogspot. В своем предыдущем посте я писала об автоматизированном слайдере для боковых колонок блога. Этот виджет немногим отличается от предыдущего. Поэтому у Вас есть возможность выбрать из двух, какой больше подходит для Вашего блога. Установить виджет так же просто: черновик blogger-дизайн-добавить гаджет-Html/JavaScript-вставить-сохранить. Пример смотрите в демо блоге справа. Кто заинтересовался, поехали копировать код ниже:

Свежие статьи в блоге</div>

</div>

//<![CDATA[

FeaturedPostSide({

blogURL:"http://demoblog-z.blogspot.com",

MaxPost:5,

idcontaint:"#featuredpostside",

ImageSize:300,

interval:5000,

autoplay:true,

tagName:false

});

//]]>

</script>

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-цвет фона вкладки, где пишите свежие статьи блога;

Тэги: гаджеты
Постоянная ссылка

Оригинальный слайдер для боковых колонок блога на Blogspot

2014-01-28 01:44:00 (читать в оригинале)

Автоматизированный слайдер для блогов на Blogspot

Как установить автоматизированный слайдер в sidebar блога

Здравствуйте дорогие гости и читатели моего блога. Сегодня совсем небольшой пост, я хочу предложить Вам виджет оригинального автоматизированного слайдера для боковых колонок блога. Устанавливаем виджет обычно: черновик blogger-дизайн-добавить гаджет-Html/JavaScript-вставить-сохранить. Слайдер красиво вписывается в дизайн, привлекает внимание читателей. Посмотрите виджет в работе, демо. В принципе это виджет новых постов блога. Перед тем как сохранить, внесите изменения. А сейчас копируем код ниже:

http://goazhetybloga.blogspot.com-URL адрес блога; MaxPost:8,-количество постов; interval:5000-вращение в миллисекундах; width:100%;height:500px-ширина и высота слайдера; #535353-цвет окантовки;

Код слайдера нашла на одном из зарубежных блогах. Разобралась только с самыми необходимыми настройками. Изменить можно еще многое, но по моему слайдер настроен и так неплохо. Если будет желание, меняйте. На сегодня все, до новых встреч.

Тэги: гаджеты
Постоянная ссылка

Баннер для блога от сервиса Баннер - Студия

2014-01-24 07:58:00 (читать в оригинале)

Еще способ сделать баннер для своего блога

Здравствуйте дорогие читатели и гости моего блога. Сегодня предлагаю Вам воспользоваться еще одним бесплатным сервисом для создания баннеров своего блога. Сервис называется Баннер-Студия.

Создать можно популярный сетевой баннер 468х60 с помощью генератора баннеров, и баннеры любого размера с помощью Online генератора баннеров. Сначала давайте рассмотрим первый вариант. Он очень простой, и создать баннер дело пяти минут. Переходим на сайт сервиса.

1.Выбираем тематику, тему для блога;

2.Подбираем подходящую картинку;

3.Вписываем текст 1 и текст 2, которые будут чередоваться на баннере. Если хотите, чтобы текст не чередовался, а просто

Переходим по ссылке, копируем в адресной строке браузера

мигал, поле 2 оставьте пустым. Можно в поля вписать один и тот же текст, тогда мигание будет отсутствовать.

4.Выбираем цвет текста;

5.Впишите URL адрес блога, он будет отображаться справа на баннере; Если не впишите свой адрес блога, на баннере будет отображаться адрес сервиса;

6.После редактирования нажимаем кнопку Создать.

7.Появится Ваш созданный баннер. Нажмите на картинку правой кнопкой мыши-сохранить картинку/изображение

как; Внизу увидите ссылку на баннер. Перейдите по этой ссылке. В адресной строке браузера скопируйте адрес ссылки. Возвращаемся назад, и чуть выше на странице переходим в раздел Генератор кода;. Здесь нам надо:

1.Пишем URL адрес блога;

2.Вставить скопированный адрес ссылки на файл, содержащий баннер;

3.Текстовое описание блога, которое будет появляться при наведении мышью (можете не писать). 4.Нажимаем ОК. Кода будет два: один HTML, второй Bcode; В коде надо будет удалить код Bcode, у меня на скриншоте выделен этот код. Сохраните его, к примеру, для форумов. Но здесь Вы его не сможете удалить. Копируйте весь код, идем в черновик blogger-дизайн-добавить гаджет. Когда вставите код в поле Html/JavaScript, или в другом месте, там удалите, иначе он будет отображаться под баннером. Сохраняем. Конечно, адрес блога виден, но уж лучше свой, чем чужой.

И второй способ: сервис разрешает создание бесплатных, анимированных баннеров всяких разных размеров. Воспользуемся Online генератором баннеров. Здесь нам предлагают редактировать свой баннер с выбором макета, кстати есть возможность загрузить свою картинку для фона баннера. Прочитайте внимательно инструкцию, там все подробно написано как создать баннер. Единственное что хочу сказать, при изменении настроек баннера, справа нажимайте на кнопку Обновить. Когда отредактируете свой баннер, нажимаем Сохранить. Копируем код и сохраняем его для своего баннера. Да, там тоже внизу баннера появится надпись, удалите и её тоже прямо из кода. Погуляйте по сайту, там много есть всего интересного. Посмотрела на тарифы по созданию профи баннеров, цены нормальные, можно в будущем воспользоваться. Тогда не будет ни адресов на баннере, ни разных логотипов. Почитайте, как ещё можно узнать адрес баннера своего блога. На этом у меня всё. Всего доброго.

Тэги: баннер
Постоянная ссылка

Красивый виджет социальных кнопок для блога на Blogspot

2014-01-23 06:38:00 (читать в оригинале)

Блок социальных кнопок для Вашего блога

Всем привет или доброго времени суток. Сегодня у нас есть возможность полюбоваться красивым блоком социальных кнопок в своем блоге. Код нашла на одном из зарубежных блогов, пока разобралась, что к чему, и вот решила поделиться с Вами. У меня в блоге уже написаны посты о разных кнопках социальных сетей, но этот блок мне очень нравится, думаю, что и Вам будет интересен. Перейдем сразу к делу. Вам надо скопировать код ниже, и в черновике blogger-дизайн-добавить гаджет-Html/JavaScript-вставить-сохранить. Установите в удобном для Вас макете блога. Вот этот код:

<div class="container"> <ul class="action-bar clearfix"> <li> <a href="http://twitter.com/xxxxx" class="like"> <span class="zocial-twitter"></span> <span class="tooltip">Follow</span> </a> </li> <li> <a href="https://plus.google.com/xxxxxxxx" class="favourite"> <span class="zocial-googleplus"></span> <span class="tooltip">Circle us</span> </a> </li> <li> <a href="https://www.facebook.com/xxx" class="comment"> <span class="zocial-facebook"></span> <span class="tooltip">Like us</span> </a> </li> <li> <a href="http://xxxxxxx/feeds/posts/default" class="share"> <span class="zocial-rss"></span> <span class="tooltip">Subscribe</span> </a> </li> </ul> </div> <style> @charset "utf-8"; @import url(http://weloveiconfonts.com/api/?family=zocial); /* zocial */ [class*="zocial-"]:before { font-family: 'zocial', sans-serif; } /* ---------- GENERAL ---------- */ a { text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .container { display: block; height: 54px; position: relative; width: 356px; } /* ---------- Action Bar ---------- */ .action-bar li { float: left; } .action-bar a { -webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5); box-shadow: inset 0 -2px rgba(0, 0, 0, .5); color: #e7e7e7; display: block; font-size: 32px; height: 54px; line-height: 54px; position: relative; text-align: center; -webkit-transition: background .3s; -moz-transition: background .3s; -ms-transition: background .3s; -o-transition: background .3s; transition: background .3s; width: 54px; } .action-bar a:hover .tooltip { margin-top: 16px; opacity: 1; } .tooltip { border-radius: 3px; font-size: 14px; height: 18px; left: 50%; line-height: 18px; margin: 0 0 0 -50px; opacity: 0; position: absolute; top: 100%; -webkit-transition: margin-top .3s, opacity .3s; -moz-transition: margin-top .3s, opacity .3s; -ms-transition: margin-top .3s, opacity .3s; -o-transition: margin-top .3s, opacity .3s; transition: margin-top .3s, opacity .3s; width: 100px; } .tooltip:before { content: ""; height: 8px; left: 50%; margin: -4px 0 0 -4px; position: absolute; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 8px; } .like, .like .tooltip, .like .tooltip:before { background: #65B1F8; } .like:hover { background: #65B1F8; } .favourite, .favourite .tooltip, .favourite .tooltip:before { background: #c93037; } .favourite:hover { background: #b02b32; } .comment, .comment .tooltip, .comment .tooltip:before { background: #43438e; } .comment:hover { background: #393978; } .share, .share .tooltip, .share .tooltip:before { background: #FF8000; } .share:hover { background: #FF8000; } </style>

Теперь давайте немного разберемся с кодом:

twitter.com/xxxxx - ваш адрес аккаунта Twitter; plus.google.com/xxxxxxxx - адрес страницы Google; www.facebook.com/xxx - адрес в Facebook; xxxxxxx - URL адрес Feedburner.

54px - это размеры кнопок; width: 356px; - размер виджета кнопок по горизонтали; если укажете 156 рх; - кнопки будут по вертикали; и если проставите значение 200 рх; - кнопки будут в два ряда; С фоном кнопок не разбиралась, по моему и так красивые. Если захотите поменять, то background: #65B1F8;-все относится к фону. Будет желание, экспериментируйте. Вот и все. Пишите, комментируйте, делитесь с друзьями. Всего доброго.

Тэги: кнопки, сетей, соц
Постоянная ссылка

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

Блограйдеров
14490

Блогов
219902
(+0 сегодня)

Сообществ
1309
(+0 сегодня)

ЖЖ все стерпит
по сумме баллов (758) в категории «Истории»

Категория «Размышления»

Взлеты Топ 5


+1561	1596	fiona
+1550	1597	Алексей Чернов
+1529	1559	Elen_i_rebyata
+1513	1584	Малти_Ошер
+1512	1589	Дрочливый_Драчун

Падения Топ 5


-2	74	Рыжая_Лада
-2	947	G-Traveler \| Сайт заметок путешественника
-2	1264	Сайт визажиста Мокровой Инны блог
-5	53	BJohn
-6	17	Аццкей_Сотона

Загрузка...

BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.

Каталог блогов

/

Cтраница блогера Блог для блогов - создание блога на blogspot

Записи в блоге

Виджет пронумерованных популярных сообщений блога Blogspot

Популярные сообщения блога Blogspot с нумерацией

Красивый слайдер свежих статей блога Blogspot

Автоматизированный слайдер последних сообщений блога

Оригинальный слайдер для боковых колонок блога на Blogspot

Автоматизированный слайдер для блогов на Blogspot

Баннер для блога от сервиса Баннер - Студия

Еще способ сделать баннер для своего блога

Красивый виджет социальных кнопок для блога на Blogspot

Блок социальных кнопок для Вашего блога