Social Icons





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

понедельник, 8 мая 2017 г.

Как добавить тень к тексту

Для того что бы читатель моментально акцентировал внимание на выделенном фрагменте текста, необходимо его украсить каким то образом.

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

1. Открыть редактор сообщения
2. Переходим на вкладку HTML
3. Копируем код для добавления тени и вставляем его в редактор:


<div style="text-shadow: 4px 4px 8px black;">Отрывок текста или слова</div>

4. Заменяем выделенное, на нужную информацию.

Всё. В принципе добавить код можно после написания статьи. Так будет проще.


Настройка тени:

4px – 
меняем в большую сторону, тень двигается вправо.
4px – 
увеличивая, тень двигается вниз.
8px – 
отвечает за жирность тени.Вместо цвета black (черный), можно поставить любой другой, например:

blue (синий)
red (красный)
и другие цвета. 
После добавления тени, можно выделить текст с тенью и менять размер, цвет, расположение.

Если вам необходимо добавить тень к тексту и показать его на всех страницах, а не только на одной, то создайте гаджет/виджет. Вставьте его в необходимое место в блоге и поместите в него точно такой же код. 

Таким образом, можно выделять ссылки, пункты меню и другую важную информацию.

источник

Добавление таблицы в Blogspot блог

Редактор постов в Blogger постоянно развивается, но чего в нем до сих пор не хватает, так это инструмента для создания или вставки таблиц. Для опытных пользователей знающих в совершенстве уроки html верстки в этом нет ничего сложного, конечно, но начинающим либо просто блоггерам без технических знаний это может показаться не таким простым занятием. Поэтому учитывая, что вопрос о вставке таблиц задается регулярно, я решил посвятить этому вопросу отдельную публикацию.
Итак, я могу вам предложить сразу несколько вариантов решения проблемы.
1) Вставка таблицы в виде картинки
Это, наверное, самый простой способ и замечу вам не самый худший. Вы создаете таблицу в Excel или другом табличном редакторе (можно даже не в табличном, а векторном, вроде CorelDraw или Adobe Illustrator), делает скриншот этой таблицы и размещаете в виде картинки у себя в посте. Главные достоинство такого способа:
  • простота;
  • хороший контроль над тем как выглядит таблица;
  • возможность добавлять к таблице пояснения, маркеры или что еще (с помощью Adobe Photoshop когда у вас уже сохранен скриншот).
2) Экспорт таблицы из табличного процессора
Если вы все же хотите вставить таблицу в виде HTML-кода, есть опять же один удобный (вам не придется писать не строчки кода) способ. Как и в первом способе сделайте таблицу в вашем любимом табличном процессоре - например, в Excel. Далее сохраните этот файл в формате HTML - жмете "Сохранить как", после чего выбираете формат "веб страницы", но обязательно проследите чтобы окончание было html, а не htm.

В зависимости от разных версий Excel дальнейшие действия могут отличаться. В моем случае программа при сохранении создает файл *.html и директорию files. В этой директории находится файл sheet001.html, который соответствует первому листу в сохраненной таблице Excel. Нужно открыть этот файл в блокноте и выделите все что находится между тегами <table> и </table> (включая сами теги), скопируйте и вставьте в пост. Следует, правда, заметить, что таблица будет содержать множество различных html свойств для ячее td, которые, в принципе, можно удалить.
Если ваш табличный процессор не позволяет сохранять файлы в формате html, всегда можно воспользоваться Google Docs, куда либо импортировать созданный файл либо создать там таблицу заново и после этого загрузить ее обратно в виде HTML (меню Файл - Загрузить как - выбрать HTML). В некоторых случая можно прямо в Google Docs выделить таблицу и скопипастить ее в Blogger.

3) Использование HTML-редактора
Для создания таблиц можно использовать HTML-редактор, вроде Dreamweaver. Создать с его помощью таблицу — плевое дело. Потом останется только ее скопировать. Фишка в том, что Dreamweaver совмещает в себе инструменты для работы с HTML элементами, например, там есть кнопка "вставить таблицу". С другой стороны вы всегда можете посмотреть конкретный HTML код, который был добавлен, после чего скопировать его для Blogger`а. 


4) Написать код вручную
В конце концов, если таблица не очень большая и не очень сложная по структуре, ее совсем не сложно создать вручную, прямо в редакторе поста (в режиме HTML). Синтаксис таблицы весьма прост, вот элементарный пример:
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
Подробнее об использовании тега Table и все пояснения к коду можно посмотреть здесь. Если оценивать со стороны, какой из методов самый простой, то конечно это вставка картинки в пост блога, при этом вы легко можете задать таблице любой оформление. Иногда я именно его и использую. Также часто применяю создание таблиц в Dreamweaver, если мне на странице нужно не просто отобразить результат, но и важно чтобы был текст вместо изображения, так как именно текст может восприниматься и индексироваться поисковиками.

четверг, 4 мая 2017 г.

Ещё один вариант оформления кода

Вариант оформления кода с помощью CSS (вручную) в целом похож на последний способ, описанный в статье "Вставка кода в статью блога (продолжение)".
1. Создала новый класс .mykod, для которого расписала CSS стиль такого вида:
.mykod {
margin:10px;
padding:15px 15px 15px 70px;
border:2px solid #2288bb;
border-radius: 10px;
background-position:10px 50%;
background-repeat:no-repeat;
position:relative;
background-color:#F0F9FF;
font-family: monospace;
font-size:90%;
color: #2288bb;
background-image:url("https://dl.dropboxusercontent.com/u/54357058/kod.png");
}
Этот стиль CSS сохранила (как всегда) через  Дизайн → Дизайнер шаблонов → Дополнительно → Добавить CSS.
2. И теперь каждый раз, когда нужно оформить код, его нужно заключить между тегами:
<div class="mykod">ВАШ КОД</div>
То есть, сначала в визуальном редакторе пишем код (как простой текст статьи), а затем (после написания всей статьи), переключаемся на HTML-редактор и участок текста, соответствующий нашему коду, обрамляем в вышеуказанные div-ы.
Идею такого оформления кода я позаимствовала в статье "Красивое выделение текста".  Однако, не стала задавать несколько классов, а ограничилась только одним. CSS тоже изменила: удалила свойства, описывающие тени; подобрала другие цвета фона, текста и рамки; изменила шрифт на моноширинный, уменьшив его относительный размер; картинку "перебросила" на свой Дропбокс; и др.

источник

Как убрать рамку вокруг изображения

По умолчанию в блогах на Blogspot-е вокруг изображений (фотографий) в тексте статьи отображается рамка с небольшой тенью. Эта несколько невнятная рамка иногда меня раздражала, но как от неё избавиться, я не знала. Пока совершенно случайно не наткнулась на статью "How To Remove Blogger Picture/Image Shadow And Border".
Оказывается, всё очень просто: нужно просто внести изменения в CSS.
Для этого открываем вкладку "Дизайн" в админке блога → ссылка "Дизайнер шаблонов" → вкладка "Дополнительно" → Добавить CSS
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}
Ниже приведу скриншоты до и после внесения изменений в CSS.
1. Рамка по умолчанию выглядит так:
Рамка по умолчанию вокруг изображения в блоге

2. Без рамки по умолчанию, по-моему, лучше:
Рамка по умолчанию удалена

Убираем надпись "Технологии Blogger" внизу шаблона

Многих из моих читателей раздражает неотключаемая надпись "Технологии Blogger", притаившаяся в самом низу блога. И действительно, бывает, эта надпись абсолютно не вписывается в концепцию блога, в его дизайн. Или же, создашь блог на Blogger (Blogspot), но не хочешь, чтобы посетители знали, на какой платформе он построен. А для этого всего-то нужно три вещи: купить для него доменное имя, убрать навигационную панель вверху и упоминание о технологиях Blogger внизу. Про отключение навигационной панели я уже писал, про доменное имя мы еще поговорим в одной из следующих статей, а вот с "Технологиями Blogger" разберемся сейчас!

Итак, самый простой способ убрать эту надпись, это "закомментировать" соответствующий код. Открываем редактор шаблона (Дизайн->Изменить HTML), после чего ищем этот код:
Так будет выглядеть итоговый вариант:
<b:section class='foot' id='footer-3' showaddelement='no'><b:widget id='Attribution1' locked='true' title='' type='Attribution'/></b:section>
 А потом видоизменяем его таким вот образом:

Так будет выглядеть итоговый вариант:


<!-- <b:section class='foot' id='footer-3' showaddelement='no'><b:widget id='Attribution1' locked='true' title='' type='Attribution'/></b:section> -->

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

Логотип Blogger

Теперь поговорим о более сложном способе. Вы спросите, а зачем он нужен? Объясняю: первый способ удаляет всю служебную строку внизу экрана. А если вам хочется избавиться только от приставки "Технологии Blogger" но оставить свои копирайты, типа "© 2011-2012 sunctorus. Все права защищены", то тут нужно идти другим путем!

Открываем редактор шаблона (Дизайн->Изменить HTML), ставим галочку напротив "Расширить шаблоны виджета", после чего ищем строку type='HTML'. Строка в шаблоне может встречаться несколько раз, в зависимости от того, сколько у вас задействовано виджетов формата HTML/JavaScript. Так вот, просматриваем все эти строки и подмечаем в каждой, чему равен параметр id. Он будет иметь вид id='HTML<цифра>'. Наша задача найти такой id с самой большой цифрой и запомнить эту цифру.

Запомнили? Теперь целиком копируем в буфер любой из виджетов, имеющих type='HTML'. Скопированное в буфер будет выглядеть примерно так:

Так будет выглядеть итоговый вариант:


<b:widget id='HTML2' locked='false' title='Поиск по блогу' type='HTML'><b:includable id='main'>  <!-- only display title if it's non-empty -->  <b:if cond='data:title != ""'>    <h2 class='title'><data:title/></h2>  </b:if>  <div class='widget-content'>    <data:content/>  </div>
  <b:include name='quickedit'/></b:includable></b:widget>

 А теперь заменяем этими строками код виджета, имеющего type='Attribution':

Так будет выглядеть итоговый вариант:


<b:widget id='Attribution1' locked='true' title='' type='Attribution'><b:includable id='main'>    <b:if cond='data:feedbackSurveyLink'>      <div class='mobile-survey-link' style='text-align: center;'>        <data:feedbackSurveyLink/>      </div>    </b:if>
    <div class='widget-content' style='text-align: center;'>      <b:if cond='data:attribution != ""'>       <data:attribution/>      </b:if>    </div>
    <b:include name='quickedit'/>  </b:includable></b:widget>

 В уже замененном коде обращаем внимание на первую строку. Помните, мы запоминали циферку? Так вот, меняем в этой строке имеющуюся цифру на ту, что старше запомненной нами на единицу. То есть, если мы запомнили 3, то пишем id='HTML4'. Плюс, не забудьте очистить параметр title. Так, если было title='Поиск по блогу' то должно стать title=''.

Ну и, для центрирования текста, который будет опубликован при помощи этого виджета, строку <div class='widget-content'> дополняем до <div class='widget-content' style='text-align: center;'>.

Удаляем надпись "Технологии Blogger"

Теперь, проверяем, что мы ничего не забыли и все сделали правильно, и сохраняем измененный шаблон. При сохранении, как и при первом способе, появится сообщение, в котором нас уведомят, что в сохраняемом шаблоне нет виджета Attribution1 и предложат сохранить его или удалить. Выбираем удаление!

Вот, собственно и все. Теперь мы имеем в "подвале" обычную строку без всяких "Технологии Blogger", которую мы можем править стандартными средствами (Дизайн->Элементы страницы) по собственному усмотрению.




Друзья! Вы можете поддержать сайт материально!

 

Реклама:

РЕКЛАМА:




Место Вашей рекламы!

Добавляйтесь ЗДЕСЬ





SEO sprint - Всё для максимальной раскрутки!

















Информация:




Вы можете получить WMR-бонус в размере 0.01-0.02 WMR на свой кошелек 1 раз в сутки

Кошелек
Код Защитный код

Сейчас на сайте:







 
Blogger Templates Генератор ТИЦ