/Не $pizdil, а интерпретировал/ Немного про HTML и BIO на Chaturbate.

Статья канала Chaturbabes.

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

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

Итак, для начала идем к условной Wetdream и тыкаем правым кликом на иконку и выбираем копировать ЮРЛ картинки. Идем открывать ссылку и вуаля, у нас теперь есть кнопка в качестве!

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

Как сделать иконку самому без регистрации и смс: ну опять же, либо идем в гугл и пишем фотошоп онлайн, там можно просто сделать пнг файл с прозрачным фоном и ляпнуть лого твиттера на кружочек, либо гуглить. Кстати, в Canva тоже до недавнего времени я делала все иконки бесплатно, но они убрали возможность сохранять прозрачные изображения без оплаты, так что я оставила канву для био. Кстати, для био еще и Adobe Spark. А что касается значков на прозрачном фоне, Crello позволяет сделать несколько файлов на прозрачном фоне бесплатно а интерфейс там в точности повторяет канву.

Итак вы зафотошопили чужую иконку, или сделали ее сами, теперь нужно ее загрузить на нормальный хостинг (а не там, где она удалится через месяц), тогда нам нужно на imgbb.com. Там обязательно сделайте аккаунт, что бы все ваши изображения хранились в одном месте. Что бы адекватно взять ссылку на твое изображение, на этом хостинге нужно сделать следующее: после загрузки не кликаем взять ссылку, а идем в шапку сайта и тыкаем на наше имя>мой профиль>из коллекции выбираем то, что загрузили>тыкаем на это и оно открывается на черном фоне в отдельном окне>правым кликом тык и Скопировать URL картинки. Вуаля, готово, у нас есть линк на изображение.

После того как мы загрузили все наши изображения, нам нужно их как-то прикрутить к нашей страничке чатура. Для этого мы идем на сам сайт и открываем там наше био и тык на кнопку Edit your bio, и тут уже по моей картинке понятно куда и как вставляется код. Что бы окно не было таким узким - нижний правый уголок она можно потянуть вправо и у нас открывается нормальный такой стол для редактирования кода.

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

1.Код для смены цвета верхней части страницы.

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

<span style="position:absolute;top:0;left: 0;width:100%;height:163px;background-color:#C198E6;z-index:3;mix-blend-mode:hue;pointer-events:none;display:block"></span>

Плюс я сделала тот же код радугой, обратите внимание на коды цвета и процентное соотношение градиента. Если хотите, например, всего два цвета, то уберите все прочие #00cc00 64% и оставьте два.

<p style="display: unset;"><span rel="nofollow" style="position:absolute;top:0;left: 0;width:100%;height:163px;background: linear-gradient(to right, #ff3300 16%, #ff9933 32%, #ffff00 48%, #00cc00 64%, #0000cc 80%, #9900cc 100%);z-index:3;mix-blend-mode:hue;pointer-events:none;display:block" target="_blank"></span><br></>

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

2.Код для смены фона.

<p style="background:url(ССЫЛКА ТВОЕЙ КАРТИНКИ);width:100%;height:100%;left:0;top:0;position:fixed;z-index:-100;background-position:center top;background-size:cover"></p>

или

<p target="_blank" style="background:url(ССЫЛКА ТВОЕЙ КАРТИНКИ);width:100%;height:100%;left:0px;top:0px;position:fixed;z-index:-101;background-position:100%; background-size:cover;" rel="nofollow"></p>

или

<p style="display:block;width:100%!important;min-height:2000px;height:100%!important;z-index:-55;position:fixed;top:0;left:0;background-color:#93C;background-image:url(ССЫЛКА);background-repeat:repeat;background-size:cover;-webkit-background-size:cover;background-position:center;background-attachment:fixed;"></p>

3.Код для кнопок соцсетей.

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

<a href="https://www.instagram.com/ТВОЯ ССЫЛКА" target="_blank"><img style="position:fixed;left:2px;bottom:465px; width:40px; height:40px;" src="АДРЕС ТВОЕЙ КАРТИНКИ" alt="1" border="0" alt="app-com-instagram-android-com-instagram-android-activity-Main-Tab-Activity" border="0"></a>

<a href="https://twitter.com/ТВОЯ ССЫЛКА" target="_blank"><img style="position:fixed;left:2px;bottom:420px; width:40px; height:40px;" src="АДРЕС ТВОЕЙ КАРТИНКИ" alt="4" border="0" alt="app-com-twitter-android-com-twitter-android-Start-Activity" border="0"></a>

4.Альтернативные варианты кода для кнопок соцсетей.

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

<a id="НАЗВАНИЕ КНОПКИ" href="ТВОЯ ССЫЛКА"><img style="position : absolute ; left: 0px; top:250px; width: 46px; height:49px" src="ССЫЛКА ТВОЕЙ КАРТИНКИ"></a></a>

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

5.Код для реферальной ссылки.

<p style="z-index:99;position:fixed;top:-3px;right:300px;line-height:1cm;"> <a href="ТВОЯ РЕФЕРАЛЬНАЯ ССЫЛКА" rel="nofollow" target="_blank"><img rel="nofollow" src="ССЫЛКА ТВОЕЙ КАРТИНКИ" style="position: fixed; right: 300px; top: -3px;" target="_blank"></a></p>

6.Простая вставка картинки в био.

<a href="ЛЮБАЯ ССЫЛКА"><img src="ССЫЛКА НА КАРТИНКУ" alt="1" border="0"></a>

или с центральным положением.

<p style="text-align: center;"><img src="ССЫЛКА НАКАРТИНКУ"/></p>

В поле "любая ссылка" можно ничего не оставлять и тогда твоя картинка в био просто не будет кликабельной. Но я обычно пихаю туда рефералку.

7.Код для вставки гифок вместо иконки соцсетей.

<span style="position:fixed;top:150px;left:0px;margin:0;padding:0;width:50px;z-index:500"><a href="ССЫЛКА"><img src="ССЫЛКА НА КАРТИНКУ"></a></span>

Теперь возьмем паузу, что бы разобрать, что в кодах куда и за что отвечает. Я не буду вводить вас во полный курс по HTML, только отмечу штуки, которые можно и нужно в коде менять.

• background-color — см. на код (1). Это цвет того самого фона, который предлагается заменить. идем сюда или вот сюда и выбираем цвет. Получаем код и вставляем его сюда, или в любой другой код в будущем.
• z-index — это значение положения "cлоя" кода на сайте. В случае с кодом (1) это положение равняется 3, что выше чем весь чатуровский функционал за исключением правого окна с логином и token count. Для кода на фон (2) это значение будет -100, что означает в жопе. И таким образом, к примеру, можно наслаивать фон, если у вас прозрачное ПНГ изображение.
• background-position — в обоих вариациях кода (2) это значение center или 100% что по сути одно и тоже, фон закрывает весь бэкграунд сайта. Еще есть и другие значения: left; center; right; top; center; bottom или проценты. Но это может понадобится только в случае, если мы хотим сделать фон из сплита нескольких изображений, хотя можно просто сгонять в фш. Но зато вы все знаете теперь.
• mix-blend-mode — в коде (1) это присутствует ака фильтр в инстаграме. У этого мода так же есть значения: normal; multiply; screen; overlay; darken; lighten; color-dodge; color-burn; hard-light; soft-light; difference; exclusion; hue; saturation;color; luminosity. Их можно покрутить там классно.
• width — ширина изображения, можно писать в процентах если это фон, можно стереть это слово и значение, и тогда изображение загрузится на странице в его оригинальном размере. или прописать значение вручную. То есть либо вы мутите иконку, уменьшаете ее вручную в каком нибудь png ресайз сайте и загружаете уже в готовом маленьком формате, или проще - ваша иконка условно 150 на 150 пикселей, а в значении высоты и ширины вы прописываете 45, и вуаля.
• height — это высота
• left — сколько пикселей нужно от левой части сайта
• top — сколько пикселей нужно от правой части сайта
• position — при значении absolute ваша картинка будет на веки вечные в одном положении, при значении fixed она будет зафиксирована в отношении точек left и top от границ сайта, но будет двигаться при скроллинге, оставаясь в кадре. Еще есть relative, static, inherit значения.
• font-family — значение семейства шрифтов, которые используются в коде. Один или несколько, вы можете выбрать любой, вписывая название шрифта в код. Georgia, serif; "Gill Sans", sans-serif; sans-serif; cursive; serif; system-ui; monospace; fantasy; math; fangsong;

Большинство остальных значений не требуются для простого редактирования готового кода, но в будущем я о них напишу. Для подгонки кнопок соцсетей пользуйтесь вот этой хуйней, чтобы удобнее было отслеживать подгонку по пикселям. Условно: в самом окне кода, вставленного со всеми ссылками на изображения и соцсети на чату, вы вписываете значение left около 0-3-5px и нажимаете сохранить и сразу же сможете оценить, попали ли вы в те размеры, что планировали. Со значениями top, width и height так же. А значения для предыдущих команд, не считая кодов цвета, вписываются именно так, как они были описаны в каждом пункте — словами.

Код, меняющий твой никнейм в комнате.

Вот так выглядит эта штука, для того чтобы вставить туда свой ник, нужно его в начале отрисовать в редакторах.

<img style="position:absolute;left:27px;top:99px;pointer-events:none" src="ССЫЛКА НА КАРТИНКУ">"

/Ну и на десерт/

Готовое био с фоном, тип меню и правилами комнаты от студии Шоколад. Внимание, цвета в этом коде написаны в значении RGBA и RGB, помимо HEX. Тогда как предыдущий код (1) был написан с использованием значения HEX. Для того, что бы в этот код прописать цвет в RGBA и RGB используйте этот конвертер цветов.

И вот еще иконки для Chaturbate.

Расскажите че за коды еще бывают в @chaturbabesbot, может я что-то забыла и это пойдёт во вторую часть или сюда❤️

Кинуть в автора статьи денег: DonatePay