Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.
Добър ден, приятели, читатели и посетители на блога. Днес имам за вас една красива, елегантна форма на притурка за абонамент с икони за социалните мрежи. Разполага се в блога чрез притурката HTML / JavaScript. Можете да замените предложените от мен социални икони с ваши, да промените CSS стиловете и в крайна сметка да я направите напълно уникална, подходяща за шаблона на вашия блог. В Блог за блогове има много предложения за социални икони в блога. Този път ви предлагам социални икони в комбинация с форма за абонамент. А мнението и препоръките относно значението на формата на абонамент са тук. Ако сте пропуснали нещо, можете да видите тук или тук. А вариантът, който ви предлагам днес изглежда така.
Кодът на тази форма за абонамент е:
<style>.w2bOldSocial ul {
font-family: 'Oswald', sans-serif;
margin: 15px 0;
overflow: hidden;
}
.w2bOldSocial ul li {
float: left;
width: 90px;
padding: 0 0 0 55px !important;
margin: 0 0 0 5px !important;
line-height: 48px !important;
}
.w2bOldSocial ul li a {
font-size: 20px !important;
text-decoration:none;
padding:0 !important;
margin:0 !important;
text-decoration:none;
}
.w2bOldSocial ul li a:hover {
text-decoration:underline;
}
.w2bOldSocial ul li.w2brss {
background: url("http://s45.radikal.ru/i109/1406/43/219daaabb709.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bгугл {
background: url("http://s019.radikal.ru/i618/1406/40/71d113bc8bce.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2btwitter {
background: url("http://s019.radikal.ru/i618/1406/76/98d12801cd3d.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bfacebook {
background: url("http://i069.radikal.ru/1406/d9/74471340c15b.png") no-repeat scroll left center transparent !important;
}
#w2bEmailsub {
display: block;
clear: both;
margin: 10px 0;
}
form.w2bEmailform {
margin: 20px 0 0;
display: block;
clear: both;
}
.emailText {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOpYuFILERCQ6j7ywWdFiybAXeJgLHiTCX0KiAq9YK04W6_DLrK_hSeiVSd2iFGSfSUL_LBOE5e-qHt8VpTY4CJ1HzsUycbT57lpcxER0opdHv7Xr3qn8FXMg_Qu0_E0rOoMne1FKKaita/s28/w2b-mail.png") no-repeat scroll 4px center transparent;
padding: 7px 15px 7px 35px;
color: #444;
font-weight: bold;
text-decoration: none;
border: 1px solid #D3D3D3;
Копирайте го в уърдовски файл или там, където обикновено го правите, за да промените настройките, ако желаете това. Какво можете да промените?
➤Ако смятате за необходимо можете да сменете иконите на социалните мрежи със свои. Мястото им в кода е маркирано в червено.
➤В синьо са маркирани адресите на вашите страници в социалните мрежи. Разберете кои са вашите адреси, като отворите страниците си и копирайте това, което се показва в браузъра.
➤В зелено е текстът за въвеждане на email –а. И него можете за замените със свой.
➤В CSS стилове подберете вариант, подхождащ на вашия проект или ги оставете така както са, ако ви устройва.
Това е всичко. Поставете готовия код в притурката HTML / JavaScript и да я преместете на видно място в страничната колона на блога. Нека да привлече веднага вниманието на посетителите.
На добър час.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
За да разгледате страницата на цял екран кликнете върху бялото квадратче в шапката на блога. Кликнете втори път върху него, за да върнете обратно.
То изглежда така:
Няма коментари:
Публикуване на коментар