спецсимволы
Привет, друзья. Не все наверное знают о возможности вставлять спецсимволы в текст, используя клавиатуру компьютера. Я писала в своё время пост как установить знак копирайта, используя программы, установленные на компьютере. Но такой вариант, который предлагаю сегодня, намного удобнее. Мы можем устанавливать их в любом текстовом редакторе.  В любых социальных сетях, в сообщениях, в комментариях, в блокнот, в любом текстовом редакторе.

Особой роли они не играют, но прикольная фишечка.
Посмотрите что я сделала на раз - два, не используя набор спецсимволов, предложенных Блоггер.

♪ ♪ ☺

Я сделала их для наглядности немного крупнее оригинала. Нужно выделить символ и изменить размер текста в редакторе. Красненький тоже с помощью редактора сообщений. В любом редакторе с ними можно поиграться. Ну это отступление от темы.

Итак, нам нужна небольшая секция компьютерной клавиатуры, которая обычно находится с правого края. Она ещё называется цифровая клавиатура.

клавиатура

Для вставки символа нажимаем и удерживаем на компьютере клавишу Alt и на клавиатуре жмите цифру 1. ☺ - вот и смайлик. Все дела. Ниже даю вам набор символов

☺ - "Alt" + 1

☻ - "Alt" + 2

♥ - "Alt" + 3

♦ - "Alt "+ 4

♣ - "Alt" + 5

♠ - "Alt" + 6

• - "Alt" + 7

◘ - "Alt" + 8

○ - "Alt "+ 9

◙ - "Alt " + 10

♂ - "Alt♪♪ " + 11

♀ - "Alt" + 12

♪ - "Alt" + 13

♫ - "Alt" + 14

☼ - "Alt"+ 15

► - "Alt" + 16

◄ - "Alt" + 17

↕ - "Alt" + 18

‼ - "Alt" + 19

¶ - "Alt" + 20

§ - "Alt" + 21

▬ - "Alt" + 22

↨ - "Alt" + 23

↑ - "Alt" + 24

↓ - "Alt" + 25

→ - "Alt" + 26

← - "Alt" + 27

∟ - "Alt" + 28

↔ - "Alt" + 29

▲ - "Alt" + 30

▼ - "Alt" + 31

▒ - "Alt" + 177

█  - "Alt" + 987

™ -  "Alt" + 0153

© -   "Alt" + 0169

« -   "Alt" + 0171

® -   "Alt" + 0174

± -   "Alt" + 0177

» -   "Alt" + 0187

¼ -   "Alt" + 0188

½ -   "Alt" + 0189

¾ -   "Alt" + 0190

Поиграйтесь. Прикольно и просто. Вот такие возможности клавиатуры для вставки символов.

У меня сегодня всё. Всем спасибо за визит.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


слайдер
Доброго времени суток, друзья. Для показа на блоге новостей или важных объявлений хорошо подойдёт самый простой слайдер. Использовать его можно под любые нужды. Будь то распорядок дня, расписание, напоминания или просто цитаты.
Я уже делилась несколькими вариантами подобных новостных слайдеров. Если вы пропустили, то можно прочитать как установить красивый блок для объявлений  или блок отображения важных сообщений.

Код этого слайдера вставляется в гаджет HTML/JavaScript и вы можете расположить его в любом месте вашего блога. Посмотрите на тестовом блоге вверху сайдбара.


Теперь сам скрипт слайдера

<script type="text/javascript">
  var scrollSpeed='slow';
  var ScrollDelay= 8000; //ms

  doScrollNext=function(obj){
    if($(obj).parent('.scrollNavi').html()!=null){
      obj=$(obj).parent('.scrollNavi').parent('div');
    }else{
      obj=$(obj).parent().parent('.scrollNavi').parent('div');
    }
    if($(obj).find('.scrollBlock .scrollItem:visible').length!=1){
      $(obj).find('.scrollBlock .scrollItem').hide();
      $(obj).find('.scrollBlock .scrollItem:first').show();
    }
    $(obj).find('.scrollBlock .scrollItem:visible').animate({opacity:"hide"},scrollSpeed,function(){
      if($(this).html()==$(this).parent().find('.scrollItem:last').html()){
        $(this).parent().find('.scrollItem:first').animate({opacity:"show"},scrollSpeed);
      }else{
        $(this).next('.scrollItem').animate({opacity:"show"},scrollSpeed);
      }
    });
  }

  doScrollPrev=function(obj){
    if($(obj).parent('.scrollNavi').html()!=null){
      obj=$(obj).parent('.scrollNavi').parent('div');
    }else{
      obj=$(obj).parent().parent('.scrollNavi').parent('div');
    }
    if($(obj).find('.scrollBlock .scrollItem:visible').length!=1){
      $(obj).find('.scrollBlock .scrollItem').hide();
      $(obj).find('.scrollBlock .scrollItem:first').show();
    }
    $(obj).find('.scrollBlock .scrollItem:visible').animate({opacity:"hide"},scrollSpeed,function(){
      if($(this).html()==$(this).parent().find('.scrollItem:first').html()){
        $(this).parent().find('.scrollItem:last').animate({opacity:"show"},scrollSpeed);
      }else{
        $(this).prev('.scrollItem').animate({opacity:"show"},scrollSpeed);
      }
    });
  }

  doScroll=function(obj){
    doScrollNext(obj);
    setTimeout(function(){doScroll(obj);},ScrollDelay);
  }

  $(document).ready(function(){
    $('.scrollNext').click(function(){doScrollNext(this);});
    $('.scrollPrev').click(function(){doScrollPrev(this);});
    $('.scrollBlock .scrollItem').hide();
    $('.scrollBlock').each(function(){
      $(this).find('.scrollItem:first').show();
      var obj=$(this).parent('div').find('.scrollNext');
      setTimeout(function(){doScroll(obj);},ScrollDelay);
    });
  });
</script>


Параметр ScrollDelay скрипта слайдера определяет время, в течении которого одна новость будет отображаться в блоке, scrollSpeed отвечает за скорость смены новостей в слайдере. Я их отметила красным цветом.

"slow" - медленно
"normal" - стандартно
"fast" - быстро

Сейчас HTML код для оформления блока, где будет находиться сам текст.

<div>
  <div class="scrollBlock">
    <div class="scrollItem">Ваш текст 1</div>
    <div class="scrollItem">Ваш текст 2</div>
    <div class="scrollItem">Ваш текст 3</div>
    <div class="scrollItem">Ваш текст 4</div>
  </div>
  <div class="scrollNavi">
    <div style="float:right;"><a href="javascript://" class="scrollNext" title="Следующий">Следующий</a></div>
    <a href="javascript://" class="scrollPrev" title="Предыдущий">Предыдущий</a>
  </div>
</div>

По необходимости можно добавлять ещё строки

<div class="scrollItem">Ваш текст 1</div>

Можно убрать из кода навигацию предыдущий/следующий. Отмечено синим цветом. Вместо текста можно вставить и картинки.

<div class="scrollItem"><img src="адрес картинки " alt="название" />
</div>

Ну и осталось прописать стили для всего блока. Можете поиграться и оформить на свой вкус.

<style type="text/css">
  .scrollNavi,.scrollBlock{width:250px;} /* - ширина блока - */
  .scrollBlock{height:100px;border:2px solid #607B8B;} /* - цвет и размер рамки - */
  .scrollBlock .scrollItem{display:none;}
  .scrollNavi{text-align:left;}
  .scrollItem{text-align:center;font-size:13px;color:#A52A2A;} /* - размер и цвет текста. - */
</style>


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

Всем спасибо за внимание и до встречи.


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


Доброго времени суток. Яркие и "живые" кнопки социальных сетей для вашего блога. При наведении курсора на окно кнопки, оно сдвигается или раскрывается. При этом будет появляться число, отображающее количество лайков и репостов. И ещё есть кнопка печати страницы. Прекрасно размещаются над сообщениями блога или под ними. Всегда на самом виду у ваших посетителей. 

Вот так красиво они выглядят на странице. Рабочий вариант здесь.


Установка всего в 2 шага.

1. Сначала установим код js для twitter, linkedin, facebook непосредственно в теме (шаблоне блога). Вкладка тема - изменить HTML. Находим закрывающийся тег </body> и над ним вставляем код приведённый ниже.

<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script async='async' src='//platform.linkedin.com/in.js' type='text/javascript'/>
<script type='text/javascript'>
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async=true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


Сохраните шаблон. Далее всё по вполне стандартному сценарию. Копируйте следующий код и устанавливайте его в гаджет HTML/ JavaScript без всяких изменений и дополнений. Расположите их где - нибудь над сообщениями или внизу блога.

весь код

<style>
.sharing-post{margin:20px 0;overflow: hidden;}
.entry-social{overflow: hidden;}
.entry-social a{display: block;padding:0px;color: #FFFFFF !important;font-weight: 300;font-size:12px;}
.entry-social div{float: left;margin-right: 5px;width:95px;background-color: #ccc;margin-top:5px;transition:all .4s ease-in-out;position:relative}
.entry-social .title-sharing-post{padding:0 7px;width:130px;height:30px;line-height:30px;font-size:16px;font-family: &#39;Trebuchet MS&#39;, sans-serif;font-weight:400;text-transform:uppercase;border-bottom:4px solid #333}
.entry-social .fb{background-color: #324b81;padding: 0 7px;width:130px;height:34px;line-height:34px;}
.entry-social .twitter,.entry-social .gplus{padding: 0 7px;height:34px;line-height:34px;}
.entry-social .twitter{background-color: #01A7dE;}
.entry-social .gplus{background-color: #BA3227;}
.entry-social .linkedin{background-color: #136F9B;padding: 0 7px;;height:34px;line-height:34px;}
.entry-social div.pinterest{width:109px;height:34px;line-height:34px;}
.entry-social div.pinterest img{margin-top:-1px;vertical-align:middle}
.entry-social .pinterest a{background-color: #B01C23;padding:0 7px}
.entry-social div.printblog{width:35px;height:30px;border-bottom:4px solid #333}
.entry-social .printblog a{padding: 7px 7px 4px 9px;transition:all 0.4s ease-in-out}
.entry-social .printblog a:hover{background-color: #333;}
.slide-share{background:#ccc;z-index:2;left:0;top:0;right:0;bottom:0;position:absolute;text-align:center;line-height:7px;color:#333;transition:all 0.4s ease-in-out;height:30px;cursor:pointer}
.entry-social .fb:hover .slide-share,.entry-social .twitter:hover .slide-share,.entry-social .gplus:hover .slide-share,.entry-social .linkedin:hover .slide-share,.entry-social .pinterest:hover .slide-share{left:140px;opacity:0}</style>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharing-post'>
<div class='entry-social'>
<div class='title-sharing-post'>Поделиться :</div>
<div class='fb'>
<span class='slide-share'>
<p>Facebook</p>
</span>
<span style='position:absolute;top:-7px;'>
<span class='fb-like' data-layout='button_count' data-send='true' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>
</span>
  </span></div>
<div class='twitter'>
<span class='slide-share'>
<p>Twitter</p>
</span>
<span style='position:absolute;top:5px;'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
</span>
  </div>
<div class='gplus'>
<span class='slide-share'>
<p>Google+</p>
</span>
<span style='position:absolute;top:5px;'>
<span class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'>
</span>
</span>
  </div>
<div class='linkedin'>
<span class='slide-share'>
<p>Linkedin</p>
</span>
<span style='position:absolute;top:7px;'>
<script expr:data-url='data:post.url' type='IN/Share'></script>
</span>
  </div>
<div class='pinterest'>
<span class='slide-share'>
<p>Pinterest</p>
</span>
<a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=pinterest&quot;' rel='nofollow' target='_blank' title='Pin It'><img alt='pinit' height='21' src='http://2.bp.blogspot.com/-GBohPdcIzF8/U_mMASBohHI/AAAAAAAAde8/ugBc_zbc6Fo/s1600/PinExt.png' title='Pin It' width='43'/></a>
</div>
<div class='printblog'>
<a href='javascript:print(document)' title='Print This Blog'><img alt='print' height='16' src='http://1.bp.blogspot.com/-10ufvnCtIJM/UPo6JsA2VOI/AAAAAAAAVUY/MV8Pa2Kr7yI/s1600/iconprinter.png' title='Print This Page' width='16'/></a>
</div>
</div>
</div>
  <div style='clear:both'/>
</div></b:if>


Красивые и яркие кнопочки социальных сетей не оставят себя без внимания. Каждый сможет рекламировать и поделиться с друзьями понравившейся информацией. 


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

Ничего, шаблон Блоггер по умолчанию настолько пластичен, что достаточно просто вносить изменения в него.

Изменения нужно будет делать во вкладке тема. Но пусть вас это не пугает. Все действия будем производить в коде CSS. Это не так уж и сложно. Просто сделайте заранее резервную копию шаблона или потренируйтесь на тестовом блоге если что пойдёт не так. Вот так обычно выглядит шапка. Красными линиями отмечено пустое пространство.

заголовок блога

Чтобы его убрать найдите в шаблоне вот такой фрагмент кода. Раскройте все коды  CSS в шаблоне (читаем здесь).

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

и замените отмеченное красным на

padding: 0px;


Дальше нам нужен вот этот участок. Ищите его где - то рядом с предыдущим.

.content-inner {
padding: $ (content.padding) $ (content.padding.horizontal); 
}

и так же замените на

padding: 0px;


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




Можно уже так и оставить, а можно ещё немного поиграться. Центральная колонка у меня имеет белый цвет и 2 боковые отдельный. У кого - то установлена в качестве заднего фона картинка. Рассмотрим на примере фонового изображения для наглядности.

Найдите там же

$ (content.background.color.selector) {
background-color: $ (content.background.color); 
}

и замените строку красного цвета на

background-color: $ (body.background);

Сейчас перед знакомой уже ]]></b:skin> вставьте этот код

.main-outer {  background: $ (content.background.color);  }

Сохраните шаблон и посмотрите результат. Примерно такого вида общий вид вашего блога. 

заголовок блога

Мы сделали и шапку по всей ширине элемента и одинаковый фон всего содержимого.

Остаются по бокам центральной части еле заметные разделители. Я пробовала разные темы с картинками и на некоторых, скажу я вам, такой вариант очень интересно смотрится. Если он не нужен, тогда просто уберите эти разделите.  Удалите в шаблоне участок кода

.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  margin-bottom: 1px;
}

На этом тоже можно остановиться. Но если уж очень руки чешутся или хочется поэкспериментировать, можно сделать весь шаблон на всю ширину. Чтобы всё содержимое отображалось одинаково на мониторах с разным разрешением экрана.

Все внесённые изменения ни как не повлияют на фоновое изображение в блоге. Только изменится дизайн всей области содержимого. Если же у вас в шапке картинка - логотип под стандартный размер, тогда следует его (размер) изменить и снова загрузить.

Обычно все элементы, занимают третью часть страницы. По бокам остаются отступы и поля. Ну вот хочется некоторым блогерам и это исправить. Что же, личное дело каждого. Кому - то нравиться узкая полоска блога, кому широкая. У меня уже была статья, как сделать шаблон блога на всю ширину экрана.

А теперь предлагаю вам перейти по этой ссылке и посмотреть как примерно это будет выглядеть. Всё зависит от выбранного вами шаблона.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


Привет, друзья. Предлагаю вам подборку онлайн сервисов для работы с графикой. Удобство этих сервисов в том, что не нужно устанавливать на свой компьютер локальный софт. Просто скопируйте его адрес и выполняйте свою работу.

Некоторые из них уже знакомы многим. И для начинающих они вполне могут пригодиться.

1. CoolText - инструмент для онлайн генерации текстов с эффектами. Прекрасно подходит для создания логотипов и графических кнопок. Есть возможность выбрать стиль текста. Заливка текста текстурой, градиентом или просто одним цветом. интерфейс английский, но вполне понятный в использовании.

С помощью его я делала кнопку - логотип для своего блога и подробно писала в этом сообщении.

Ссылка https://cooltext.com/


2. SUMO Paint - онлайн редактор изображений с функционалом Photoshop. Отличительной особенностью является возможность использования фильтров, которые могут реализовать даже трехмерное изображение. Просто нажмите на кисточку и творите. Язык тоже английский, но потренироваться и что - то создать можно.
Ребёнок у меня за 2 минуты знакомства вот такого паука нарисовала.

Ссылка https://www.sumopaint.com/app/


3. MyEcoverMaker - онлайн сервис для создания изображений в виде обложек. Правда, бесплатно можно создать обложки только из первых пяти шаблонов. На первое время этого достаточно. Нужно выбрать обложку, подобрать нужный фон и размер. Потом просто скачать.

Ссылка https://www.myecovermaker.com/ecover-design


4. FAN Studio - онлайн сервис для редактирования и украшения фотографий. Можно исправлять недочеты фотографий, накладывать рамку, применять разные эффекты. Доступно сохранение результата в множестве форматов. Работает только с фотографиями, загруженными с диска.

Ссылка http://www.fanstudio.ru/


5. LineAct - прекрасная находка для создания флеш-баннера. Есть возможность добавить до трёх строк, вставить изображения, анимацию. Большая галерея готовых баннеров под разную тематику. Создали и скопировали код для вставки в блоге.

Ссылка http://www.lact.ru/banner


6. ARTbanner - еще один сервис для создания статических баннеров. Вы просто выбираете размер, вводите текст, выравниваете его, накладываете эффект, и баннер готов. Всё на русском языке и вполне понятно.

Ссылка http://www.artbanner.com.ua/bannermake/index.html


На самом деле, в сети очень много подобного рода инструментов. Вот для ознакомления ещё некоторые - PicMonkey, Canva, Quozio, Photovisi, Logo Maker, Banner Fans, SKENCIL, GIMP.

Но более простые в использовании помогут новичкам создавать неплохие логотипы, баннеры или обработать нужное фото. Надеюсь, что эта небольшая подборка вам пригодится.

Ещё один сервис для создания ротатора баннеров 


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


Пользовательский поиск
Foto Saya
My Photo