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

Это добавит уникальность и привлечёт внимание пользователей. Не надо на стороне заказывать ничего, потому что в Blogger это очень легко организовать. Как только что - то становится уже не актуальным, можно убрать и в очередной раз установить опять, но уже другое. Посмотрите примерно несколько вариантов.


картинка в шапке

картинка в шапке


Живой пример на тестовом блоге.

Нам понадобится маленькая картинка или иконка, соответствующая случаю, в формате Png. Вы можете такую найти в интернете или создать сами. Можно воспользоваться сервисом iconfinder.com. О нём я писала в этом сообщении.

И наконец совсем малюсенький код.

#header-inner:after {
    content: url(https://2.bp.blogspot.com/-1ZEagUoyjl0/WI9tHTAej6I/AAAAAAAAQJs/Jf_8QcbEu24RBKLpQT7RpEoyWuffCM--QCLcB/s1600/Valentines-BloggerSpice.png);
    position: absolute;
    z-index: 9999999;
    margin-left: 35%;
    margin-top: -12.6%;
}


Скопируйте его в блокнот и замените адрес изображения на адрес вашей картинки. Или для пробы можете просто взять этот код. Идём во вкладку тема. Находим знакомую всем уже строку ]]></b:skin> и прямо над ним его устанавливаем. Сохраните и просмотрите результат.

Возможно, картинка не совсем корректно отобразиться относительно заголовка. Но это поправимо. Поиграйтесь со значениями margin-left: 35%; и margin-top: -12.6%;, которые я отметила синим цветом. Пример в статье отступы и поля.

margin-left: 35%; расстояние относительно левого края. Добавляйте или уменьшайте значение.

margin-top: -12.6%; отступы сверху.

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

Не думаю, что у вас будут проблемы с реализацией, но если всё же возникнут вопросы, обращайтесь.

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

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

Введите Ваш email


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

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

♪ ♪ ☺

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

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

клавиатура

Для вставки символа нажимаем и удерживаем на компьютере клавишу 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


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