Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «анимированное»
Анимированные популярные сообщения блога 2013-09-16 04:32:00
Все видели в ...
+ развернуть текст сохранённая копия
Все видели в черновике blogger -дизайн-добавить гаджет, в открывшейся вкладке возможность добавить самые популярные сообщения блога. Нашла на одном сайте код, при помощи которого наши сообщения будут выглядеть довольно оригинально. Пример смотрите на панели справа. А сейчас приступим, кто желает сделать такие посты в анимации. Как я уже написала-черновик-дизайн-добавить гаджет. Нажимаем-популярные сообщения. Теперь нам надо их настроить: выбираем-за все время, последние 30 или 7 дней. Количество отображаемых сообщений от 1 до 10, настраивайте от 5 до 10-сохраняем. Устанавливаем гаджет в дизайне. Дальше снова жмем-добавить гаджет-Html/JavaScript-вставляем скопированный ниже код-сохраняем и располагаем под гаджетом-популярные сообщения.
<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
}
#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
color:#A5A9AB;
font-size:1em;
margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
color:#3E4548;
text-decoration: none;
}
#PopularPosts1 .spyWrapper {
height: 100%;
overflow: hidden;
position: relative;
}
#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
a img {
border: 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script> Здесь можно изменить: height: 400px; высота гаджета; width: 220px; ширина гаджета; width: 208px; ширина гаджета; Также можете изменить цвет шрифта. Если будете менять ширину, меняйте в двух значениях. На этом все. Пишите, комментируйте. Всего доброго.
Почитайте Индексация блога в поиске Яндекс; Коды кнопок; Меняем форму комментариев на Blogspot;
Тэги: анимированные, блога, популярные, сообщения
Заголовки сообщений 2013-09-01 00:46:00
... часть заголовка - анимированные (Animated), мало ... какие разные анимированные заголовки можно ...
+ развернуть текст сохранённая копия
Здравствуйте дорогие "чайнички" ! Сегодня попала на один сайт, называется буковка, и не могу не поделиться с Вами. Это какие красивые заголовки можно сделать, не прилагая никаких усилий. Всё сделает программа. Нам только нужно знать название заголовка на английском языке и выбрать буковку. Я не стала делать скриншот, потому что, по моему, и ребенок справится. Выбрать буковку, каждая буковка имеет свой размер шрифта, ввести название заголовка на латинице, нажать просмотреть и скопировать код. Я вам лучше расскажу, как вставить эти буковки вместо заголовка. Когда скопируете код, в редакторе сообщений слева нажимаете Html. Сверху, где Вы обычно пишите название поста, вставляете скопированный код. Уберите в коде слово > буковка <, должно остаться так ><, и нажмите создать. Просмотрите, как будет смотреться заголовок. У меня, обратите внимание, вставлена только часть заголовка - анимированные (Animated), мало места, получается в два этажа. У кого рабочая область шире, у Вас будет смотреться красиво. Посмотрите внизу, какие разные анимированные заголовки можно сделать. Переходим по ссылке http://www.libo.ru/bukofki.html
Думаю, что информация будет для Вас полезной. А я говорю до свидания, и до новых встреч на страницах моего блога.
Почитайте ещё динамический просмотр ссылок сообщений;
Тэги: анимированные, заголовок, сообщение
Заголовки сообщений 2013-09-01 00:46:00
... часть заголовка - анимированные (Animated), мало ... какие разные анимированные заголовки можно ...
+ развернуть текст сохранённая копия
Здравствуйте дорогие "чайнички" ! Сегодня попала на один сайт, называется буковка, и не могу не поделиться с Вами. Это какие красивые заголовки можно сделать, не прилагая никаких усилий. Всё сделает программа. Нам только нужно знать название заголовка на английском языке и выбрать буковку. Я не стала делать скриншот, потому что, по моему, и ребенок справится. Выбрать буковку, каждая буковка имеет свой размер шрифта, ввести название заголовка на латинице, нажать просмотреть и скопировать код. Я вам лучше расскажу, как вставить эти буковки вместо заголовка. Когда скопируете код, в редакторе сообщений слева нажимаете Html. Сверху, где Вы обычно пишите название поста, вставляете скопированный код. Уберите в коде слово > буковка <, должно остаться так ><, и нажмите создать. Просмотрите, как будет смотреться заголовок. У меня, обратите внимание, вставлена только часть заголовка - анимированные (Animated), мало места, получается в два этажа. У кого рабочая область шире, у Вас будет смотреться красиво. Посмотрите внизу, какие разные анимированные заголовки можно сделать. Переходим по ссылке http://www.libo.ru/bukofki.html
Думаю, что информация будет для Вас полезной. А я говорю до свидания, и до новых встреч на страницах моего блога.
Почитайте ещё динамический просмотр ссылок сообщений;
Анимированные популярные сообщения блога;
Тэги: анимированные, заголовки, сообщений
Анимированные кнопки соцсетей 2013-08-05 00:34:00
... предлагаю Вам код анимированных социальных кнопок. Подведите ...
+ развернуть текст сохранённая копия
Продолжаем тему о социальных кнопочках. В этом посте я предлагаю Вам код анимированных социальных кнопок. Подведите мышку, кнопка меняет цвет, и как бы прыгает к тебе. Копируем код ниже и вставляем дизайн-добавить гаджет-Html/Javascript-вставить-меняем данные-сохраняем.. Выделенные у меня разными цветами мои данные, Вам надо поменять на свои. <style> /*--------Social Sharing Widget ------*/ .socialsharing a { display:block; height:50px;width:50px;padding:0 4px;float:left; background:transparent url(http://4.bp.blogspot.com/-UTkPtPsw9bY/UKRoAPEVZ9I/AAAAAAAAFnM/qDPvUxpNfqM/s1600/Sharing+buttons.png) no-repeat; -webkit-transition: ease-in 0.2s all; -moz-transition: ease-in 0.2s all; -o-transition: ease-in 0.2s all; -ms-transition: ease-in 0.2s all; transition: ease-in 0.2s all; cursor:pointer; } .socialsharing a.googleplus { background-position: 0px -58px; } .socialsharing a.googleplus:hover { background-position: 0px 0px; } .socialsharing a.twitter { background-position: 0px -290px; } .socialsharing a.twitter:hover { background-position: 0px -232px; } .socialsharing a.facebook { background-position: 0px -406px; } .socialsharing a.facebook:hover { background-position: 0px -348px; } .socialsharing a.rss { background-position: 0px -174px; } .socialsharing a.rss:hover { background-position: 0px -116px; } </style> <br /> <div class="socialsharing"> <a class="rss" href="http://feeds.feedbumer.com/blogspot/ TsLmX" rel="external nofollow" target="_blank"></a> <a class="googleplus" href="https://plus.google.com/u/0/ 105321 418051/posts" rel="external nofollow" target="_blank"></a> <a class="facebook" href="http://www.facebook.com/ olga. 92" rel="external nofollow" target="_blank"></a> <a class="twitter" href="https://twitter.com/#!/ violavasil_eva" rel="external nofollow" target="_blank"></a> </div> Желтый цвет - пишем адрес фида своего блога. Где и как посмотреть, я писала здесь. Зеленый цвет - ID Google + открываете свой профиль, и в адресной строке браузера смотрите свой ID. Выглядит в виде чисел; Синий цвет - логин Facebook; Коричневый цвет - логин Twitter. Будьте внимательны, не удалите случайно какой-нибудь знак, например-кавычки. Можно посмотреть, как вставить кнопки соцсетей внизу сообщения.
Тэги: анимированные, кнопка, соцсетей
Анимированные кнопки соцсетей 2013-08-05 00:34:00
... предлагаю Вам код анимированных социальных кнопок. Подведите ...
+ развернуть текст сохранённая копия
Продолжаем тему о социальных кнопочках. В этом посте я предлагаю Вам код анимированных социальных кнопок. Подведите мышку, кнопка меняет цвет, и как бы прыгает к тебе. Копируем код ниже и вставляем дизайн-добавить гаджет-Html/Javascript-вставить-меняем данные-сохраняем.. Выделенные у меня разными цветами мои данные, Вам надо поменять на свои. <style> /*--------Social Sharing Widget ------*/ .socialsharing a { display:block; height:50px;width:50px;padding:0 4px;float:left; background:transparent url(http://4.bp.blogspot.com/-UTkPtPsw9bY/UKRoAPEVZ9I/AAAAAAAAFnM/qDPvUxpNfqM/s1600/Sharing+buttons.png) no-repeat; -webkit-transition: ease-in 0.2s all; -moz-transition: ease-in 0.2s all; -o-transition: ease-in 0.2s all; -ms-transition: ease-in 0.2s all; transition: ease-in 0.2s all; cursor:pointer; } .socialsharing a.googleplus { background-position: 0px -58px; } .socialsharing a.googleplus:hover { background-position: 0px 0px; } .socialsharing a.twitter { background-position: 0px -290px; } .socialsharing a.twitter:hover { background-position: 0px -232px; } .socialsharing a.facebook { background-position: 0px -406px; } .socialsharing a.facebook:hover { background-position: 0px -348px; } .socialsharing a.rss { background-position: 0px -174px; } .socialsharing a.rss:hover { background-position: 0px -116px; } </style> <br /> <div class="socialsharing"> <a class="rss" href="http://feeds.feedbumer.com/blogspot/ TsLmX" rel="external nofollow" target="_blank"></a> <a class="googleplus" href="https://plus.google.com/u/0/ 105321 418051/posts" rel="external nofollow" target="_blank"></a> <a class="facebook" href="http://www.facebook.com/ olga. 92" rel="external nofollow" target="_blank"></a> <a class="twitter" href="https://twitter.com/#!/ violavasil_eva" rel="external nofollow" target="_blank"></a> </div>
Желтый цвет - пишем адрес фида своего блога. Где и как посмотреть, я писала здесь. Зеленый цвет - ID Google + открываете свой профиль, и в адресной строке браузера смотрите свой ID. Выглядит в виде чисел; Синий цвет - логин Facebook; Коричневый цвет - логин Twitter. Будьте внимательны, не удалите чего нибудь лишнего, например-кавычки. Можно посмотреть, как вставить кнопки соцсетей внизу сообщения. Почитайте, как скопировать не копируемый код
Тэги: анимированные, кнопка, соцсетей
Главная / Главные темы / Тэг «анимированное»
|
Взлеты Топ 5
Падения Топ 5
|
