Сегодня 17 мая, пятница

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

получить код

Главная /

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

/

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

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

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

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

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

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

Как вставить виджет популярных сообщений блога с использованием CSS стилей

Всем привет ! Сегодня у нас ещё один вид виджета популярных сообщений блога. Пример смотрите в демо блоге внизу справа. Чтобы вставить такой виджет в блог, скопируйте код CSS стилей ниже. В черновике blogger переходим на вкладку шаблон-изменить шаблон. Кто только начинает вести блог, делайте резервную копию шаблона.

После открывающего тэга <head> ищем строку <b:skin>...</b:skin>. Слева нажимаем на стрелку, чуть ниже находим строку ]]></b:skin>. Выше этой строки вставляем скопированный код. Нажимаем просмотр шаблона. В боковой колонке увидите виджет популярных сообщений. Сохраняете шаблон, и переходите в дизайн-изменить гаджет популярных сообщений. Произведите необходимые настройки, сохраните. Затем вернитесь в шаблон-изменить шаблон, и можете настроить размер, цвет шрифта и фона виджета на свое усмотрение.

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#0a9e08;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#740576;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Настройки: background:#0a9e08;-цвет номеров;font-size: 13px;-размер шрифта; background:#ff4c54-фоновый цвет, обратите внимание, первая вкладка идет снизу (content:"1"). Вот и все. Всем пока.

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

Стильный гаджет Ярлыки для блогов Blogspot

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

Как изменить гаджет Ярлыки в стиле CSS

Здравствуйте дорогие блоггеры. Сегодня у нас информация о гаджете Ярлыки, который является навигационной частью в блоге. Если у Вас уже много сообщений в блоге, есть возможность вставить гаджет Ярлыки в виде стрелочек, с использованием стилей CSS и настроить соответственно дизайну блога. Пример смотрите в этом блоге справа.

Как вставить в блог blogspot гаджет Ярлыки с использование CSS стилей

Для начала нам надо перейти в дизайн-добавить гаджет-Ярлыки. В настройках отметьте все ярлыки-в виде облака, а не списка, сохраните. Установите в нужном для Вас месте макета блога. Далее скопируйте ниже стиль CSS для гаджета. Теперь переходим в шаблон-изменить шаблон. Предварительно делайте резервную копию шаблона. После открывающего тэга <head> ищем строку <b:skin>...</b:skin>, нажимаем на стрелку слева, спускаемся вниз, находим ]]><b:skin> и выше вставляем скопированный код. Здесь же прямо в шаблоне можно изменить настройки. Нажимаем-просмотр шаблона, если все нормально сохраняем.

.label-size{

margin:0;

padding:0;

position:relative;

}

.label-size a{

float:left;

height:24px;

line-height:24px;

position:relative;

font-size:12px;

margin-bottom: 9px;

margin-left:20px;

padding:0 10px 0 12px;

background:#054f04;

color:#fff;

text-decoration:none;

-moz-border-radius-bottomright:4px;

-webkit-border-bottom-right-radius:4px;

border-bottom-right-radius:4px;

-moz-border-radius-topright:4px;

-webkit-border-top-right-radius:4px;

border-top-right-radius:4px;

}

.label-size a:before{

content:"";

float:left;

position:absolute;

top:0;

left:-12px;

width:0;

height:0;

border-color:transparent #0a9e08 transparent transparent;

border-style:solid;

border-width:12px 12px 12px 0;

}

.label-size a:after{

content:"";

position:absolute;

top:10px;

left:0;

float:left;

width:4px;

height:4px;

-moz-border-radius:2px;

-webkit-border-radius:2px;

border-radius:2px;

background:#fff;

-moz-box-shadow:-1px -1px 2px #000000;

-webkit-box-shadow:-1px -1px 2px #000000;

box-shadow:-1px -1px 2px #000000;

}

.label-size a:hover{

background:#642A29;font-family: Tahoma, Arial, Helvetica, Sans-Serif;

text-decoration: none;

color: #FFFFFF;

}

.label-size a:hover:before{

border-color:transparent #642A29 transparent transparent;font-family: Tahoma, Arial, Helvetica, Sans-Serif;

text-decoration: none;

color: #FFFFFF;}

Настройки: height:24px-высота изображения; font-size:12px;-размер шрифта; background:#054f04;-цвет фона изображения; color:#fff;-цвет текста (название ярлыков); #0a9e08-цвет стрелочки; background:#fff;-цвет точки на стрелке; Это основные настройки гаджета Ярлыки с использованием стилей CSS. У меня на сегодня все. Оставляйте отзывы, задавайте вопросы. Всего доброго.

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

Как создать карту для блога Blogspot

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

Предлагаю второй способ создать карту блога на Blogspot

Здравствуйте дорогие читатели и все, кто забежал на огонек. Сегодня предлагаю Вам ещё один код для создания карты Вашего блога. У меня в блоге уже есть пост по этой теме. Перейдите в меню по вкладке содержание блога и посмотрите пример. Коды для создания карт рабочие, протестировала на всех своих блогах, даже с не стандартными шаблонами.

Карта смотрится как аккордеон. Можете не бояться, код без вирусов. Это другой код, он не принадлежит программе abu-farham.com, которую блокирует Google. Почитайте мой пост вредоносный скрипт для создания карты блога. Итак, копируем код ниже, идем в шаблон-изменить шаблон. Не забывайте делать резервную копию шаблона. Находим строку <b:skin>...</b:skin>, после открывающего тэга <head>. Слева нажимаем на стрелку и спускаемся вниз, находим строку ]]></b:skin>. Чуть выше этой строки вставляем скопированный код. То, что у меня выделено, можете изменить. Так же можно изменить и другие цвета прямо в шаблоне блога. Нажимаем просмотреть шаблон, и если все нормально сохраняем.

.judul-label{

background-color:#E5ECF9;

font-weight:bold;

line-height:1.4em;

margin-bottom:5px;

overflow:hidden;

white-space:nowrap;

vertical-align: baseline;

margin: 0 2px;

outline: none;

cursor: pointer;

text-decoration: none;

font: 14px/100% Arial, Helvetica, sans-serif;

padding: .5em 2em .55em;

text-shadow: 0 1px 1px rgba(0,0,0,.3);

-webkit-border-radius: .5em;

-moz-border-radius: .5em;

border-radius: .5em;

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

-moz-box-shadow: 1px 1px 4px #AAAAAA;

box-shadow: 0 1px 2px rgba(0,0,0,.2);

color: #e9e9e9;

border: 2px solid white !important;

background: #6e6e6e;

background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));

background: -moz-linear-gradient(top, #888, #575757);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');

}

.data-list{

line-height:1.5em;

margin-left:5px;

margin-right:5px;

padding-left:15px;

padding-right:5px;

white-space:nowrap;

text-align:left;

font-family:"Arial",sans-serif;

font-size:12px;

}

.list-ganjil{

background-color:#F6F6F6;

}

.headactive{

color: #fef4e9;

border: 2px solid white !important;

background: #1C8DFF;

background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));

background: -moz-linear-gradient(top, #9dc2e7, #438cd2);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');

}

Далее в черновике blogger переходим по вкладке страницы-создать страницу-пустую. В редакторе сверху нажимаем HTML и вставляем следующий скрипт.

Здесь нам надо мой URL адрес блога изменить на URL адрес Вашего блога. Нажимаем создать, страница будет пустая. Карту своего блога увидите только после публикации страницы. Вроде все, ничего не забыла. Будут вопросы, задавайте в комментариях. Всего доброго.

Тэги: blogger
Постоянная ссылка

Автоматическая прокрутка страниц блога Blogspot

2014-01-31 19:35:00 (читать в оригинале)

Как сделать автоматическую прокрутку страниц блога Blogspot

Здравствуйте дорогие читатели и посетители моего блога. Для удобного просмотра информации, предлагаю Вам код автоматической прокрутки страниц блога. Пример смотрите слева в этом блоге. Код вставляется в шаблон-изменить шаблон, перед закрывающим тэгом </body>.

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

Слева или справа (кому как удобно) появятся две кнопки: старт и стоп. Хочу заметить, в не стандартных шаблонах тэг найдете в самом низу. Кто не переносил блог на другой шаблон, ищите где то с 2000 позиции, или у кого работает поиск Ctrl+F, впишите в поле поиска </body>, найдете быстрее. Нажимаете просмотр шаблона-сохранить. Вот и весь процесс вставки кода автоматической прокрутки страниц блога. Копируйте код ниже:

<style type='text/css'>
#abt-scroll{position:fixed;z-index:9999;bottom:0;left:0}
#abt-scroll a{display:block;float:left;width:32px;height:32px;text-indent:-999em; padding: 3px}
#abt-scroll a.abt-scroll{background: url(https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/Images/play-button.png) no-repeat}
#abt-scroll a.abt-stop{background: url(https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/Images/pause-button.png) no-repeat}
#abt-scroll a:hover{background-color:#1569C7}
</style>
<script type='text/javascript'>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='abt-scroll'>
<a class='abt-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
<a class='abt-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
</div>

Что здесь можно изменить: width:32px;height:32px-размеры кнопок; #1569C7-цвет при наведении; Если Вы хотите, чтобы кнопки располагались справа, замените left на right; И надо будет изменить положение кнопок. Для этого поменяйте местами вот эти строки: зеленую строку поднимите выше синей и вставьте после <div id='abt-scroll'>, тогда первой встанет кнопка старт, а потом стоп. Для расположения с левой стороны ничего менять не надо. Я думаю, что сложностей не возникнет. Автор этого виджета молодой blogger Dhiroj Barnwal с Индии. Ссылка http://www.allbloggertricks.com. На этом позвольте сказать Вам Всего доброго.

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

Всплывающая панель Facebook для Blogger

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

Как вставить в блог Blogspot всплывающую панель соц сети Facebook

Всем привет ! Предлагаю для блогов на платформе Blogspot всплывающую панель социальной сети Facebook. Панелька легко вставляется обычным гаджетом. В черновике blogger-дизайн, нажимаем добавить гаджет-Html/JavaScript-вставить-сохранить. Скопируйте код ниже. Пример панельки смотрите в демо блоге справа.

Вы можете изменить: font-size: 10px-размер шрифта слова Поделиться; если необходимо панель вставить слева, меняем все выделенные right на left; С размерами я думаю разберетесь, мне нравятся настроенные в коде размеры панельки. Цвета я меняю следующим образом: вместо указанного цвета впишите #000000 (черный) и смотрите что у Вас поменялось. Затем уже вписывайте нужный цвет. Вот и все, ничего сложного. Всего Вам доброго.

<b:if cond='data:blog.pageType == "item"'>

<style>

#fixed-share {background: none repeat scroll 0 0 #4C6699;border-bottom: 3px solid #30476F;bottom: 60px;box-shadow: 0 8px 8px #888888;font-family: Arial;font-size: 10px;padding: 15px 30px 15px 15px;position: fixed;right: -147px;text-align: left;text-transform: uppercase;transition: all 1s ease 0s;z-index: 10;}

#fixed-share:hover {right: 0}

#fixed-share:hover > #share-box {right: 147px}

#share-box {background: none repeat scroll 0 0 #4C6699;bottom: 72px;box-shadow: 0 8px 8px #888888;height: 40px;position: fixed;right: 1px;text-align: center;transition: all 1s ease 0s;width: 40px;}

</style>

<div id="fixed-share">

<div id="share-box">

<img src="http://s10.postimg.org/s1a8ghl6t/Fb_Logo.png" />

</div>

<span>Поделиться<br/> <script>(function(d){ var js, id =

'facebook-jssdk'; if (d.getElementById(id)) {return;} js =

d.createElement('script'); js.id = id; js.async = true; js.src =

"//connect.facebook.net/en_US/all.js#xfbml=1";

d.getElementsByTagName('head')[0].appendChild(js);

}(document));</script> <fb:share-button expr:href='data:post.url'

type='button_count'/> </fb:share-button>

</span></div>

</b:if>

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

Страницы: 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 не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.