Zapraszam na bloga
karta sklep

ozdobnik

Modny wygląd gadżetu „Obserwuj bloga przez pocztę e-mail”
Kategoria: Blogi i blogowanie

Dziś obiecany wpis na temat modyfikacji wyglądu gadżetu Obserwuj bloga przez pocztę e-mail, czyli zapraszam na zabawy z kodem :)

Tak jak już pisałam we wpisie na temat Blogger jak WordPress warto rozważyć zmianę wyglądu tego gadżetu na bardziej nowoczesny, czyli taki przypominający zapisanie się do newslettera. Poza tym forma „pudełkowa” jest bardzo modna :) a w pastelach to już hit sezonu :)

obserwuj przez e-mail jak newsletter

Przed zmianami w kodzie, należy zrobić kopię zapasową swojego szablonu. Szablon -> Utwórz/przywróć kopię zapasową -> Pobierz pełny szablon. Jeśli coś pójdzie nie tak to wystarczy go wgrać ponownie. Jeśli będziesz postępował zgodnie z instrukcjami, to nie będzie takiej konieczności.

Najpierw oczywiście trzeba dodać ten gadżet do bloga. Przechodzimy do zakładki Układ. Najlepiej wstawić go do kolumny bocznej lub stopki. Klikamy więc w np. polu gadżetów Sidebar Dodaj gadget i z listy wybieramy Obserwuj bloga przez pocztę e-mail.. Zamiast Follow by Email wpisujemy np. Obserwuj przez e-maila, Nowości z bloga lub Subskrybuj Bloga itp., po czym klikamy Zapisz. Gadżet można sobie przenieść za pomocą przeciągania w dowolne miejsce. Gdy już umieścimy go tam gdzie chcemy klikamy na Zapisz rozmieszczenie.

Przechodzimy do zakładki Szablon -> Edytuj kod HTML.
Klikamy koniecznie na kod w dowolnym miejscu, a następnie wybieramy kombinację klawiszy z f, czyli np. Ctrl + f i w okienku, które się pojawi wpisujemy FollowByEmail i klikamy enter dopóki nie zobaczymy takiego kodu, zawierającego FollowByEmail:

2

zaznaczamy linijkę w której znajduje się FollowByEmail (ale uwaga jeśli zrobimy to nieumiejętnie to kod się „rozwinie”, a to skomplikuje nieco sprawę, więc na wypadek gdyby się tak stało zapamiętajmy numerek (w moim przypadku jest to 2038), który jest koło tej linijki kodu i w razie czego wystarczy go kliknąć, aby kod ponownie się „zwinął”. Na końcu naszej linijki musi być koniecznie widget)

3

klikamy na zaznaczony fragment prawym przyciskiem myszy i wklejamy ten oto (wcześniej skopiowany) kod:

  <b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail' visible='true'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
  <div class='widget-content'>
    <div class='follow-by-email-inner'>
      <form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>
        <div width='100%'> 
              <p class="fbe-text">Otrzymuj powiadomienia o każdym nowym wpisie na swojego e-maila!</p>                 
              <input class="fbe-email"  name='email' placeholder='Wpisz swój e-mail' type='text'/>                     
              <input class="fbe-submit" type='submit' value='Dopisz się!'/>                  
        </div>
        <input expr:value='data:feedPath' name='uri' type='hidden'/>
        <input name='loc' type='hidden' value='en_US'/>
      </form>
    </div>
  </div>
  <span class='item-control blog-admin'>
    <b:include name='quickedit'/>
  </span>
</b:includable>
  </b:widget>

W powyższym kodzie można zmieć następujące teksty na inne:
Otrzymuj powiadomienia o każdym nowym wpisie na swojego e-maila!
Wpisz swój e-mail
Dopisz się!

Po wklejeniu kodu klikamy na Zapisz Szablon.

Trzeba będzie jeszcze dodać nieco stylu, bo przecież o to chodzi aby było ładnie. Najprościej będzie jeśli przejdziesz do zakładki Szablon -> Dostosuj -> Zaawansowane -> Dodaj Arkusz CSS (jest zwykle na samym dole listy) i wkleisz tam:

.FollowByEmail .widget-content{
    padding: 20px;
    background-color: #F7EFEF; /* kolor tła */
}
.fbe-text{
    font-size: 14px;
    text-align: center;
    margin-top: 0;
    color: #222; /* kolor tekstu głównego  */
}
.fbe-submit{
    width: 100%;
    padding: 10px;
    border: 0px;
    color: #FFFFFF; /* kolor tekstu na przycisku */
    background-color: #000000; /* kolor przycisku */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 10px;
    font-weight: bold;
    margin-top: 10px;
}
.fbe-email{
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    border: 1px solid #fff; /* kolor obramowania e-maila */
}

po czym naciśnij enter, a następnie kliknij na Zastosuj do bloga

Gotowe!

W kodzie zaznaczyłam jakie kody odpowiadają za kolory poszczególnych elementów. Wygląd nazwy gadżetu pozostanie bez zmian, gdyż ten już zależy od konkretnego szablonu.

Jeśli macie pytania lub wyskoczyły wam gdzieś jakieś błędy do piszcie! Zwykle jeśli pojawią się jakieś błędy na czerwono w odniesieniu do kodu, to wystarczy odświeżyć stronę i spróbować jeszcze raz.

Share on FacebookTweet about this on TwitterGoogle+

Komentarze Wypowiedz się

  • Dziekuję!!! Od razu wprowadziłam w czyn, jest super :*

  • Dziękuję, bardzo przydatne, skorzystałam ;)

  • Ja też się skusiłam. Fajnie, gdyby pojawił się podobny tutorial, który pokazałby jak zmienić wygląd etykiet :)

  • Cieszę się, że do Ciebie trafiłam, post bardzo przydatny :)