Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

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

Нова притурка в 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 ще работи усилено, за да разработва и споделя с вас все повече такива страхотни притурки.

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

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

    BGtop

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





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


    Следвайте Blogzablogove

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

    Публикуване на коментар

    ИНТЕРЕСНО!Да направим уникална темата на нашия блогИЗБЕРИ!