8# Rozwijane Informacje [instrukcja]

Kontynuując naszą odyseję po gadżetach bloggera, którą rozpoczęło prezentowane w poprzednim poście archiwum, przechodzimy do gadżetu z tekstem. W dniu dzisiejszym pokażę Wam trick, który pozwoli go nieco urozmaicić, a także zaoszczędzić troszkę miejsca na blogu. :) Efekt, jaki uzyskamy prezentuje się następująco:



kliknij, aby wyświetlić tekst
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet posuere tortor, at faucibus ipsum. Aliquam malesuada iaculis sem non varius. Aenean quis ullamcorper mi. Aliquam et diam rutrum, iaculis felis quis, mollis augue. pogrubienie| kursywa | link


Instrukcja nie należy do skomplikowanych i jeśli tylko będziecie kierowali się zaprezentowanymi przeze mnie krokami z pewnością uda Wam się osiągnać ten efekt. Jak zawsze zachęcam do eksperymentowania. Nie tylko z CSSem! :)
Zacznijmy od drobnych edycji w kodzie HTML. W panelu naszego bloga przechodzimy do sekcji "szablon", by następnie kliknąć przycisk z napisem "Edytuj kod HTML". Klikamy CTRL i F, by wyszukać tego fragmentu:
  <b:widget id='Text1'
 Naszym oczom powinien się ukazać taki kodzik:

<b:widget id='Text1' locked='false' title='Gadżet z tekstem' type='Text'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
Wycinamy cały powyższy fragment i zastępujemy go następującym:

  <b:widget id='Text1' locked='false' title='kliknij, aby wyświetlić tekst' type='Text'>
    <b:includable id='main'>
      <div class='przycisk'><data:title/></div>
<div class='tekst'>
  <data:content/>
</div>

Następnie, wciąż w naszym kodzie HTML wyszukujemy </head>, by tuż pod nią wkleić następujący kod:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function(){

$(".tekst").hide();
$(".przycisk").show();

$(".przycisk").click(function(){
$(".tekst").slideToggle();
});

});

</script>

Dzięki niemu będziemy mogli ukrywać i chować nasz tekst po kliknięciu na niego myszką.  :) 
Jak już się z pewnością domyślacie - teraz przejdziemy do obróbki stylu naszego odmienionego gadżetu w CSS. W tym celu ponownie klikamy na naszym panelu Szablon, by nacisnąć na przycisk Dostosuj. Następnie przechodzimy do Zaawansowane, gdzie po kliknięciu na Dodaj arkusz CSS mamy możliwość przy podglądzie dostosować wygląd naszego gadżetu. Poniżej kod, którego ja użyłam z opisami, dzięki którymi będziecie mogli dostosować go do własnych potrzeb.

Zaczęłam od wyglądu przycisku, a właściwie tytułu naszego gadżetu.
.przycisk
{
background:#5fa119; /*tło*/
display:block;/*nie zmieniamy :)*/
padding:10px;  /*odległość tekstu na przycisku od brzegu*/
color:#fff!important; /*kolor tekstu*/
font-family:Tahoma; /*czcionka*/
text-transform:uppercase; /*zmiana wszystkich liter na wielkie*/
text-align:center; /*wyśrodkowanie tekstu*/
text-shadow: 2px 2px 3px #206700; /*cień tekstu*/
box-shadow:inset 10px 10px 30px #206700; /*wewnętrzny cień przycisku*/
border:2px solid #206700; /*ramka tytułu*/
font-size:13px; /*rozmiar czcionki*/
cursor:pointer; /*zmiana kursora po najechaniu na tytuł. Polecam pozostawić bez zmian.*/
}
Teraz przejdźmy do obróbki tekstu, który pojawia się na dole po wysunięciu.
.tekst
{
padding:10px; /*odległość tekstu od ramki*/
background:#2a2a2a; /*tło*/
color:silver; /*kolor czcionki*/
font-family:Tahoma; /*czcionka*/
font-size:12px; /*rozmiar czcionki*/
text-align:justify; /*wyjustowanie tekstu*/
text-shadow:1px 1px 2px #000; /*cień tekstu*/
}
Przywykłam do zmienienia nieco stylu literek pogrubionych, pochylonych czy linków w gadżecie z tekstem. Wygląda to w mojej opinii atrakcyjniej. Dlatego też zachęcam! :)

.tekst b
{
color:#88bf3a; /*kolor tekstu pogrubionego*/
}
.tekst i
{
color:#fff; /*kolor tekstu pisanego kursywą*/
}
.tekst a
{
color:#b0b0b0; /*kolor linków*/
text-shadow:0 0 5px #206700; /*cień linków*/
text-decoration:underline; /*podkreślenie linków*/
}

To wszystko ode mnie w dniu dzisiejszym.
Macie pomysł na jaki jeszcze gadżet chcielibyście zobaczyć instrukcję? Składajcie propozycje w komentarzach!

16 komentarzy:

  1. Super instrukcja! Mam tylko pytanie: Jak to działa w poście? Jest to do konkretnego tekstu? Czy jak? xD Bo nie do końca wiem...
    No i jak zrobić, żeby odwoływało się tylko do tego tekstu, który chcemy?
    Bardzo podoba mi się taki efekt i z chęcią chciałabym go pojąć i wykorzystać na blogu :) Nie tylko zaoszczędzi mi to miejsca, ale i ładnie ozdobi przestrzeń :D
    Chciałabym chętnie zobaczyć efekt tym razem na jakieś menu... Mogą to być kółka, które po najechaniu po przez tunel(?) zmieniają kolor. Kiedyś tak było na Follow The Flame :D Podoba mi się bardzo taki efekt ;)
    A może coś o dodaniu własnego podpisu na szablonie? Na przykład jak ktoś oddaje zamówienie, to aby na przyszłym blogu było jasno napisane kto stworzył kody i tak dalej, ale w taki sposób, by zamawiający nie mógł tego usunąć xD
    To tyle z moich propozycji!
    Pozdrawiam!
    Forain ♥

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję za komentarz! A jak to zrobić w poście? Już tłumaczę.
      Kod, który podałam w poście standardowo wklej pod head kodzie HTML. Następnie przejdź do posta, wklej poniższe i uzupełnij.

            <div class='przycisk'>tekst, który pojawi się na przycisku</div>
      <div class='tekst'>
        tekst, który pojawi się po kliknięciu na przycisk</div>

      CSS możesz normalnie, w arkuszu uzupełnić. ;3

      Co do menu - mam kilka pomysłów na kilka. Z pewnością pojawią się już wkrótce. Twoją kolejną propozycję z pewnością również rozważę. ^^ Może dorzucę do tego kilka gotowców?

      Pozdrawiam również. <3

      Usuń
    2. JEEEJ! ♥ Dziękuję Ci ślicznie :D Wypróbuję w takim razie ten tekst u siebie w kolejnym poście!

      Usuń
    3. Nie mogę się doczekać wyniku. <3

      Usuń
  2. Kocham Cię normalnie za tą instrukcję!

    OdpowiedzUsuń
  3. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  4. Instrukcja jest świetna. :3 Mam pytanko czy można ten efekt użyć do innych gadżetów tj. strony, czy archiwum?

    OdpowiedzUsuń
    Odpowiedzi
    1. Jasne, że można! :D Tylko trzeba z tym troszke pokombinować. ^^

      Usuń
  5. Instrukcja świetna możliwe,że skorzystam przy następnym szablonie
    albo nawet dodam w poście :)

    OdpowiedzUsuń
  6. A ja mam pytanie odnośnie wstawienia takiego efektu w poście. Tyle, że w kilku miejscach.
    Jak wówczas to rozegrać? Czy trzeba wprowadzić inne klasy zamiast używania tylko jednej przycisk? Czy za każdym razem powielać kod (z użyciem innych klas)?
    Tak, ja się motam, ale niestety, tłumaczyć nie potrafię. Nie umiem. Mam nadzieję, że pomimo tego zrozumiesz, o co mi chodzi.

    OdpowiedzUsuń
    Odpowiedzi
    1. Inne klasy na przyciskach będą konieczne. :) Jeśli tego nie zrobisz to po kliknięciu na przycisk rozwijały się będą wszystkie.

      Usuń
    2. Dziękuję za odpowiedź :D

      Usuń
  7. chyba spróbuje jeśli nie uda sie będę się zgłaszać

    OdpowiedzUsuń
  8. Hej! Przepraszam za datę, ale jakby nie był to kłopot, to kształt ramki? :)

    OdpowiedzUsuń

statystyka

Archiwum bloga

Obserwatorzy