Нова притурка за социални мрежи в Blogger

Най-специалният и надежден начин за популяризиране на вашия блог са социалните мрежи. И когато говорим за популяризиране чрез тях, това означава, че това няма да ви струва нито една стотинка. В наши дни социалните мрежи помагат на новите и старите блогъри да промотират своя блог така, че да бъдат привлечени все повече посетители.

Нова притурка за социални мрежи в Blogger 

Тази нова притурка за популяризиране е специална, защото:
➤Освен за популяризиране в социалните мрежи, тя съдържа абонаментна кутия, чрез която всеки посетител може лесно да взаимодейства с вас и вашия блог;
➤Тази комплексна притурка е супер бърза и се зарежда се за секунди, защото има ховър ефект, който се поддържа от много прост, но ефективен CSS код;
➤Нейно предимство е, че освен като притурка, може да се инсталира и на статична страница;
Как да добавите една нова притурка за Blogger, съчетаваща споделяне в социалните мрежи с форма за абонамент?
Първо разгледайте демонстрацията на тази притурка във втория ѝ вариант – на статична страница.


DEMO

Добавяне на притурката

Какво трябва да направите:
➤Първи вариант:
Влезете в акаунта си в Blogger ➔ отидете на Оформление ➔ Щракнете върху добавяне на притурка ➔ Изберете Html / JavaScript притурка ➔ Поставете долния код в нейното празно пространство.
➤Втори вариант:
Създайте статична страница, както вече знаете, като спазвате всички изисквания за това. Впишете в нея, в Html режим, посочения по-долу код. Не забравяйте да впишете и адреса ѝ в менюто на блога си.

Код

<style>

.aboutme-wrpicon {

    display: block;

    margin: 10px auto 10px auto;

    position: relative;

}

.aboutme-wrpicon .extender {

    width: 100%;

    display: block;

}

.extender {

    text-align: center;

    font-size: 16px;

}

.extender .aboutme-icon {

    background: #0288d1;

    display: inline-block;

    border: 0;

    margin: 0;

    padding: 0;

    border-radius: 5px;

}

.extender .aboutme-icon:hover {

 background: rgba(0,0,0,.06);

}

.extender .aboutme-icon:hover a {

color:#4573cc;

}

.extender .aboutme-icon a {

    display: inline-block;

    font-family: fontawesome;

    font-weight: 300;

    color: #fff;

    height: 42px;

    width: 42px;

    line-height: 42px;

    border-radius: 3px;

}

#Templatesyard-sbox-v2 {

  padding: 0;

  font-family: inherit;

  display: block;

  margin: 0;

  border-radius: 1px;

  border:1px solid #0288d1;

  background:#fff;

}

#Templatesyard-sbox-v2 p {

  font-size: 15px;

  color: #000;

  line-height: 27px;

  padding: 5px 10px 5px;

  text-align: center;

  width: 80%;

  margin: 5px auto 20px;

  border-bottom: 2px solid #ebebeb;

  border-radius: 20px;

}

#Templatesyard-sbox-v2 .rssform {

  padding: 0;

  margin: 0 auto;

  display: block;

}

#Templatesyard-sbox-v2 .rssform input {

  padding: 8px;

  margin: 20px auto 15px;

  font-size: 13px;

  color: #000;

  text-align: center;

  display: block;

  font-family: inherit;

  font-weight: normal;

  width: 90%;

  height: 38px;

  text-transform: uppercase;

  outline: none !important;

  border: 1px solid #ebebeb;

  border-radius: 1px;

  background-color: #FCFCFC;

  box-sizing: border-box !important;

}

#Templatesyard-sbox-v2 .rssform .button:hover {

 opacity: 0.7;

    -moz-opacity: 0.7;

    -webkit-opacity: 0.7;

}

#Templatesyard-sbox-v2 .rssform .button {

  background: #0288d1;

  color: white!important;

  margin-top: 15px;

  outline: none !important;

  transition: all .3s ease-in-out;

  padding: 5px 2px !important;

  float: none;

  text-transform: uppercase;

  font-size: 18px;

  font-weight: normal;

  cursor: pointer;

}

 #Templatesyard-sbox-v2 form {

  margin-bottom: 10px !important;

}

</style>

<div id='Templatesyard-sbox-v2'>

<p>Получете безплатно всички най-нови актуализации направо във вашата пощенска кутия!</p>

<div class='rssform'>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=blogzablogove&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>

<input name='email' placeholder='Въведете вашия имейл адрес' type='text' vk_15737='subscribed'/>

<input name='uri' type='hidden' value='blogzablogove'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='button' type='submit' value='Subscribe'/>

</form>

</div>

</div>

<div class='aboutme-wrpicon'>

<ul class='extender'>

<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'></i></a></li>

<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'></i></a></li>

<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Pinterest'><i class='fa fa-pinterest-p'></i></a></li>

<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Instagram'><i class='fa fa-instagram'></i></a></li>

<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Linkedin'><i class='fa fa-linkedin'></i></a></li>

</ul>

</div>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Променете маркираните части от кода с URL адресите на социалните си профили.

Заключение

Поздравления !! Вие сте създали една нова притурка за Blogger, съчетаваща споделяне в социалните мрежи с форма за абонамент.
Посетете вашия блог и проверете тази притурка на живо в действие.
Надявам се, че ви е харесал този урок. Ако е така, моля, споделете с приятелите си, а Blogzablogove ще работи усилено, за да разработва и споделя с вас все повече такива страхотни притурки.

За въпроси моля, в коментарите. А може и на тази страница.

Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:


или подкрепете моя проект

Здраве за всички вас! Не забравяйте да правите добро на други хора!


Следвайте Blogzablogove