0

Притурка форма за абонамент със социални икони

форма за абонамент
Добър ден, приятели, читатели и посетители на блога. Днес имам за вас една красива, елегантна форма на притурка за абонамент с икони за социалните мрежи. Разполага се в блога чрез притурката 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("
http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/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;

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

-webkit-box-shadow: 1px 1px 2px #CCC inset;
-moz-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.emailButton {
color: #444;
font-weight: bold;
text-decoration: none;
padding: 6px 15px;
border: 1px solid #D3D3D3;
cursor: pointer;

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}</style>

<div class="w2bOldSocial">
    <ul>
        <li class="w2brss"><a href="http://feeds.feedburner.com/
#### ">RSS</a></li>
        <li class="w2bгугл"><a href=" https://plus.google.com/u/0/
####/posts" >Гугл+</a></li>
        <li class="w2btwitter"><a href="https://twitter.com/
#### ">Twitter</a></li>
        <li class="w2bfacebook"><a href="https://www.facebook.com/
#### ">Facebook</a></li>
    </ul>
</div>
<div id="w2bEmailsub">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerwidgetgenerators', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform">
        <input type="hidden" value="domahniedela " name="uri" />
        <input type="hidden" name="loc" value="en_US" />
        <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="
Въведете вашия email..." name="email" class="emailText" />
        <input type="submit" class="emailButton" value="
изпрати" title='' />
    </form>
</div>


Копирайте го в уърдовски файл или там, където обикновено го правите, за да промените настройките, ако желаете това. Какво можете да промените?

➤Ако смятате за необходимо можете да сменете иконите на социалните мрежи със свои. Мястото им в кода е маркирано в червено.

➤В синьо са маркирани адресите на вашите страници в социалните мрежи. Разберете кои са вашите адреси, като отворите страниците си и копирайте това, което се показва в браузъра.

➤В зелено е текстът за въвеждане на email –а. И него можете за замените със свой.

➤В CSS стилове подберете вариант, подхождащ на вашия проект или ги оставете така както са, ако ви устройва.

Това е всичко. Поставете готовия код в притурката HTML / JavaScript и да я преместете на видно място в страничната колона на блога. Нека да привлече веднага вниманието на посетителите.
На добър час.


Няма коментари :

Винаги се радвам на Вашето мнение


Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | Всички права запазени |
Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита