-Метки

18+ bazzlan авылым адрес анекдот анекдоты арт бдсм боль буква буквы вася ложкин вася_ложкин васяложкин весна вилки вопрос входная дверь география гиф гифки голод гороскоп графити граффити далее далматин далматинец дверь двустишия девушка девушки и лошади дерево деревья достопримечательности достопримечательность еда желание желания женское женщина зарядка звезды здоровье зима игра игры имена имя иностранец история карта картинка картинки карты книга книги кнопка кнопки кнопки далее кнопочки компьтер кони концептуальное концептуальный короновирус кот коты котэ кофе кошки крэйг кукурузные леди лето лица вещей логика ложкин ломка лошади лошадь луна любовь магия меланхолия мой сон мужчина музыка надписи наказание ночь осень отзыв отзывы оформление палиндром позитив позитиф позитифф полупирожки поляков порка пошлость праздник прикол природа психология психософия психотип птица птицы радость радуга рамка рамки рамочка рамочки растение растения реклама розги русский русский язык секс сердечки символы смайл смешно совместимости сон соционика социотип спорт стих стихи страх стри-арт стрит танец танцульки танцы теги текст тема тест тесты тим туган туган авылым туган_авылым турист туристы ужас упражнение физкультура философия философски фильм флеш флешка флешки фон фоны фото фотографии фразы цветок цветы чай чашка чашки шоколад щавед экстрасенсорика эмоции эмоция эротика эштон_крэйг юмор языг язык

 -Помощь новичкам

Всего опекалось новичков: 0
Проверено анкет за неделю: 0
За неделю набрано баллов: 0 (57753 место)
За все время набрано баллов: 777 (615 место)

 -Я - фотограф

Просто понравившиеся картинки )))

 -Поиск по дневнику

Поиск сообщений в ka82

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 29.01.2008
Записей:
Комментариев:
Написано: 102491


Кнопочки делаем :)

Четверг, 16 Января 2014 г. 13:37 + в цитатник
Кнопки есть разные.
Например, есть кнопки - флешки (шуточные). Развлекаться тут: http://www.liveinternet.ru/users/ka82/post275377421
Есть кнопки "далее" (убрать текст под кат). Это можно делать с помощью картинок-гифок и просто картинок. [more=<img src="АДРЕС КАРТИНКИ" />]. Подробнее тут: http://www.liveinternet.ru/users/ka82/post171857399/
Примеры:
Берем картинку, например
Вставляем ее адрес в тег
[more=<img src="//img0.liveinternet.ru/images/attach/c/2//70/855/70855532_blu_1.gif" />]
Про то как убирать под кат полробнее тут: http://www.liveinternet.ru/users/ka82/post171857399/
А здесь я хочу остановиться на таких кнопках:


Можно делать кнопки на любой сайт, пост, страницу.
Если вас устраивают только кнопки-картинки, то можете сделать сами такую "картинку" на сайте (под получившейся пустой кнопкой будет слово download - т.е. загрузить картинку)

Подобных сайтов, делающих кнопки он-лайн, много, можете поискать в Яндексе, Гугле и т.д. В любом случае эту "пустую" кнопку надо будет вставить в тег чтобы вас отсылало на какой-то сайт.

Примеры тега:
1 Откроется в том же окне если правой клавишей мыши не указать открыть в новом окне:
<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" > КОД ПУСТОЙ КНОПКИ </form>
2 Откроется в новом окне / вкладке даже если правой клавишей мыши будете просить открыть в том же окне. Ключевая команда здесь с пробелом target="_blank"
<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank"> КОД ПУСТОЙ КНОПКИ </form>
3 Откроется в том же окне если правой клавишей мыши не указать открыть в новом окне. Подходит для кодов не только кнопок, но и просто текстов и картинок - отсылок
<a href="АДРЕС КУДА ПЕРЕХОДИТЬ">КОД ПУСТОЙ КНОПКИ, КАРТИНКИ ИЛИ ПРОСТО СЛОВА </a>
4 Откроется в новом окне / вкладке даже если правой клавишей мыши будете просить открыть в том же окне. Ключевая команда здесь с пробелом target="_blank". Подходит для кодов не только кнопок, но и просто текстов и картинок - отсылок
<a href="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank">КОД ПУСТОЙ КНОПКИ, КАРТИНКИ ИЛИ ПРОСТО СЛОВА </a>
5 Аналог предыдущего случая 4, открывается всегда в новом окне / вкладке, просто пишется более коротко:
[url=АДРЕС КУДА ПЕРЕХОДИТЬ] КОД ПУСТОЙ КНОПКИ, КАРТИНКИ ИЛИ ПРОСТО СЛОВА [/url]

А здесь - как сделать не просто кнопку-картинку, а чтобы при нажатии она еще и как будто "нажималась".
Первый вид кнопки, с указанием точных размеров высоты HEIGHT: 100px и ширины WIDTH: 607px. Если сделать ширину меньше, текст не поместится.
<div align="center"> - просто команда находиться кнопке по центру строки.
Итак, вот "пустая" кнопка, т.е. которая никуда не ведет, можете жать на нее сколько хотите:

А вот тут ширина и высота маловаты. Когда нажмете, увидите, что весь не поместившийся текст "побежит" бегущей строкой. По крайней мере в браузере Опера у меня так:

Как написать:
<input style="WIDTH: ШИРИНА КНОПКИ НАПР. 207px; HEIGHT: ВЫСОТА КНОПКИ НАПР. 100px" type="submit" size="РАЗМЕР БУКВ НАПР. 33" value="ПОДПИСЬ КНОПКИ" />

А вообще кнопка будет вас отсылать туда, куда вы укажете, какой адрес страницы, сайта, блога. Зачем нужно target="_blank" уже знаете (чтобы открывало в новом окне / вкладке), так что можете стереть эти буквы при желании. Ширина и высота фиксированы, но если текст будет слишком длинный в ширину, то он просто не поместится на кнопке, поэтому надо подредактировать величину, например, сделать ширину не WIDTH: 207px, а WIDTH: 410px или даже больше (можно и меньше если текста мало)
Просто "пустая" кнопка:

<input style="WIDTH: ШИРИНА КНОПКИ НАПР. 207px; HEIGHT: ВЫСОТА КНОПКИ НАПР. 100px" type="submit" size="РАЗМЕР БУКВ НАПР. 33" value="ПОДПИСЬ КНОПКИ" />

Кнопка, ведущая на какой-то сайт:

<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank"><div align="center"><input style="WIDTH: ШИРИНА КНОПКИ НАПР. 207px; HEIGHT: ВЫСОТА КНОПКИ НАПР. 100px" type="submit" size="РАЗМЕР БУКВ НАПР. 33" value="ПОДПИСЬ КНОПКИ" /></div></form>

То же, но без фиксированного указания широты и высоты. В этом случае она растянется на ширину текста:
<div align="center"> - просто команда находиться кнопке по центру строки.

А вот тут даже нет фиксированного размера букв (в таких случаях размер переносится с настроек дизайна дневника применительно к размеру текста в вашем дневнике). И тогда это уже не кнопка...
Вот что получилось:

<input style="type="submit" value="Пишем любой тег" />

Другой тип кнопки:
"Пустая" кнопка:

<input type="submit" value="ПОДПИСЬ КНОПКИ">

Кнопка, ведущая на сайт:

<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank" method="get"><input type="submit" value="ПОДПИСЬ КНОПКИ"></form>

Кнопка с таким вот фоном:
"Пустая" кнопка:

<input type="submit" value="ПОДПИСЬ КНОПКИ" style="background-image:url('АДРЕС КАРТИНКИ-ФОНА КНОПКИ')" />

Кнопка, ведущая на сайт:

<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank" method="get"><input type="submit" value="ПОДПИСЬ КНОПКИ" style="background-image:url('АДРЕС КАРТИНКИ-ФОНА КНОПКИ')" /></form>

Текст и размер на кнопке можно увеличить подобно тексту в сообщении. Обрамление b:
<b>ВНУТРИ БУДЕТ ЖИРНЫЙ ШРИФТ</b>
Обрамление font size="+1" (можно и +2, и +3 по желанию) или font size="4pt"
<font size="4pt"> ВНУТРИ БУДЕТ ТАКОЙ РАЗМЕР</font>
Сравните с предыдущим вариантом если только в вашем дневнике текст не является крупным по умолчанию (тогда разницы можете не увидеть т.к. этот шрифт уже сделан настройками дизайна дневника):

<b><font size="+1"> <input type="submit" value="ПОДПИСЬ КНОПКИ" style="background-image:url('АДРЕС КАРТИНКИ-ФОНА КНОПКИ')" /></font></b>

По идее, после слова style=" можно приписать не только фон, но и все что хотите применимое к обычному тексту в тегах типа div (шрифт, размер и т.д.). Вот пример "пустой" кнопки:

<input type="submit" value="ПОДПИСЬ КНОПКИ" style="background-image:url('ФОН КНОПКИ'); font-family:ШРИФТ БУКВ НАПР.arial; font-size:РАЗМЕР БУКВ НАПР.24pt; color:ЦВЕТ БУКВ НАПР.#00FF00;" />

Третий тип кнопки:
"Пустая" кнопка. Текст-пояснялка нужен для того, чтобы когда вы наводите курсор на кнопку, даже не нажимая на нее, появляется всплывающий текст-подсказка.

<button title="ТЕКСТ-ПОЯСНЯЛКА"><table border=5><tbody><tr><td><center><font color=#ЦВЕТ БУКВ НАПР. #BA55D3 size=РАЗМЕР БУКВ НАПР. 4>НАЗВАНИЕ КНОПКИ</font></center></td></tr></tbody></table></button>
Для тех, кто знает тег "таблица", можете увидеть, что table border="5" - это рамка таблицы толщины 5. Можете сделать толщину больше (напр. не 5 а 11) или меньше (напр. 1). По умолчанию 0 рамки вообще НЕ будет, а цвет по умолчанию как правило цвета букв (у меня - черный, но это видит Опера, а Эксплоэр НЕ видит!!!), поэтому рамку можете "раскрасить" по правилам работы с таблицами, например border: #119931 3px solid;
Итого вместо <table border=5> получится: <table style="border:#F70000 3px solid; ">
Пояснение: #F70000 - цвет рамки, 3px толщина рамки, solid - стиль рамки.

Кнопка, ведущая на сайт:

<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank" method="get"><button title="ТЕКСТ-ПОЯСНЯЛКА"><table border=5><tbody><tr><td><center><font color=#ЦВЕТ БУКВ НАПР. #BA55D3 size=РАЗМЕР БУКВ НАПР. 4>НАЗВАНИЕ КНОПКИ</font></center></td></tr></tbody></table></button></form>

Четвертая кнопка:
"Пустая" кнопка.

<button style="BACKGROUND: #ЦВЕТ ФОНА КНОПКИ НАПР. #8080ff; WIDTH: ШИРИНА КНОПКИ НАПР.150px" type="submit"><img src="URL КАРТИНКИ"></button>

Кнопка, ведущая на сайт:

<form action="АДРЕС КУДА ПЕРЕХОДИТЬ" target="_blank" method="get"><button style="BACKGROUND: #ЦВЕТ ФОНА КНОПКИ НАПР. #8080ff; WIDTH: ШИРИНА КНОПКИ НАПР.150px" type="submit"><img src="URL КАРТИНКИ"></button></form>
А вот такая кнопка, даже с картинкой и переносами :)
Экспериментируйте с цветом и границей рамки (пунктир, двойная, точечная и т.д.)
 (50x50, 2Kb)




Серия сообщений "Кодировщик":
Шрифты, кнопки и прочее оформление
Часть 1 - Оформление днева (разные сайты и генераторы)
Часть 2 - Дизайн сообщений днева с принтскрином
...
Часть 21 - Редкие символы с тегом написания
Часть 22 - Шрифты (надеюсь ваш браузер отображает все перечисленные)
Часть 23 - Кнопочки делаем :)
Часть 24 - Таблицы делаем
Часть 25 - Буквы-хамелеоны MS Outlook и Wingdings
...
Часть 31 - Тень у рамки
Часть 32 - Читать закрытые записи
Часть 33 - Уроки и советы по компьютеру и интернету 1(серия сообщений в 250 частей)

Метки:  

Процитировано 110 раз
Понравилось: 74 пользователям

NIKALATA   обратиться по имени Четверг, 16 Января 2014 г. 13:45 (ссылка)
Спасибо, Катя! Я как раз сейчас этим вопросом заинтересовалась.
Всего доброго!
Ответить С цитатой В цитатник
Н_Филина   обратиться по имени Четверг, 16 Января 2014 г. 13:51 (ссылка)
Спасибо за урок. Буду изучать.

Ответить С цитатой В цитатник
Волжанка-52   обратиться по имени Четверг, 16 Января 2014 г. 13:51 (ссылка)
большое спасибо забрала!!!!!!!
Ответить С цитатой В цитатник
Maks_Mexanik   обратиться по имени Четверг, 16 Января 2014 г. 13:58 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
AGAPILAV   обратиться по имени Четверг, 16 Января 2014 г. 14:05 (ссылка)
Только что хотела создать кнопку на Гугл -переводчик,урок кстати.Спасибо!
Ответить С цитатой В цитатник
DragooonFly   обратиться по имени Четверг, 16 Января 2014 г. 14:12 (ссылка)
Отличная работа!
Ответить С цитатой В цитатник
Natalia756   обратиться по имени Четверг, 16 Января 2014 г. 14:19 (ссылка)




Ответить С цитатой В цитатник
петролатум   обратиться по имени Четверг, 16 Января 2014 г. 14:25 (ссылка)
Спасибо! Это интересно!
Ответить С цитатой В цитатник
панггеа   обратиться по имени Четверг, 16 Января 2014 г. 14:33 (ссылка)
спасибо
78389395_0_4d5db_83710b44_Sjpg (150x132, 29Kb)
Ответить С цитатой В цитатник
таила   обратиться по имени Четверг, 16 Января 2014 г. 14:39 (ссылка)
Спасибо за урок! Цитирую!!!
Ответить С цитатой В цитатник
Папуличка   обратиться по имени Четверг, 16 Января 2014 г. 14:56 (ссылка)
Спасибо Катя!
Ответить С цитатой В цитатник
Nataliy55   обратиться по имени Четверг, 16 Января 2014 г. 15:07 (ссылка)
Спасибо, Катюша! Очень нужный урок. Пора учиться самой делать кнопки.
Ответить С цитатой В цитатник
Любовь_Шидловская   обратиться по имени Четверг, 16 Января 2014 г. 15:31 (ссылка)
Очень интересно и подробно! Спасибо большое!
Ответить С цитатой В цитатник
Зоя_Крайсик   обратиться по имени Четверг, 16 Января 2014 г. 15:38 (ссылка)
Мне еще далеко до этого...трудно понять что и как...Спасибо!
Ответить С цитатой В цитатник
belorusochka-ja   обратиться по имени Четверг, 16 Января 2014 г. 17:15 (ссылка)
Спасибо,Катерина!Полезный материал!
Ответить С цитатой В цитатник
shaitan   обратиться по имени Четверг, 16 Января 2014 г. 17:39 (ссылка)
Спасибо большое!
Ответить С цитатой В цитатник
Ира_Ивановна   обратиться по имени Четверг, 16 Января 2014 г. 18:09 (ссылка)
Очень интересно! Большое спасибо!
Ответить С цитатой В цитатник
Лара__Лариса   обратиться по имени Четверг, 16 Января 2014 г. 18:14 (ссылка)
.
Благодарю и приглашаю. (193x400, 67Kb)
Ответить С цитатой В цитатник
OlgaShv   обратиться по имени Четверг, 16 Января 2014 г. 18:36 (ссылка)
Спасибо! Забрала!
Ответить С цитатой В цитатник
Rishon   обратиться по имени Четверг, 16 Января 2014 г. 18:38 (ссылка)
Спасибо,заберу,разберусь ли...
Ответить С цитатой В цитатник
OlgaShv   обратиться по имени Четверг, 16 Января 2014 г. 18:39 (ссылка)
Спасибо, Катя! Очень нужная информация! Забрала учиться.
Ответить С цитатой В цитатник
OlgaShv   обратиться по имени Четверг, 16 Января 2014 г. 18:40 (ссылка)
18 (390x330, 144Kb)
Ответить С цитатой В цитатник
борисюлька   обратиться по имени Четверг, 16 Января 2014 г. 18:44 (ссылка)
Спасибо))
Ответить С цитатой В цитатник
rottam   обратиться по имени Четверг, 16 Января 2014 г. 18:57 (ссылка)
Спасибо Катюша!
Ответить С цитатой В цитатник
Michel_perm   обратиться по имени Четверг, 16 Января 2014 г. 19:27 (ссылка)
Ну всё Катерина, завтра твой пост в раздаче Li.ru!
Ответить С цитатой В цитатник
Ф_Ирина   обратиться по имени Четверг, 16 Января 2014 г. 20:05 (ссылка)
Клёво! Но мне походу не осилить эту науку )
Ответить С цитатой В цитатник
Таточка-Танюша   обратиться по имени Четверг, 16 Января 2014 г. 20:24 (ссылка)
Спасибо, Катя!
Приятно удивлена. Я уже думала, что такой функции нет.

Моя симпатия.
0_695e5_77c2fb8c_M (293x300, 152Kb)
Ответить С цитатой В цитатник
Симочка3   обратиться по имени Четверг, 16 Января 2014 г. 20:50 (ссылка)
Надо еще разобраться!!!
Ответить С цитатой В цитатник
MIGDA   обратиться по имени Четверг, 16 Января 2014 г. 22:29 (ссылка)
Ответить С цитатой В цитатник
Talya6   обратиться по имени Пятница, 17 Января 2014 г. 10:30 (ссылка)
Спасибо большое.
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] 2 [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку