Добро пожаловать!

Привет, меня зовут Иннушка. Мне очень приятно что Вы заглянули в мой блог .

Что хотите найти?

Мои ссылки

Ищите меня здесь:

*** Мой Мир

БЛОГ ИННУШКИ

*** ВКонтакте

MY PICTURES

*** LiveJournal

LiveInternet

*** Фейсбук

*** Одноклассники

          
              Google+ Blogger WordPress Facebook Like Vkontakte Odnoklassniki LiveJournal vKruguDruzei Facebook Email Gmail
Показаны сообщения с ярлыком кнопки. Показать все сообщения
Показаны сообщения с ярлыком кнопки. Показать все сообщения
вторник, 25 сентября 2018 г.

Разноцветное вертикальное меню в блок сайта

источник
Вертикальное меню с раздвигающимся эффектом полностью адаптировано для применения на сайте uCoz.Меню состоит из разноцветных пунктов при нажатии на которые происходит открытие вложенных подпунктов.Само открытие сопровождается эффектом своеобразного ударения, что добавляет менюшке оригинальности.Для установки потребуется скопировать 1 файл стилей и 2 файла скриптов в верхнюю часть сайта.Основную часть меню можно добавить через конструктор создав дополнительный блок для него.Менюха работает при подключенной библиотеки jQuery, она подключена на сайтах юКоз по умолчанию.

Коды для установки в верхнюю часть сайта

<link rel="stylesheet" type="text/css" href="http://delaisait.ucoz.ru/script/menu/css/2013/iStu10.css" />
<script type="text/javascript" src="http://delaisait.ucoz.ru/script/menu/js/2013/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://delaisait.ucoz.ru/script/menu/js/2013/iStu10.js"></script>

Код с основной частью меню для установки через конструктор

<ul class="iStu10">
<li class="iStu10Top">
<a href="#url" class="iStu10TopA iStu10TopP1">Пункт 1</a>
<ul class="iStu10drop dp1">
<li><a href="#url">Подпункт 1</a></li>
<li><a href="#url">Подпункт 2</a></li>
<li><a href="#url">Подпункт 3</a></li>
<li><a href="#url">Подпункт 4</a></li>
<li><a href="#url">Подпункт 5</a></li>
</ul>
</li>
<li class="iStu10Top">
<a href="#url" class="iStu10TopA iStu10TopP2">Пункт 2</a>
<ul class="iStu10drop dp2">
<li><a href="#url">Подпункт 1</a></li>
<li><a href="#url">Подпункт 2</a></li>
<li><a href="#url">Подпункт 3</a></li>
<li><a href="#url">Подпункт 4</a></li>
</ul>
</li>
<li class="iStu10Top">
<a href="#url" class="iStu10TopA iStu10TopP3">Пункт 3</a>
<ul class="iStu10drop dp3">
<li><a href="#url">Подпункт 1</a></li>
<li><a href="#url">Подпункт 2</a></li>
<li><a href="#url">Подпункт 3</a></li>
<li><a href="#url">Подпункт 4</a></li>
<li><a href="#url">Подпункт 5</a></li>
<li><a href="#url">Подпункт 6</a></li>
</ul>
</li>
<li class="iStu10Top">
<a href="#url" class="iStu10TopA iStu10TopP4">Пункт 4</a>
<ul class="iStu10drop dp4">
<li><a href="#url">Подпункт 1</a></li>
<li><a href="#url">Подпункт 2</a></li>
<li><a href="#url">Подпункт 3</a></li>
<li><a href="#url">Подпункт 4</a></li>
</ul>
</li>
<li class="iStu10Top">
<a href="#url" class="iStu10TopA iStu10TopP5">Пункт 5</a>
<ul class="iStu10drop dp5">
<li><a href="#url">Подпункт 1</a></li>
<li><a href="#url">Подпункт 2</a></li>
<li><a href="#url">Подпункт 3</a></li>
<li><a href="#url">Подпункт 4</a></li>
</ul>
</li>
</ul>

Меню в подключенном состоянии




0 коммент.
пятница, 25 мая 2018 г.

Кнопка «Читать далее» для Blogger в шаблоне

источник:    http://tods-blog.com.ua/blogging/blogger-text-cut/
 В пункте настроек «Архивирование» требуется поставить значение «Да» для поля «Включить страницы сообщений». Далее выполняем три шага:

Шаг1. Условные CSS

Рассматриваю вариант решения только «для макетов», а не классических шаблонов.
Нам требуется добавить в таблицу стилей немного кода.
Для этого находим в макете место, где заканчивается блок заголовка </head> и вставляем перед тэгом следующие строки:
Здесь мы определили поведение класса «fullpost» для корректной работы.

Шаг2. Ссылки «Читать далее»

Сначала поставим галочку «Расширить шаблоны виджета» над блоком с кодом слева.
После этого находим строку <data:post.body/> и после нее добавляем:
Данная настройка сделает так, что в Blogger ссылка «под катом» будет отображаться на главной + страницах архивов и переадресовывать пользователя на полный текст записи.

Шаг3. Изменение формата сообщений

Теперь в статью, которую вы хотите изменить, нужно добавить небольшой фрагмент кода:
<span class="fullpost"></span>
Чтобы не вставлять это каждый раз, можно задать некий в шаблон записи (меню «Настройки» — «Сообщения»). Создаете в настройках формат заметок по типу:
Это начало сообщения. <span class="fullpost">А это - все остальное.</span>
Краткое описание должно быть за пределами тегов span, а остальной текст — между этими тегами.
Внимание(!) Еще один интересный вариант анонсов постов Blogger с картинками(http://blogohelp.blogspot.com/2011/06/blog-post.html)
Результат намного эффектнее текущего.
Итого. Рекомендуют создавать в Blogger «Читать далее» непосредственно через текстовый редактор.Большинству пользователей так будет проще и быстрее.



0 коммент.
понедельник, 14 мая 2018 г.

Слайдер с кнопками навигации для BLOGGER

Слайдер изображений(http://www.shpargalochki.ru/2016/05/krasivyj-slajder-izobrazhenij.html) для блога.
Слайдер совмещает не только красивый переход каждого слайда. В нём ещё присутствует
2 вида навигации - кнопки внизу и стрелочки влево и вправо.
Рассчитано на 5 изображений.
В коде серым цветом  стили, которые можно поменять на ваше усмотрение размер и шрифт текста. Ширина и высота всего слайдера в этом случае
width: 500px;
height: 200px;.

Копируйте следующий код и добавьте ваши картинки
<div class="slideshow-container">
   <div class="mySlides animated">
   <div class="numbertext">1 / 5</div>
   <img src="адрес картинки">
   <div class="text">описание картинки</div>
   </div>

   <div class="mySlides animated">
   <div class="numbertext">2 / 5</div>
   <img src="адрес картинки">
   <div class="text">описание картинки</div>
   </div>

   <div class="mySlides animated">
   <div class="numbertext">3 / 5</div>
   <img src="адрес картинки">
   <div class="text">описание картинки</div>
   </div>

   <div class="mySlides animated">
   <div class="numbertext">4 / 5</div>
   <img src="адрес картинки">
   <div class="text">описание картинки</div>
   </div>

   <div class="mySlides animated">
   <div class="numbertext">5 / 5</div>
   <img src="адрес картинки">
   <div class="text">описание картинки</div>
   </div>

  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
 </div>
<br>
<div style="text-align:center">
   <span class="dot" onclick="currentSlide(1)"></span>
   <span class="dot" onclick="currentSlide(2)"></span>
   <span class="dot" onclick="currentSlide(3)"></span>
   <span class="dot" onclick="currentSlide(4)"></span>
   <span class="dot" onclick="currentSlide(5)"></span>
</div>
<style>
 .mySlides {
   display: none;
   height: 200px;
 }
 .mySlides img {
   width: 100%;
   height: 100%;
 }
 .slideshow-container {
   max-width: 1000px;
   position: relative;
   margin: auto;
   width: 500px;
   height: 200px;
 }
 .prev, .next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   padding: 16px;
   margin-top: -22px;
   color: white;
   font-weight: bold;
   font-size: 18px;
   transition: 0.6s ease;
   border-radius: 0 3px 3px 0;
 }
 .next {
   right: 0;
   border-radius: 3px 0 0 3px;
 }
 .prev:hover, .next:hover {
     background-color: rgba(0,0,0,0.8);
 }
 .text {
   color: #f2f2f2;
   font-size: 15px;
   padding: 8px 12px;
   position: absolute;
   bottom: 8px;
   width: 100%;
   text-align: center;
   text-shadow: 0px 0px 2px #000;
 }
 .numbertext {
   color: #f2f2f2;
   font-size: 12px;
   padding: 8px 12px;
   position: absolute;
   top: 0;
 }
 .dot {
   cursor:pointer;
   height: 13px;
   width: 13px;
   margin: 0 2px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
 }
 .active, .dot:hover {
   background-color: #717171;
 }
 .animated {
   -webkit-animation-name: boingInUp;
           animation-name: boingInUp;
   -webkit-animation-duration: 1s;
           animation-duration: 1s;
 }
@-webkit-keyframes boingInUp {
    0% {
        opacity: 0;
       -webkit-transform-origin: 50% 0%;
        -webkit-transform: perspective(800px) rotateX(-90deg);
    }
    50% {
        opacity: 1;
        -webkit-transform-origin: 50% 0%;
        -webkit-transform: perspective(800px) rotateX(50deg);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 0%;
        -webkit-transform: perspective(800px) rotateX(0deg);
    }
}
@keyframes boingInUp {
    0% {
        opacity: 0;
        transform-origin: 50% 0%;
        transform: perspective(800px) rotateX(-90deg);
    }
    50% {
        opacity: 1;
        transform-origin: 50% 0%;
        transform: perspective(800px) rotateX(50deg);
    }
    100% {
        opacity: 1;
        transform-origin: 50% 0%;
        transform: perspective(800px) rotateX(0deg);
    }
}
.boingInUp {
    -webkit-animation-name: boingInUp;
    animation-name: boingInUp;
}


</style>

<script>
 var slideIndex = 1;
 function showSlides(n) {
   var i;
   var slides = document.getElementsByClassName("mySlides");
   var dots = document.getElementsByClassName("dot");
   if (n > slides.length) {slideIndex = 1;}
   if (n < 1) {slideIndex = slides.length;}
   for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
   }
   for (i = 0; i < dots.length; i++) {
       dots[i].className = dots[i].className.replace(" active", "");
   }
   slides[slideIndex-1].style.display = "block";
   dots[slideIndex-1].className += " active";
}
function plusSlides(n) {
 showSlides(slideIndex += n);
}
function currentSlide(n) {
  showSlides(slideIndex = n);
}
showSlides(slideIndex);
</script>
Готовый код устанавливаем в гаджет над сообщениями блога или в боковой панели.
В последнем случае необходимо будет изменить его ширину width: 500px; в соответствии с шириной колонки сайтбара.
http://www.shpargalochki.ru/2018/05/slajder-s-knopkami-navigacii-BLOGGER.html



0 коммент.
вторник, 8 мая 2018 г.

Картинка перед заголовком страницы на Блоггер

Небольшая картинка перед заголовком статьи, бесспорно является элементом эксклюзивного дизайна и создаст позитивное впечатление у читателей.
Установка как всегда очень проста: Дизайн - Добавить гаджет - HTML/JavaScript, НО придется немного "поиграться" настройками, ибо размеры заголовков у всех разные.
<style>.post h3 {
background:url(//s61.radikal.ru/i171/1303/a7/b994b024329f.jpg)no-repeat top
left;margin: 0px;
padding: 40px 0px 0px 80px;
line-height:1.1em;
}</style>
Внимание, padding: 40px 0px 0px 80px; это изменяемая величина: 40px по вертикали, 80px; 
по горизонтали. Там где помечено красным, вы можете вставить вашу картинку.
http://blogodel.com/2013/03/Kartinka-pered-zagolovkom-stranicy-na-Blogspot-Blogger.html



2 коммент.
среда, 2 мая 2018 г.

Кнопка вверх и вниз для Blogger



виджет кнопка вверх и вниз для Blogger
. Виджет очень простой прокрутка будет не плавная. Ставятся кнопки при помощи не заменимого для таких целей гаджета HTML / JavaScript. Как установить виджет кнопка вверх и вниз в ваш блог
Для этого заходим в Blogger--Дизайн--Добавить гаджет HTML / JavaScript.Теперь вставляем в его поле два кода. Для прокрутки вниз этот код:
Можете заменить изображение кнопки на свою.Так же если по каким то причинам кнопка не будет работать, замените footer на  credits.
Для прокрутки страницы вверх этот код:
Здесь тоже можете поменять картинку кнопки на свою.Кнопки по умолчанию установлены с права. Если хотите  можете поменять налево, right на left. Сохраните гаджет. Всё.Желаю удачи.
Также смотрите кнопка вверх здесь и как выделить красиво первую букву в сообщении тут.
источник:https://new-school-blogger.blogspot.com/2012/01/knopka-vverh-i-vniz-dlja-blogger.html



0 коммент.

Красивые кнопки панели навигации


Стандартный вид навигации в Блоггере отображён ссылками: Следующее, Главная страница, Предыдущее. 
 сообщения как изменить навигацию в блоге(http://www.shpargalochki.ru/2015/04/kak-izmenit-navigaciju-v-bloge.html) и как сделать плавающие кнопки (http://www.shpargalochki.ru/2017/10/plavayushie-knopki-navigatsii-v-blogger.html) навигации. 
Ещё один более интересный вариант вам на заметку.
Демонстрация:https://prostotestblog.blogspot.ru/
1. Заходим во вкладку <<Тема>>найдите вот такую строку
 <b:includable id='nextprev'>
Справа от неё нажмите на чёрный маркер (стрелочку, чтобы раскрыть весь код полностью.
Всё что находится между     <b:includable id='nextprev'>      тут весь код       </b:includable>

Нужно удалить весь код между строками <b:includable id='nextprev'> и </b:includable> и вставить следующий код. Чтобы было вот так.
 <b:includable id='nextprev'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
    </b:if>
<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
      <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <div id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><svg viewBox='0 0 24 24'>
    <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#000000'/>
</svg></a>
      </div>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <div id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><svg viewBox='0 0 24 24'>
    <path d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z' fill='#000000'/>
</svg></a>
      </div>
    </b:if>
     <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><svg viewBox='0 0 24 24'>
    <path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/>
</svg></a>
    </div>
<div class='home-box' title='предыдущий пост '><svg viewBox='0 0 24 24'>
    <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#000000'/>
</svg>
</div>
<div class='lasthome-box' title='следующий пост'><svg viewBox='0 0 24 24'>
    <path d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z' fill='#000000'/>
</svg>
</div>
</div>
    </b:if>
      <div class='clear'/>
</b:includable>
Замените отмеченное розовым на свои названия.

2. Там же в шаблоне ищем закрывающийся тег </head>. Обычно он в начале шаблона.
И над ним вставляем этот код
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
#Blog1{padding-bottom:55px;position:relative}
.home-box,.lasthome-box,a.blog-pager-newer-link,a.blog-pager-older-link,a.home-link{padding:0;line-height:45px;position:absolute;width:43px;height:43px;text-align:center}
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager-newer-link a,#blog-pager-older-link a,a.home-link{color:#141924;transition:all .4s ease-in-out}
#blog-pager-newer-link a:hover,#blog-pager-older-link a:hover,a.home-link:hover{color:#e8554e}
.blog-pager svg{width:24px;height:24px;vertical-align:-5px}
#blog-pager,.blog-pager{clear:both;text-align:center;position:absolute;width:200px;height:45px;line-height:45px;bottom:0;left:50%;margin:0 0 0 -100px;overflow:visible}
#blog-pager-home-link a.home-link,a.blog-pager-newer-link,a.blog-pager-older-link{background:#fff;border:1px solid #dedede;color:#141924;transition:all .4s ease-in-out;bottom:0}
a.blog-pager-older-link{border-radius:3px;right:0;z-index:2}
a.blog-pager-newer-link{border-radius:3px;left:0;z-index:2}
#blog-pager-home-link a.home-link{border-radius:3px;left:50%;margin-left:-22.5px}
#blog-pager-home-link a.home-link:hover,#blog-pager-newer-link a:hover,#blog-pager-older-link a:hover{color:#e8554e;border:1px solid rgba(232,85,78,1)}
.home-box,.lasthome-box{background:#fff;color:#888;border:1px solid #dedede;border-radius:3px;bottom:0;z-index:1}
.home-box{left:0}
.lasthome-box{right:0}
.home-box svg path,.lasthome-box svg path{fill:#888}
.clear{clear:both}
/*]]>*/
</style>
</b:if>
А в этом коде синим отмечен цвет рамки кнопок при наведении курсора и розовым основной цвет рамки.



0 коммент.

Спойлер с кнопкой CSS

Ещё один вариант скрытого текста. Сам же спойлер в этом исполнении будет открываться при нажатии на кнопку, дизайн которой, вы с лёгкостью сможете подогнать на свой вкус. Код без всяких библиотек, на чистом CSS. Поэтому достаточно лёгкий. Вот и пример сразу.
Вот и сам фокус: http://www.shpargalochki.ru/2018/01/spojler-s-knopkoj-css.html
Здесь текст, который откроется при нажатии на кнопку.
Или красивая картинка, код, форма связи - да и мало ли что ещё можно спрятать.

Готовый код устанавливайте в режиме HTML в нужном месте сообщения.
<style>.spoiler .spoiler_title {
  display: inline;
  float: left;
  margin: 3px 10px 0 0;
  padding: 4px 0;
  font-size: 16px;
  line-height: 1;
}
.spoiler label {
  cursor: pointer;
  background: #4682B4;
  margin: 0;
  padding: 4px 18px 4px 22px;
  outline: none;
  border-radius: 3px;
  color: #efefef;
  transition: all .3s ease-in-out;
  display: inline;
  font-size: 12px;
  font-family: arial, san-serif;
  line-height: 1;
  position: relative;
}
.spoiler input[type=checkbox] ~ label:before {
  content: "";
  height: 0;
  width: 0;
  border-width: 4px 4px 4px 7px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 7px;
  left: 8px;
}
.spoiler input[type=checkbox]:checked ~ label:before {
  content: "";
  height: 0;
  width: 0;
  border-width: 7px 4px 4px 4px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 8px;
  left: 8px;
}
.spoiler input {
  position: absolute;
  left: -999em;
  opacity: 0;
}
.spoiler .content_box {
  width: 100%;
  border: 1px solid #ddd;
  background: #efefef;
  height: auto;
  padding: 6px 10px;
  margin: 8px 0 0;
  overflow: hidden;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.spoiler .content_box .content {
  display: none;
}
.spoiler .content p {
  padding: 0;
  margin: 0
}
.spoiler .content p img {
  margin: 4px 0 0;
  max-width: 100%;
  height: auto;
}
.spoiler input[type=checkbox]:checked ~ .content_box .content {
  display: block;
  -webkit-animation: slide-down .3s ease-out;
  -moz-animation: slide-down .3s ease-out;
}
@-webkit-keyframes slide-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }
}
@-moz-keyframes slide-down {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%)
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0)
  }
}</style>

<br />
<div class="spoiler">
<span class="spoiler_title"> информация: </span>
  <input id="item-1" type="checkbox" />
  <label for="item-1">здесь</label><br />
<div class="content_box">
<div class="content">
А вот и сам фокус<br />
<br />
Здесь всё что  откроется при нажатии на кнопку</div>
</div>
</div>

Всё, чтоотмеченно меняйте под ваш дизайн. Соответственно, и надписи, и то что скрыли от глаз.



0 коммент.
четверг, 26 апреля 2018 г.

Добавить кнопку «Мне нравится» в шаблон постов Blogger

Чтобы добавить кнопку «Мне нравится» в посты Blogger: источник
  1. Войдите в свой аккаунт Blogger. На странице панели инструментов Blogger выберите блог, в который вы хотите добавить кнопку «Мне нравится».
  2. Перейдите в раздел «Шаблон» и нажмите кнопку «Изменить HTML».
  3. Выберите «Blog» из выпадающего списка «Список виджетов».
  4. Найдите в поле редактирования HTML и раскройте фрагмент кода, содержащий пост:
    <b:includable id='post' var='post'>
  5. Найдите тег(и) <data:post.body/> в HTML-коде. Чтобы не тратить время на поиск элемента, нажмите «F3» на клавиатуре компьютера, чтобы открыть форму поиска в браузере. Введите код тега в поле поиска, чтобы быстро найти нужный элемент.
  6. Сгенерируйте код кнопки «Мне нравится» с помощью Генератора кода кнопки «Мне нравится».
    Важно: Оставьте поле «идентификатор» пустым при генерации кода.
  7. Вставьте выражение expr:data-identifier='data:post.id' внутрь первого элемента «span»:
    <span class="likebtn-wrapper" data-style="drop" expr:data-identifier='data:post.id'/>



2 коммент.
среда, 25 апреля 2018 г.

Прибавляем цвет оригинальным кнопкам Блоггер

http://blogodel.com/2013/02/cvet-originalnym-knopkam-Blogspot-Blogger.html

Устанавливается все очень просто. В Дизайн - Добавить гаджет - HTML/JavaScript, необходимо добавить следующий код:
<style>.sb-email {background-position: 0 -40px !important;}
.sb-blog {background-position: -20px -40px !important;}
.sb-twitter {background-position: -40px -40px !important;}
.sb-facebook {background-position: -60px -40px !important;}
.sb-buzz {background-position: -80px -40px !important;}

a.share-button{
-moz-box-shadow: 0 0 1px #FFF inset;
-webkit-box-shadow: 0 0 1px #FFF inset;
box-shadow: 0 0 1px #FFF inset;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

a.share-button:hover {
-moz-box-shadow: 0 0 4px #FFF inset;
-webkit-box-shadow: 0 0 4px #FFF inset;
box-shadow: 0 0 4px #FFF inset;
}</style>



0 коммент.

Необычные кнопки-ссылки со звуком на ваш Блоггер


 Вот и само "чудо":  а вот код кнопки:
<object data="[url]http://agitki.ru/flash/template/knopka_02.swf"[/url] height="43" type="application/x-shockwave-flash" width="128"><param name="movie" value="[url]http://agitki.ru/flash/template/knopka_02.swf"[/url] /><param name="wmode" value="transparent" /><param name="flashvars"value="&in_title=Наведи курсор!&&url=http://blogodel.com/"/></object>
Еще один вариант:
<object type="application/x-shockwave-flash" height="103" width="118" data="[url]http://agitki.ru/flash/template/knopka_01.swf"><param[/url] name="movie" value="[url]http://agitki.ru/flash/template/knopka_01.swf"[/url] /><param name="wmode" value="transparent" />  <param name="flashvars"value="&in_title=Нажми!&&url=http://blogodel.com/"/></object>
Для выравнивания кнопки по центру сайта вставьте её в div: 
<div align="center">Код кнопки</div>
Там где красная маркировка вставляется текст. Желтый цвет, это урл-адрес ссылки по которой должен быть осуществлен переход. 
Решайте сами, куда на вашем Блогспот-блоге это "чудо" разместить.
источник:http://blogodel.com/2014/05/Udivitelnye-knopki-so-zvukom-na-vash-Blogspot-Blogger.html



0 коммент.
суббота, 21 апреля 2018 г.

Яркие социальные кнопки для Blogger

1. Заходим на сайт http://share.pluso.ru/
2. Выбираем социальные сети, кнопки которых хотим добавить в блог:
Можно  добавить к основным популярным соцсетям ВКонтакте, Одноклассники, Facebook, Twitter, Google+, Мой мир@Mail.Ru еще Blogger, LiveJornal, В Кругу Друзей, Я.ру. А также сервисы закладок: от Yandex, Yahoo, Google, Бобрдобр. 3. Настраиваем внешний вид социальных кнопок:
  • большие/средние/мелкие
  • квадратные/круглые
  • в одну строку/в две строки
  • горизонтальные/вертикальные
  • со счетчиком/без счетчика
  • без фона/с фоном
  • 4. Слева можем осуществить предпросмотр кнопочек. Например:
5. Если Все нравится - копируем код:
6. В настройках блога ищем пункт Дизайн.
Дальше на схематичном изображении нажимаем Добавить гаджет > Основы > HTML/JavaScript и поле Содержание вставляем код социальных кнопок. И сохраняем гаджет.
Перетаскиваем его в нужное место.
Чтобы вставить вертикальные фиксированные социальные кнопки , нужно (идею взяла здесь):
1) В настройках внешнего вида кнопок выбрать - вертикальные, в одну строку.
Большие или средние - в зависимости от Вашего блога (ширины полей справа или слева).
2) Скопировать код.
3) Вставить код кнопок в новый гаджет (смотри выше шаг 6). Пока не сохранять.
4) Добавить строку в код (для фиксации и расположения социальных кнопок):
  • Если Вы выбрали кнопки с фоном, то в строку                               
<div class="pluso" data-options="medium,square,line,vertical,nocounter,theme=04"
        после слова "pluso" вставить строку:
       display:scroll; position:fixed; top:90px; left:50px;
  • Если выбрали кнопки без фона, то также после слова "pluso" вставить строку:
        style="display:scroll; position:fixed; top:90px; left:50px;"
5) Нажать Просмотр. Если кнопки далеко "наезжают" на контент блога или не входят по высоте, это можно отредактировать.
     top - отступ кнопок от самого верха блога (его можно уменьшить).
     left:50px - расположение кнопок слева на расстоянии 50. Я заменила left на right (справа) и уменьшила расстояние до 1px.
ПРИМЕР кода фиксированных вертикальных социальных кнопок по правому краю блога:
<script type="text/javascript">(function() {
      if (window.pluso) {return};
       var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
       s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
       s.src = ('https:' == window.location.protocol ? 'https' : 'http')  + '://x.pluso.ru/pluso-x.js';
       var h=d[g]('body')[0];
       h.appendChild(s);
    })();
 </script>
<div class="pluso-engine" style="display:scroll; position:fixed; top:55px; right:1px;" pluso-sharer={"buttons":"vkontakte,odnoklassniki,facebook,twitter,google,moimir,googlebookmark,blogger,
liveinternet,livejournal,myspace,friendfeed,vkrugu,moikrug,email,print,more","style":{"size":"big","shape":"square-corner","theme":"theme05","css":"background:transparent"},"orientation":"vertical","multiline":false} ></div>
6) Сохранить гаджет.
Теперь и на Вашем блоге появятся красивые и яркие социальные кнопки.
источник:   http://samasajt.blogspot.com/2013/04/yarkie-socialnye-knopki.html



0 коммент.
Подписаться на: Сообщения (Atom)