Доброго часу, друзі. Цікаве рішення для при натисканні на іконку, яка не дратуватиме відвідувачів. У ньому ви зможете розмістити або важливі оголошення, або іншу потрібну інформацію. Воно з'явиться лише тоді, коли користувач натисне на іконку (у моєму випадку андроїд іконка).
Код абсолютно не складний, без усіляких бібліотек та важких скриптів. І встановлюється елементарно у гаджет HTML/JavaScript. Сама картинка та кнопка "закрити" у svg форматі. Наочно подивитися цю "конструкцію" можна на тестовому блозі у верхньому правому кутку.
ДемонстраціяВесь код
Вітаю вас
блог шпаргалки блогерки про створення, налаштування, оформлення та ведення блогу на платформі BLOGGER Сподіваюся, що Ви знайдете тут багато корисної та цікавої інформації. Дуже буду рада вашим відгукам
.app-android-outer (
width: 50px;
position: fixed;
top: 0;
right: 50px;
z-index: 9999
}
.app-android (
width: 50px;
height: 55px;
line-height: 55px;
margin: 0;
text-align: center;
position: relative;
float: right;
cursor: pointer
}
.app-android svg (
vertical-align: middle;
opacity: .7
}
.app-android:hover svg,
.app-android:focus svg,
.app-android:active svg (
opacity: 1
}
.app-android:before (
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.app-content (
background: #fff url(https://2.bp.blogspot.com/-sSuAXU_yhVM/XPD3sxcQ8DI/AAAAAAABK4s/CusSSD-sJf8k_B6AuUkF4g5nkmivM6MEACLcBGAs/s300-rw/android
width: 300px;
padding: 0;
border: 1px solid #ccc;
border-color: rgba(0, 0, 0, .2);
line-height: 1.3;
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
outline: 0;
position: absolute;
right: 50%;
top: 50px;
margin-right: -40px;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-user-select: text;
z-index: 2;
display: none;
}
.app-content h3 (
margin: 0;
padding: 5px 20px;
color: #333;
font-size: 18px;
font-weight: 700;
border-bottom: 1px solid #ccc;
border-color: rgba(0, 0, 0, .2)
}
.app-content-on (
padding: 10px 20px 16px;
color: #333;
font-size: 16px;
font-weight: 400
}
.app-content-on svg (
vertical-align: -7px;
}
.app-content:before (
content: "";
border-color: transparent;
position: absolute;
right: 0;
margin-right: 30px;
z-index: 1;
height: 0;
width: 0;
border-bottom-color: #ccc;
border-bottom-color: rgba(0, 0, 0, .2);
top: -9.5px
}
.app-content:after (
content: "";
border-color: transparent;
border-bottom-color: #fff;
border-style: dashed dashed solid;
border-width: 0 8.5px 8.5px;
position: absolute;
right: 0;
margin-right: 30px;
top: -8.5px;
z-index: 1;
height: 0;
width: 0
}
.app-close-button (
position: absolute;
width: 18px;
height: 18px;
line-height: 28px;
text-align: center;
top: 7px;
right: 5px;
background: 0 0;
border: none;
cursor: pointer;
padding: 0
}
.app-close-button:before (
content: "";
position: absolute;
top: -15px;
right: -15px;
bottom: -15px;
left: -15px;
cursor: pointer
}
.slideInUp (
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes slideInUp (
0% {
visibility: visible
}
100% {
transform: translateY(0)
}
}
@keyframes slideInUp (
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
visibility: visible
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@media screen and (max-width:960px) (
.app-android-outer (
right: 80px
}
}
@media screen and (max-width:375px) (
.app-content (
margin-right: -75px
}
.app-content:after,
.app-content:before (
margin-right: 65px
}
}
@media screen and (max-width:320px) (
.app-content (
margin-right: -95px
}
.app-content:after,
.app-content:before (
margin-right: 85px
}
}
Копіюйте готовий код, встановлюйте його в гаджет HTML/JavaScript в будь-яке місце макета блогу. Іконка буде розташована саме там, як задумано. У рядку, позначеному сірим кольором, напівпрозора фонова картинка спливаючого вікна. За непотрібністю можна прибрати з коду і задати основний фон на свій смак, змінивши значення background: #fff на бажане.
Дякую всім за увагу. Побачимося.
оформіть передплату на нові шпаргалки
Привіт друзі. Хочу показати як дуже просто змінити загальне тло всього блогу. Хоча фон можна легко налаштувати в розділі Тема . Там можна підібрати готові фони або залити свою картинку та зробити відповідні налаштування. Однак, вирішила вам запропонувати більш легкий варіант, як на мене. Тут ми зможемо регулювати розмір фонової картинки. Точніше її ширину.
Перейдемо до справи. Спочатку мій тестовий блог виглядав так. Я відзначила простір (або заднє тло всього полотна), який був заданий у налаштуваннях теми.
Зараз ми його поміняємо на таку картинку
Щоб вийшло приблизно ось так
Тут я хочу звернути вашу увагу. Ширина блогу у моєму випадку 1200 px. Розміри фонової картинки 1450 на 950 px. Картинка повністю заповнила весь простір.
Якщо розміри фонової картинки будуть меншими від розміру всього полотна блогу, то вона не закриє весь простір і виглядатиме у вигляді бордюру. Подивіться різницю
Воно, начебто, теж цілком прийнятне. Деякі в такий спосіб прикрашають сайти до свят. У будь-якому випадку розглянемо обидва варіанти. При правильно підібраному або створеному в будь-якому редакторі фоні той і інший варіант можна підігнати.
Особливих навичок не потрібно.
1. Підберіть потрібну картинку та скопіюйте її адресу.
2.Копіюйте наведений нижче код і встановлюєте адресу своєї картинки
3. Ідемо у вкладку Тема - Змінити HTML знаходимо ]]> і встановлюємо над цим рядком готовий код.
Результат буде видно під час перегляду теми. Якщо ви залишилися їм задоволені сміливо натискайте зберегтита милуйтеся новим шаблоном.
Знову ж таки повторюся. На той випадок, якщо картинка виявилася менше розмірівширини блогу або взагалі сховалася з очей геть, потрібно в коді задати значення ширини. Додамо всього один рядок і він виглядав так
body (
background: url(http://www.clipartbest.com/cliparts/9iz/EnR/9izEnR56T.png)
no-repeat top fixed;
background-size: 100%;
}
З значенням background-size: 100%; можна погратися, змінюючи його на менше, поки не досягнете бажаного.
Такими простими маніпуляціями можна створювати різні фони під різні свята, пори року чи ваш настрій.
Можливо Ви пропустили
Усім добра і до зустрічі.
Привіт всім. Сьогодні запропоную вам код, коли при наведенні посилання з'являється картинка. Варіантів оформлення посилань є досить багато. Але це буде оригінальним рішенням для тематичних блогів. Або для оформлення окремого повідомлення. Картинку завжди можна підібрати під потрібну тематику та дизайн.
Живу демонстрацію можна побачити відразу нижче. Посилання я дала деякі сторінки свого блогу для наочності. Ви, звісно, зміните їх на адреси своїх сторінок. Картинки та текст - відповідно.
Ось сам код.
Дорогі читачі "Текст посилання", Вітаю вас з наступаючим 2020 роком текст посилання. Нехай почнеться новим злетом До кращих життєвих висот І хорошим у банку рахунком текст посилання Принесе у справах згоду, В особистому житті - багато щастя!
.stage (
display: table-cell;
vertical-align: middle;
}
.tabled, .middled (
text-align: center;
margin: 0 auto;
}
.jumbo (
font-size: 150%;
vertical-align: -25px;
transform: rotate(8deg);
}
.jumbo:first-child (
-webkit-animation: wave 10s infinite ease;
animation: wave 10s infinite ease;
}
.jumbo:last-child (
-webkit-animation: wave 15s infinite ease;
animation: wave 15s infinite ease;
}
@keyframes wave (
0% ( transform: rotate(8deg); )
25% ( transform: rotate(15deg); )
75% ( transform: rotate(-10deg); )
100% ( transform: rotate(8deg); )
) @-webkit-keyframes wave (
0% (-webkit-transform: rotate(0deg); )
50% ( -webkit-transform: rotate(10deg); )
100% ( -webkit-transform: rotate(0deg); )
}
p (
font-size: 110%;
font-family: Helvetica, sans;
max-width: 24em;
margin: 0 auto;
text-align: justify;
color: #00695C;
font-weight: lighter;
line-height: 1.5em;
}
a (
color: #ccc;
text-decoration: none;
border-bottom: solid thin #f7901d;
}
a:hover (
color: #f7901d;
}
.boo (
position: relative;
}
.boo:before, .boo:after (
position: absolute;
transition: all 0.15s ease;
}
.boo:before (
top: -75px;
left: -70px;
-webkit-transform:rotate(0deg) scale(0);
-moz-transform:rotate(0deg) scale(0);
-o-transform:rotate(0deg) scale(0);
-ms-transform:rotate(0deg) scale(0);
transform:rotate(0deg) scale(0);
}
.boo:after (
top: -115px;
right: -70px;
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transform:rotateY(180deg) scale(0);
-moz-transform:rotateY(180deg) scale(0);
-o-transform:rotateY(180deg) scale(0);
-ms-transform:rotateY(180deg) scale(0);
transform:rotateY(180deg) scale(0);
}
.boo:hover:before (
top: -140px;
-webkit-transform:rotate(15deg) scale(1);
-Moz-transform:rotate(15deg) scale(1);
-o-transform:rotate(15deg) scale(1);
-ms-transform:rotate(15deg) scale(1);
transform:rotate(15deg) scale(1);
}
.boo:hover:after (
-webkit-transform:rotateY(180deg) scale(0.7);
-Moz-transform:rotateY(180deg) scale(0.7);
-o-transform:rotateY(180deg) scale(0.7);
-ms-transform:rotateY(180deg) scale(0.7);
transform:rotateY(180deg) scale(0.7);
}
.boo:before, .boo:after (
content: url("посилання на картинку. png");
}
Скопіюйте код повністю, зробіть потрібні налаштування та встановіть його у редакторі повідомлення у режимі HTML у потрібному місці. У прикладі вказано 3 посилання. У будь-якому випадку можна прибирати чи додавати рядок такого виду
"текст посилання")
А мені від щирого серця хочеться вам усім побажати найщасливішого Нового року. Посмішок, радості, здоров'я, благополуччя рідним та близьким. Добра і миру Вашому дому!
З НАСТУПНИМ, ВСІХ, НОВИМ 2020 РОКОМ!
Всім привіт. Навігація у стандартних шаблонах Блоггер взагалі не привертає до себе жодної уваги. Ледве помітна панелька наприкінці сторінки не кожен і помітить. Тому будь-який новий відвідувач може не побачити посилання на попередні чи наступні статті блогу.
Стилів навігації досить багато. Але вже не вперше звертаються, що багато хто з них "наказали довго жити". А навігація сайту, мабуть найголовніший елемент. Тому дам посилання на статті, де публікувала вже варіанти оформлення навігації та запропоную ще один робочий код. Ось так вона виглядатиме під повідомленнями блогу.
Сьогоднішній варіант виглядає досить елегантно. Відображає на панелі нумерований список сторінок та правильно відображає попередні та наступні.
Для встановлення спочатку потрібно скопіювати цей код
//1J "+i+\" 1H \"+g+"";7 1f=L(i)-1;5(i>1)(5(i==2)(5(l=="s") (6+=\" "+Q+"\")e(6+=\" "+Q+"\"))e(5(l=="s")(6+=\" "+Q+"\")e(6+=\" "+Q+"\")))5(E>1)(5(l=="s")(6+=\" 1\")e(6+=\" 1\"))5(E>2)(6+=\"...\")1m(7 m=E;m