Blogger (подборка статей из инета): эффект

Показаны сообщения с ярлыком эффект. Показать все сообщения

среда, 6 июня 2018 г.

Анимированные ссылки

информация с сайта: https://www.mycrib.ru/2012/05/animirovannye-ssylki-blogger.html
Анимированные ссылки можно вставить в ваш блог Blogspot несколькими способами.

Способ 1. Переливающиеся разными цветами ссылки.

Радужная ссылка
Для того, чтобы получить такую анимированную ссылку(https://www.mycrib.ru/2010/07/html_2182.html), нужно в дизайне блога(http://www.mycrib.ru/2011/10/blogger.html) добавить гаджет HTML / JavaScript с кодом

<script src='http://yourjavascript.com/512719721/rainbow-links.js'>
/*
Rainbow Links Script- TAKANASHI Mizuki
For full source code, 100's more DHTML scripts, and TOS,
Visit http://www.dynamicdrive.com
Via http://www.spiceupyourblog.com
*/
</script>

Дальше »

четверг, 31 мая 2018 г.

Оригинальная прокрутка текста.

Источник: http://www.shpargalochki.ru/2016/02/originalnaja-prokrutka-teksta.html#more
Один из вариантов был описан в этом(http://www.shpargalochki.ru/2014/02/kak-skryt-chast-teksta-soobshhenii.html#more) сообщении.
Пользователь просто будет прокручивать колёсиком мыши по выделенному участку в сообщении. Посмотрите пример ниже.

ИНСТРУКЦИЯ ПО НАСТРОЙКЕ БЛОГА 1. После того, как Вы создали блог, Вы увидите следующее меню: В данном меню Вы увидите свой недавно созданный блог (на скриншоте: Example). Кликните по данному названию. 2. Откроется следующее окно: Это «изнанка» блога, меню которое позволяет управлять блогом и которое видите только Вы, а не Ваши читатели. Рассмотрим элементы «изнанки». Совет: Лучший способ знакомства с новыми технологиями кликать и пробовать. Если Вы начинающий пользователь ПК, то, чтобы не потеряться в меню, нажимайте на кнопки меню, о которых пойдет речь в данной инструкции, правой кнопкой мыши и выбирайте «открыть в новой вкладке». В этом случае в первой вкладке у Вас всегда будет открыто изначальное меню. В верхнем правом углу (см. предыдущий скриншот) Вы видите Ваше имя пользователя Blogger. Если кликните по перевернутому треугольнику рядом с именем, то Вы увидите информацию о Вашем аккаунте Google, используемый для аккаунта адрес электронной почты, кнопку «Выйти». Кнопку «Выйти» следует нажать после.ИНСТРУКЦИЯ ПО НАСТРОЙКЕ БЛОГА 1. После того, как Вы создали блог, Вы увидите следующее меню: В данном меню Вы увидите свой недавно созданный блог (на скриншоте: Example). Кликните по данному названию. 2. Откроется следующее окно: Это «изнанка» блога, меню которое позволяет управлять блогом и которое видите только Вы, а не Ваши читатели. Рассмотрим элементы «изнанки». Совет: Лучший способ знакомства с новыми технологиями кликать и пробовать. Если Вы начинающий пользователь ПК, то, чтобы не потеряться в меню, нажимайте на кнопки меню, о которых пойдет речь в данной инструкции, правой кнопкой мыши и выбирайте «открыть в новой вкладке». В этом случае в первой вкладке у Вас всегда будет открыто изначальное меню. В верхнем правом углу (см. предыдущий скриншот) Вы видите Ваше имя пользователя Blogger. Если кликните по перевернутому треугольнику рядом с именем, то Вы увидите информацию о Вашем аккаунте Google, используемый для аккаунта адрес электронной почты, кнопку «Выйти». Кнопку «Выйти» следует нажать после.

<div class="inner">ДЛИННЫЙ ТЕКСТ
</div>
</div>
<style>.scrollbar {
background-color:#556B2F ; / цвет фона /
border:4px solid:#008B8B ; /ширина и цвет рамки/
color:white; /цвет текста /
overflow:hidden;
text-align:justify;
}

.scrollbar .inner {
height:100px; /высота блока текста/
overflow:auto;
margin:15px -300px 15px 15px;
padding-right:300px;
}</style>

В стилях CSS, которые выделены синим цветом, меняйте все значения на нужные вам.

среда, 30 мая 2018 г.

Фишки для дизайна с использованием CSS

Источник :https://www.bdblogov.ru/2016/03/chips-for-design-with-using-CSS-for-blogger.html

Изображение слева для заголовка сообщения

.post-title {

background: url(адрес картинки) no-repeat left transparent;

padding-left: 35px;

}

Изображения слева и справа для заголовка поста

.post-title:before,

.post-title:after {

content: url(адрес изображения);

}

Иконка сверху слева для заголовка поста

.post-outer:before {content: url(адрес изображения);}

Иконка сверху по центру для заголовка сообщения

Картинка сверху по центру для заголовка сообщения

.post-outer:before {

content: url(адрес картинки);

display: block;

width: auto;

margin: 0 150px;

}

Меняйте значение margin: 0 150px; и настраивайте положение картинки по центру или справа

Изображение слева для шапки блога

.header {

background: url(адрес картинки) no-repeat left transparent;

padding-left:75px;top:3px; //*отступ от названия заголовка;

}

Изображение справа в шапке блога

.header {

background: url(адрес картинки) no-repeat right transparent;

padding-right:75px;top:3px;

}

Изменить расположение заголовка (названия) блога (по центру или правее)

.header{ padding-left:275px;top:3px;}

Автоматическая подпись под всеми сообщениями в блоге

.entry-content:after {

content: url(адрес подписи);

margin-left: 50px;

}
Почитайте пост Как создать красивую подпись для своих веб сайтов/блогов
(https://www.bdblogov.ru/2014/01/as-create-a-beautiful-signature.html)

Убрать иконку карандаша в комментариях

.comments .comments-content .icon.blog-author {display:none;}
Гаджет Архив блога в прокрутке
#BlogArchive1 .widget-content{height:300px; width:auto;overflow:auto;}

Гаджет Ярлыки в прокрутке

#Label1 .widget-content{height:100px; width:auto;overflow:auto;}

Изменить на странице цвет выделяемого текста при копировании

::selection {
background: #ff6200;
color: #fff;
}

::-moz-selection {
background: #ff6200;
color: #fff;
}

Скрыть подчеркивание ссылок

a:link {text-decoration:none;}

Коды CSS вставляем в шаблон изменить шаблон выше строки ]]></b:skin>.

✓Можно вставить дизайн добавить гаджет внизу макета блога: <style>код CSS</style>. Или в таком же варианте в редакторе сообщений по вкладке HTML оформить для отдельной страницы.
✓У кого на главной больше одного поста, при вставке кода в один из них, картинки в заголовке появятся во всех сообщениях. Коды картинок для заголовка поста устанавливайте на страницы, не отображающиеся на главной.

И в заключение два скрипта, для автоматического изменения основного фона при переходе на другие страницы. Скрипт вставить шаблон изменить шаблон выше закрывающего тэга </head>.

Автоматически меняющийся основной фон блога при переходе

<script type='text/javascript'>//<![CDATA[

Меняющийся фон заголовка

<script type='text/javascript'>//<![CDATA[

Подчеркивание заголовков используя CSS

источник: https://www.bdblogov.ru/2016/10/underline-headings-using-CSS-for-blogger.html  
Самое простое подчеркивание

Для заголовка H1

.Header H1 {border-bottom: 7px solid #03b4cc;padding-bottom: 5px;}

Для меню блога

#PageList1 {border-bottom: 5px groove #03b4cc;padding-bottom: 9px;}

Подчеркивание для заголовков сообщения

             .post-title{border-bottom:2px solid #03b4cc;}

Для названия гаджетов H2

.sidebar .widget h2 {border-bottom:5px solid #03b4cc;}

Оформление заголовка H1 и H2 (название гаджетов) с фоном и закруглением углов справа. Также + тень текста (text-shadow). 

CSS для основного заголовка

.Header H1 {

  background: #0e5198;

  padding: 4px;

 text-shadow:-1px 0 green,0 1px green,1px 0 green,0-1px green;color:#f8f8ff;  

  border-radius: 16px 0px 80px 0px;

  -webkit-border-radius: 16px 0px 80px 0px;

border-bottom: 7px solid #03b4cc;

padding-bottom: 5px;  

} 

CSS для заголовков сайдбара

.sidebar .widget h2 {

 background: #0e5198; 

  padding: 4px;

text-shadow:-1px 0 black,0 1px black,1px 0 black,0-1px black;color:#fff;

 border-radius: 8px 0px 40px 0px;

  -webkit-border-radius: 8px 0px 40px 0px;

}

Выделенное фиолетовым можно удалить. Это еще одна линия подчеркнуть название заголовка, как в простом примере выше. 

               Стили CSS желательно вставить в шаблон изменить шаблон выше строки ]]></b:skin>. Кто пока с шаблоном на Вы, можно добавить гаджет: <style>код CSS</style>. Но помните, много Html/JavaScript влияют на скорость загрузки блога

четверг, 24 мая 2018 г.

Необычное увеличение изображения при наведении курсора(zoom effect)

источник: http://blogodel.com/2013/09/Neobychnoe-uvelichenie-izobrazhenija-pri-navedenii-kursora-na-vash-Blogspot-Blogger.html

Еще один вариант. Наведите курсор и опробуйте эффект:

Если эффект вам понравился, то данный виджет можно использовать, вставив код в редактор в любом месте статьи.

<style>
.dsblockzoom{
position: relative;
}
.dsblockzoom img{
position: absolute;
left: 0;
}
.dsblockzoom img.maximg{
opacity: 0;
visibility: hidden;
}
.dsblockzoom img.minimg{
z-index: 1;
}
@-webkit-keyframes dszooma{ 0%{
z-index: -1;
opacity: 0;
}
50%{
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{
z-index: 2;
}
100%{
left: 0;
box-shadow: 8px 8px 15px gray;
}
}
@-moz-keyframes dszooma{
0%{
z-index:-1;
opacity:0;
}50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
@-ms-keyframes dszooma{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
.dsblockzoom:hover img.maximg{
-webkit-animation-name:dszooma;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-name:dszooma;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-ms-animation-name:dszooma;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;
animation-name:dszooma;
animation-duration: 1s;
animation-iteration-count: 1;
visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;
z-index:2;
}
.dsblockzoom:hover img.minimg{
opacity:0.5;
}
</style>
<div class="dsblockzoom" style="width:300px; height:171px">
<img class="minimg" src="http://delaisait.ucoz.ru/script/menu/img/1/esizbr1.jpg" alt="zoom effect" />
<img class="maximg" src="http://delaisait.ucoz.ru/script/menu/img/1/esizbr.jpg" alt="zoom effect" />
</div>

Выделенные красным урл. - адрес ваших изображений (изображения должны иметь разный размер, вначале маленький потом большой), вставляете по вашему усмотрению!

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

Облако тегов: определение, назначение, создание

источник: http://tods-blog.com.ua/blogging/tag-cloud-blogger/

 Для начала заходим в блог раздел «Шаблон», выбираем меню «Элементы страницы». Создаем новый элемент типа «Ярлыки». 

Далее заходим пункт меню «Изменить HTML». 

1. Первую часть кода необходимо добавить в секцию стилей, которая отмечена тегами . 

Находим место в шаблоне ]]> и размещаем код до него:


             
               /* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}


              

            

2. Следующая часть кода — есть настройка некоторых параметров облака, она также идет в блоке шаблона, но уже вне секции стилей, то есть снова находим в шаблоне ]]>, но вставляем код ПОСЛЕ этого тега, но ПЕРЕД закрывающим тегом .


             
               <script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 21;
var maxColor = [79,148,205];
var minFontSize = 11;
var minColor = [180,205,205];
var lcShowCount = false;
</script>


              

            

Все строки могут быть изменены, но объясним их значение позже. 

Пока для нас важно чтобы заработали эти настройки по умолчанию.

3. Теперь займемся модификаций виджета «Ярлыки». 

Находим в шаблоне место (или подобное ему — ищите по значениям id, type)


             
               <b:widget  id='Label1' locked='false' title='Labels' type='Label'/>


              

            

Копируем следующий код от начала до конца и заменяем им данную строку.


              
                <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
 
  <div class='widget-content'>
  <div id='labelCloud'/>
<script type='text/javascript'>
 
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
      if(a&gt;b){
          var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
             }
      else{
          var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
          }
      return v
   }
 
 
var c=[];
var labelCount = new Array();  
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>
 
for (t in ts){
     if (!labelCount[ts[t]]){
           labelCount[ts[t]] = new Array(ts[t])
           }
        }
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
    if(ts[t] &lt; cloudMin){
       continue;
       }
    for (var i=0;3 &gt; i;i++) {
             c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
              }      
         var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
         li = document.createElement('li');
         li.style.fontSize = fs+'px';
         li.style.lineHeight = '1';
         a = document.createElement('a');
         a.title = ts[t]+' Posts in '+t;
         a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
         a.href = '/search/label/'+encodeURIComponent(t);
         if (lcShowCount){
             span = document.createElement('span');
             span.innerHTML = '('+ts[t]+') ';
             span.className = 'label-count';
             a.appendChild(document.createTextNode(t));
             li.appendChild(a);
             li.appendChild(span);
             }
          else {
             a.appendChild(document.createTextNode(t));
             li.appendChild(a);
             }
         ul.appendChild(li);
         abnk = document.createTextNode(' ');
         ul.appendChild(abnk);
    }
  lc2.appendChild(ul);    
</script>
 
<noscript>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <data:label.name/>
        <b:else/>
          <a expr:href='data:label.url'><data:label.name/></a>
        </b:if>
        (<data:label.count/>)
      </li>
    </b:loop>
    </ul>
</noscript>
    <b:include name='quickedit'/>
  </div>
 
</b:includable>
</b:widget>


               

             

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

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

var cloudMin= 1;

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

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

Чтобы получить нужный вам вариант оформления облака тегов нужно немного поэкспериментировать с цветом и размерами. Кроме того, для облака необходимо достаточно количество ярлыков, 3-4 будет маловато.

Внимание, когда вы изменяете настройку цвета, придерживайтесь нужного формата, приведенного в примере – использование закрывающих кавычек [] и разделения значений запятыми. Если вы не в курсе RGB кодов для цветов, можете воспользоваться следующей таблицей (нужные значения в первой колонке).

Последняя переменная lcShowCount может принимать значения «истинно» (true) и «ложно» (false). Отвечает за отображение количества повторений того или иного тега в блоге. По умолчанию эта настройка выключена.

Что касается секции стилей (CSS), то там также есть несколько мест, которые можно изменить под себя.

#labelCloud {text-align:center;font-family:arial,sans-serif;}

Здесь вы можете изменить шрифт, используемый в облаке, или же выравнивание:

text-align:justify;

           text-align:right;

           text-align:left;

Если вы хотите, чтобы теги выстраивались в столбик, то в строке:

#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

Заменяем display:inline; на display:block;.

И на последок строка:

#labelCloud .label-count

Она задает стиль для метки количества вхождений. Конечно, если данная особенность облака активирована.

Если и этого вам мало, можно сделать для блога еще одну фишку. Вы, наверное, заметили, что Blogger использует вместо понятия тегов «ярлыки». Соответственно под каждым сообщением идет перечень установленных вами тегов, перед которыми используется слово «Ярлыки». Можно это изменить!

Заходим в раздел «Шаблон», меню «Изменить HTML», далее активируем галочку в верхнем правом углу «расширить шаблоны виджета». После этого находим в коде блок:


            
              <p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if
cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>


             

           

В нем вместо строки пишем любой другой нужный вам текст, например – «теги». 

Решение подсмотрел здесь (http://feeds.feedburner.com/TodsBlog).

суббота, 19 мая 2018 г.

Добавить красивый эффект движения ярлыков

Небольшой трюк с ярлыками. Это красивый эффект сдвига при наведении на ярлык мышью. Отличный плагин делает более привлекательным ваш блог для посетителей. 

                                            Добавляем сдвиг ярлыка в Blogger по JQuery

            Перейти: Blogger Шаблон - Изменить HTLM. Как обычно делаем резервную копию шаблона. 

Поиск строчки </head> для быстрого поиска пользуемся  Ctrl+F. 

Добавляем следующий  код  перед </head>

                 <script src='https://innushka.000webhostapp.com/wp-content/uploads/2018/05/jquery.min_.v1.5.1.js' type='text/javascript'>
                
                 </script>
                
                 <script type='text/javascript'>
                
                  var dur = 400; // Duration Of Animation in Milli Seconds
                
                     $(document).ready(function() {
                
                         $('a.linknudge, .Label ul li a').hover(function() {
                
                             $(this).animate({
                
                                 paddingLeft: '25px'
                
                             }, dur);
                
                         }, function() {
                
                             $(this).animate({
                
                                 paddingLeft: 0
                
                             }, dur);
                
                         });
                
                     }); // end of Jquery Script
                
                 </script>
                
https://forbloggerhelp.blogspot.ru/2011/10/kak-dobavit-jefekt-dvizhenija-jarlykov.html

пятница, 18 мая 2018 г.

Эффект появления рамки при наведении курсора

Куча статей про оформление текста в красивые рамки(http://www.shpargalochki.ru/2018/02/krasivye-ramki-dlya-fotografij.html). Ещё один эффект анимации рамки от центра к краям на CSS. Можно оформить участок текста или картинку.
Реализуется просто ,в редакторе сообщений в режиме HTML.

Дальше »

Красивый эффект радуги для ссылок

УКРАСИТЬ ССЫЛКИ И ЗАГОЛОВКИ СТАТЕЙ В ВАШЕМ БЛОГЕ. При наведении курсора мышки они будут переливаться всеми цветами радуги.
идея отсюда: https://forbloggerhelp.blogspot.ru/2011/11/krasivyj-jeffekt-radugi-dlja-ssylok-na.html

Виджет: красивый эффект радуги для ссылок на Blogger

Зайдите в Шаблон -- Изменить HTML.С помощью поиска (Ctrl+F) вам надо будет найти эту строку в вашем шаблоне: </head> Перед этой строкой поставьте этот код:

<script src='https://innushka.000webhostapp.com/wp-content/uploads/2018/05/%D1%80%D0%B0%D0%B4%D1%83%D0%B3%D0%B0.js'/>

Эффект подъёма текста с тенью

Эффект подъёма текста при наведении с отбрасываемой тенью

Эффект создаёт иллюзию подъёма текста с отбрасываемой тенью, выделяя его из остального при наведении мышки на задействованный участок элемента. Можно применить эффект подъёма как к отдельным словам, так и к целым предложениям или параграфам. Эффект имеет простое использование свойств CSS в качестве перехода состояния и создания тени выделенному элементу. Все параметры эффекта Вы сможете настроить по своему усмотрению, в коде для установки сделаны комментарии в местах регулировок значениями.

Дальше »

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

Появление и скрытие элементов за счет прозрачности

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

Будем использовать метод fadeIn( ). С помощью этой функции можно показывать и скрывать выбранные элементы на странице, за счет плавного изменения прозрачности. И fadeOut( )- скрывает соответствующие элементы путем затухания их до прозрачного состояния.

           Нам понадобится вот такой код.

<script src="[url]https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>[/url]

           <script>

           $("#HTML10").hide();

           $(window).scroll(function() {

           if ($(window).scrollTop() > 100) {

           $("#HTML10").fadeIn("slow");

           }

           else {

           $("#HTML10").fadeOut("slow");

           }

           });</script>

Процесс установки в блоге совсем простой. Для начала нужно знать ID гаджета который будет скользить HTML10. Замените на свой и  будьте внимательны ко всем символам. Посмотрите как узнать ID любого гаджета.

В коде красным цветом скрипт библиотеки jquery. Если у вас такая установлена в блоге его нужно убрать и использовать только вторую часть кода. scrollTop() > 100) это расстояние сверху, когда будет появляться объект. Настраивайте на своё усмотрение.

Далее заходим во вкладку ТЕМА - изменить HTML. С помощью горячих клавиш находим закрывающийся тег </body>. 

Сразу перед ним вставляем готовый код и сохраняем изменения. Перейдите на страницу блога и смотрите результат.https://www.blogger.com/%3Ca%20href=

вторник, 1 мая 2018 г.

Необычное анимированное меню в сообщении

Вариант необычного анимированного меню http://www.shpargalochki.ru/2014/11/neobychnoe-animirovannoe-menju.html, которое можно установить непосредственно в сообщение блога. К тому же, обойдёмся без JavaScript.

           И давайте уже смотреть, как это выглядит. Наведите на картинку курсор.

Главная страница

Содержание

Об авторе

Форма связи

           Код красивого анимированного меню 

<center>

           <div class="exampleCSS">

           <div style="text-align: center;">

           <a href="[url]АДРЕС[/url]" target="_blank" title=" главная">Главная страница</a><br>

           <a href="[url]АДРЕС[/url]" target="_blank" title="содержание">Содержание</a><br>

           <a href="[url]АДРЕС[/url]" target="_blank" title="автор">Об авторе</a><br>

           <a href="[url]АДРЕС[/url]" target="_blank" title="связь">Форма связи</a><br></div>

           </div>

           <style>.exampleCSS {

               background-color:#e9967a;;

               width:300px;

               -webkit-transition: 1s ease-in-out;

               -moz-transition: 1s ease-in-out;

               -o-transition: 1s ease-in-out;

               transition: 1s ease-in-out;

           }

           .exampleCSS:hover {

               background-color:#8fbc8f;

               -webkit-transform: rotate(360deg) scale(3);

               -moz-transform: rotate(360deg) scale(3);

               -o-transform: rotate(360deg) scale(3);

               -ms-transform: rotate(360deg) scale(3);

               transform: rotate(360deg) scale(3);

           }</style>

           </center>

Как видите он достаточно простой. Скопируйте его к себе в блокнот или черновик. Давайте немного его разберём. 

То что выделено синим цветом, это адреса ваших страниц, меняйте на свои. 

Чтобы добавить ещё пункты меню просто вставляйте ещё вот такой участок в коде

           <a href="тут адрес страницы" target="_blank" title=" главная">название страницы</a>

           Красным цветом -соответственно её название.

           Ну и в самих стилях CSS в первом случае, выделенное зелёным основной фон меню. 

Во втором цвет при после наведения курсора. width: 300px;-ширина картинки в спокойном состоянии.

           Обратите внимание на цифру 3 в скобках. Именно она отвечает за размеры окна после увеличения. Можно поставить 2 или 5, как вам хочется. Ну и свойство 360deg делает поворот меню на 360 градусов.

           Перейдём к установке. Готовый код копируем и в  редакторе сообщений переходим из режима создать в режим HTML. Вставляем его в нужное место. Когда вернётесь обратно в режим создать увидите только простой список.В режиме предварительного просмотра отобразиться только картинка без анимации. Пусть это вас не настораживает. Если всё сделано верно, то после публикации эффект этого меню появится.

           Так же этот код можно установить в гаджет HTML/JavaScript. И тогда такая красота будет будет на боковой панели или где вы его хотите видеть. К тому же не займёт много места. А в работе будет очень удобным для пользователей.

           Идея создания  автор блога [url]http://www.sitehere.ru/[/url]. В самом коде внесла некоторые изменения, чтобы применить на блоггере. 

http://www.shpargalochki.ru/

среда, 25 апреля 2018 г.

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

Вот и само "чудо":

а вот код кнопки:

<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

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

Мои ссылки

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

Blogger (подборка статей из инета)

Красивые рамки для фотографий

Анимированные ссылки

Способ 1. Переливающиеся разными цветами ссылки.

Оригинальная прокрутка текста.

Фишки для дизайна с использованием CSS

Подчеркивание заголовков используя CSS

Необычное увеличение изображения при наведении курсора(zoom effect)

Облако тегов: определение, назначение, создание

Добавить красивый эффект движения ярлыков

Эффект появления рамки при наведении курсора

Красивый эффект радуги для ссылок

Эффект подъёма текста с тенью

Появление и скрытие элементов за счет прозрачности

Необычное анимированное меню в сообщении

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

Панель администратора:

Метки:

Комментарии

Форма для связи